Jump to content


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


Images not scaling in iBox

Recommended Posts




I have an iBox in my footer setup with 6 boxes.  When I load the images they are not being scaled into the size of the box.   Changing the size of the image in the Media Library doesn't seem to have any impact.    Ultimately I need each image to be scaled into the iBox  and also centered vertically and any white background space within the image box to be made transparent.     Is there CSS code that can do this?  And if so,  how do I set it up and where do I place it so that it only impacts this particular iBox and not others on my site?


thanks for any help and guidance you can provide


I am currently working in a temporary domain:


I have the lastest version of Wordpress & DMS and am using the Workspace Theme

Share this post

Link to post
Share on other sites
James B

Hi there, the ibox is set to cover the img container, it does this by resizing the image by the height. So in your case as there's 6 boxes in a row, the width of each box is quite small, when it resizes the image by the height of the box the width is bigger so the images go off screen.


To resolve this you can use css to change the image from cover to contain, so it keeps the image within the box container. This gives this result http://screencast.com/t/r6v4CW1l you and paste the css below in to your custom code panel in your DMS control panel and save.


.ibox .ibox-media .ibox-icon-border.media-type-image {
    background-repeat: no-repeat;
    background-size: contain;
.pl-contrast {

background-color:none !important;

You're not going to be able to target each box to align the content vertically. The best thing to do here would be to create a square image in something like photoshop, duplicate it six times and then insert your logo in the center of each and save. Then you have equal space and above and below, upload these images to replace the ones currently in your boxes.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Hi James,


Thanks for your prompt support.  What you explained definitely makes sense.   I applied the code and it works,  the only issue is that it negatively impacts another iBox that I have on the same page that only has three boxes across.   Is there anyway that the code can only be applied to the specific ibox that I have in the footer?    If not,  I think I can probably still make it all work by doing as you suggested and creating square  (or slightly vertical) images in Gimp and then using those.   Or alternatively I can just use text boxes but was hoping to take advantage of the additional ibox funcitonality


thanks again

Share this post

Link to post
Share on other sites

Which boxes are you referring to, the ones near the top of your site or the ones in the footer of your site ?

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • 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+
      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:
      array( '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> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> 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. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      Lasse Kramer
    • Audun MB
      By Audun MB+
      I'd like to have the images in iBox to look different with the following CSS. This works when manipulating the CSS with Inspect element in Chrome, but I can't get it to work as a class. Here's the class:
      .imagecontain {     border-radius: 1px;     background-size: contain;     background-repeat: no-repeat;       } This is from my style.less in the child theme. I applied the class to the iBox with custom class option, though nothing happens. How to fix that? How do I target only the div with the image in with CSS?
    • dchetson
      By dchetson+
      I am trying to edit the text in an iBox but every time I attempt to make the change, it doesn't take. Website is www.chetson.com.