Using TYPO3 content layouts to create Jquery image sliders or galleries

For some time ago I've write an article about how to create a JQuery Cycle image slider in TYPO3 by using the media field in TYPO3. The shown technique works fine for header sliders, but what if you need to enable the website editor to dynamically add an image gallery or slider to the website? You can try to find a good image gallery for TYPO3 in TER or you could try to integrate the JQuery Image gallery od slider of your choise without using an extension.

In this article I will show how integrate a JQuery image slider into TYPO3 by using the layout field of TYPO3 content elements without the need to install an extension. The technique shown can be used to create custom HTML output for a lot of JQuery image galleries or sliders available. In this example I will show how to create the needed HTML output for the bxslider.

Prerequisites
You need a working TYPO3 6.1 (lower versions should work as well) installation of TYPO3 with a working template and css_styled_content installed, so TYPO3 content elements are shown on the websites output.

Integration into TYPO3
First, you need to include a version of JQuery and the image slider (both JS and CSS files) to the output of your website. Upload the JS and CSS files for the image slider to a folder in your fileadmin and add the following to your TS template


page.includeJSlibs {
  jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  jquery.external = 1
  bxslider = fileadmin/templates/js/jquery.bxslider.min.js
}

page.includeCSS {
  bxslider = fileadmin/templates/res/jquery.bxslider.css
}

After adding JQuery and the slider to your frontend output, you need to add the JS for the slider to create an instance of it for each object that should be treated as an image slider. For the bxslider, you just need some lines of code. I create the file slider.js in the directory fileadmin/templates/js/ with the following content.


$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Now I add the new JS file to the websites output by adding the following the the page.includeJSlibs


page.includeJSlibs {
  slider = fileadmin/templates/js/slider.js
}

Now the page output is ready for the slider. Next I'll add a new layout in the root page TSConfig.


TCEFORM.tt_content.layout {
  addItems.51 = Bxslider
}

This adds the layout "Bxslider" to the dropdown-box "layout" for content elements.

Last you need to add some TS to the websites TS template so the new layout can be used to output the needed HTML for the slider. Add the following to your TS template


# Get default settings for images
temp.image < tt_content.image.20

# Define new layout
tt_content.image.20 = CASE
tt_content.image.20 {
  key.field = layout
  default < temp.image
  1 < temp.image
  51 < temp.image
  51 {
    imageStdWrap.dataWrap = <div class="bxslider-wrapper"><ul class="bxslider">|</ul></div>
    renderMethod = ul
    rendering {
      ul {
        oneImageStdWrap.dataWrap = <li>|</li>
      }
    }
    layout.default.value = ###IMAGES###
  }
}

# Set defaults also for TEXTPIC
tt_content.textpic.20 = < tt_content.image.20.default

That's it - the image slider is not ready to use. Create an new content element of type "images only" and add some images to it like shown on the screenshot below.

Next select in the "Appearance"-Tab the newly created layout "Bxslider" as shown below.

Open the page output and you should see the slider with the images you just selected.

Easy, is'nt it?

Notes about tt_content.stdWrap.innerWrap.cObject
I've seen some tutorials which show, that you need to add items to tt_content.stdWrap.innerWrap.cObject with "key.field = layout" to enable the new layout. I was'nt successful with that, because it seems, that adding new items with "key.field = layout" to tt_content.stdWrap.innerWrap.cObject overrides the possibility to combine "layouts" with "Indentation and frames".

Conclusion
Please keep in mind, that this was just an easy example on how to create custom HTML output for a TYPO3 content element, so it can be used by a JQuery slider or image gallery. If you digg deeper into tt_content.image.20 TS config, you will see, that there are several other settings that can be made. Generally this all is just pure TS and you can modify it to suits the needs of the gallery or slider you wish to integrate.

A TechBlog by Torben Hansen

Using TYPO3 content layouts to create Jquery image sliders or galleries