Slide photos featuring fishpig and magento logos

For years, I have been using Fishpig’s free iBanner extension to display image carousel’s on my customers Magento eCommerce stores. It is one of the best extensions to quickly allow non-tech-savvy users to add their own slides quickly and easily without any coding knowledge.

Going responsive and adding CSS wrappers

Since Google’s most recent release and the need to be mobile friendly, I have been updating older customer websites with a fresh mobile friendly skin. However, most of the existing elements need a minor re-structuring or classes adding to control the positioning on different devices for truly responsive layouts.

Within most of Magento’s .PHTML templates, this is fairly straight forward but when it comes to 3rd party extensions it can be a little more tricky, without editing their template files. (Which is an option)

Monitor, ipad, iphone responsive ibanner

There are so many ways to do this, I hear you shout

Yes there are several ways to achieve this, but which is the best way!? I had considered:

  1. Altering a local version of the iBanner template
  2. Writing a little jQuery to detect and wrap the DIV with my own class
  3. Create my own .PHTML to load the ChildHTML into
  4. Add to the generated layout XML provided by the extension and used as a custom layout.

I was leaning toward the last option, to keep it simple and avoid editing any files.

*Hands up* I did not know I could use setElementClass

I was fairly sure that I must be able to add a block to wrap around Fishpig’s iBanner XML, but I did not know what the command or syntax required was to add a class.

So I hopped onto Google and began searching without an accurate search string, which we all know can lead you off down the garden path to all sorts of partially related results.

<action method="setElementClass"><value>span12 carousel-container</value></action>

The answer was amazingly simple

I found a quick answer to my problem on Aydus Consulting Tech with a simple example.

So after applying this to Fishpig’s iBanner XML it looked like this:

<block type="page/html_wrapper" name="carousel.container" translate="label"> 
    <label>Banner Wrapper</label> 
    <action method="setElementClass"><value>span12 carousel-container</value></action> 

    <!-- Fishpig ibanner xml -->    
    <block type="ibanners/view" name="ibanners.cat_landingpage" as="cat_landingpage" before="-">
    <action method="setGroupCode"><code>cat_landingpage</code></action>
    </block>
    <!-- end fishpig ibanner xml -->

    <block type="cms/block" name="category.ibannersmsg" after="ibanners.cat_landingpage">
        <action method="setBlockId"><block_id>59</block_id></action>
    </block>

</block>
XML code for magento custom layout update
The end result was exactly what I needed

An easy and responsive way to control the elements contained within, on all available devices with a simple CSS wrapper all rendered before the DOM.

The final rendered output looked just like this:

<div class="dz_column span12 carousel-container">
    <div id="ibanners-cat_landingpage-wrapper" class="ibanners-wrapper">
       <div id="ibanners-cat_landingpage" class="ibanners animated">
          <ul>
              <li id="ibanner-46" class="banner">
                   <a href="/fantastic-offer-new-design.html" title="New Design"> <img src="/category-banner_1.jpg" alt="New Design" pagespeed_url_hash="3543084132"> </a>
                      <div class="html">
                         <h2>Category Title</h2>
                         <p>Fantastic offer is now available to purchase online<br>
                         Click here for further information.</p>
                     </div>
               </li>
          </ul>
       </div>
    </div>
    <div class="dz_column span3 left-padding imsg-box">
       <div class="frame-it">
             <div class="delivery-bg">
                 <span class="title">Free Delivery</span>
                 <p>On all orders over £20</p>
             </div>
       </div>
    </div>
</div>

Hope this of help to any of you Fishpig ibanner users out there!

Post Author
Piers Caswell

Piers Caswell

Founder, designer & developer at Digital-Zest Online Ltd
For 15 years I have been creating websites and digital media solutions for my clients and several marketing agencies. Situated 34 Miles West of London, located in Tilehurst, Reading.
Piers Caswell

@digitalzest

Digital media specialist focusing on both bespoke website design and development services
@yoast Thanks for the reply. What's the likelihood you'll be adding this extremely useful feature very soon? 🙂 - 1 year ago
Piers Caswell
Piers Caswell

Latest posts by Piers Caswell (see all)

Blogging Tags