Going responsive and adding a CSS Class to wrap FishPig’s iBanner at the XML Block level

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)

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:

Altering a local version of the iBanner template
Writing a little jQuery to detect and wrap the DIV with my own class
Create my own .PHTML to load the ChildHTML into
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:[/vc_column_text]

<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>

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!