Jump to content

Archived

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

jeomiland

iBox vs Media box vs ??? - how control image width, aspect ratio

Recommended Posts

jeomiland

Hi guys

I saw discussion back in 2013 about ibox/icon/image size. Here's another question.

Have a client who wishes to have iboxs displaying several product categories in a shopping store, then under that, a couple more boxes - with clickable images - with DIFFERENT ASPECT RATIOS!!! from the iboxes used above.

see  http://ecoluxhomeproducts.com/storedev/dev/ (site under development so may look different when you visit)

So is iBox the only section that has clickable images AND some sort of text describing the action you wish to take? And how control aspect ratio of the media display box? Client want's the 2 down below (Designer Collections and Blog) to be longer, landscape.  I know I can code it up in HTML or PHP, but the idea is to make it simple for client to change the images AND the text AND the url the link goes to.

So any ideas what's the best section to accomplish this? And how control aspect ratio (those 2 images are actually landscape dimensions.)

Thanks

JE

Share this post


Link to post
Share on other sites
Danny

Hi,

The page you have linked is giving me a 404. Therefore, can you resolve the 404 issue so I can see first hand what you're referring to please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jeomiland

Hi

Don't know how that extra /dev/ got in there

ecoluxhomeproducts.com/storedev/  is the correct link

Thanks

Share this post


Link to post
Share on other sites
Danny

You can create a very similar effect with both the MediaBox, NextBox and TextBox sections. However, you will need to use HTML, in doing so you will have more control how the layout works, as you can add classes to the elements. A similar layout would look something like this:

<div class="row">
    <div class="span12">
        <a href="Link goes here" title="title goes here">
            <img src="link to image goes here" alt="alt text goes here">
        </a>
        <h1>Title goes here</h1>
        <p>Paragraph text goes here...</p>
        <a href="link to article/page/post/site goes here" title="title goes here">Read More...</a>
    </div>
</div>

The above code will have a linked image at the top, then the title and at the bottom your paragraph text with a read more link. You can add your own classes to all elements giving you more control over how they're styled.

If you want to have your title at the top, simply switch the a tag with img tag with the h1 tag like so:

<div class="row">
    <div class="span12">
        <h1>Title goes here</h1>
        <a href="Link goes here" title="title goes here">
            <img src="link to image goes here" alt="alt text goes here">
        </a>
        <p>Paragraph text goes here...</p>
        <a href="link to article/page/post/site goes here" title="title goes here">Read More...</a>
    </div>
</div>

 


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+
      The media selector for sections uses full size images, you can't choose to use smaller file sizes. That means that sections are huge in file size. So for a box image in Boxes which will never be wider than 500 px, Pagelines choose full image size, even if it is a 2 mb photo. 
      Adding alt and title text to the images would also be good.
      I'd prefer to use the default setup by WP, which has all the options we need.
      For now I have to use this plugin as a workaround, by selecting the best size and add it in the url field.
    • 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 ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • jeomiland
      By jeomiland+
      Please refer to cassclayton.com/dev
      Need to place the 2 media boxes (that contain the ragged dark background for Playlist of month and Song suggestion) right under the content above that. Have a basic 2-column format for the page with sidebar widgets in narrow column to right and main content in large area left column. When I try to drag another 2-col section just under the other content, instead of what I want, a new canvas section (?) is formed into which the new 2-col is placed and this gets placed AFTER all that stuff in the narrow right column!
      How does one create a format where you can have multiple columns inside a column?
      I can perhaps do this manually with DIVs and float: left CSS, but that will make it very clumbsy for client then to update that content.
      Appreciate your insights, thanks
      JE
      Oh, also I have to drag out a 2-col twice before one of them stays on refresh (see post from the other day "2-colums inside other column - disappears on refresh? CSS not saving on refresh" - still waiting for reply on that.)
×