Jump to content


This topic is now archived and is closed to further replies.

Audun MB

Adding number options to Boxes. help needed

Recommended Posts

Audun MB

I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:

First this:
'opts'		=> array(
						'icon'	 	=> array( 'name' => __( 'Icon Font', 'pagelines' ) ),
						'count'		=> array( 'name' => __( 'Counter', 'pagelines' ) ),
						'image'		=> array( 'name' => __( 'Images', 'pagelines' ) ),
						'numb'		=> array( 'name' => __( 'Number', 'pagelines' ) ),
						'text'		=> array( 'name' => __( 'Text Only, No Media', 'pagelines' ) )

And then this

} elseif( $media_type == 'numb' ){
					$background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : '';
					$media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background );

And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 

The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.

Adding a number option to the media array is the same as iBox:

          'key'      => 'ibox_media',
          'type'       => 'select',
          'opts'    => array(
            'icon'      => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ),
            'count'     => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ),
            'boxnumb'     => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ),
            'image'     => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ),
            'text'      => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) )
          'default'    => 'icon',
          'label'   => __( 'Select iBox Media Type', 'pl-section-boxes' ),

In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.

  function section_template(){
    <script type="text/html" id="boxes-template">

      <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" >

        <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()">

          <div class="boxes-media media-left">
            <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}">

              <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div>

              <span class="pl-counter" data-bind="pltext: count"></span>
              <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span>

              <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i>

          <div class="boxes-text media-right">
            <h3 class="boxes-title" data-bind="pltext: title"></h3>
            <div class="boxes-desc" data-bind="pltext: text"></div>


Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 

I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 

Share this post

Link to post
Share on other sites

  • Similar Content

    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.

    • Audun MB
      By Audun MB+

      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 

    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.