Using Flexibility for MODX: Orbit's Image Slider

The slider

To get to grips with Flexibility for MODX, I have been looking at the various components it uses.

One of those is the image slider. The slider used is Foundation’s Orbit

Flexibility uses Orbit’s javascript and uses MODX's migx for the user interface to upload images and add alt text and captions.

The slider can appear on any page by selecting the Slider yes/no option.

There’s a switch snippet in the template that looks at the optional_slider template variable and includes the slider code if it is set to yes.

It calls migx’s getImageList to retrieve the images that are set on the “Site settings” page.

Adding width and height attributes to the slider images

One thing that I notice about the slider in it’s current format is that the images don’t have width and height attributes. Google considers these attributes as a good thing as they allow better rendering of the page, and are therefore, probably a good idea for SEO.

So to add these I’m going to do a custom getImageList snippet (based on code originally by Mark Hamstra’s from his excellent migx tutorial).

So I replace getImageList with my own version getImageList_mjn which has the following code:

$input = $modx->fromJSON($input);
$output = array();
if (!$input || empty($tpl)) return 'no stuff';
foreach ($input as $row) {
  $imageSize = getimagesize($row['image']);
  $row['imageAttribs'] = $imageSize[3];
  $output[] = $modx->getChunk($tpl, $row);
}
return implode("\n", $output);
	

And I call it like this (which requires installing getResourceField using the package manager):

[ [ !getImageList_mjn? 
      &input=`[ [ getResourceField? &id=`11` 
                 &field=`multiItemsGrid` 
                 &processTV=`1` 
                 &default=`Sorry, no data available`
              ] ]`		         
      &tpl=`slideTpl_mjn`
] ]
	

And need to add a place holder for the width and height attributes [ [+imageAttribs] ] in the slide chunk

<div class="slide">
	<img src="[ [++site_url] ][ [+image] ]" alt="[ [+description] ]" [ [+imageAttribs] ]>
	[ [+content:notempty=`
	<div class="slide_content">
		[ [+content] ]
	</div>
	`] ]
</div>
	

Another note: the default setup calls getImageList uncached but we will want to call it cached in the production environment.

How to customize Orbit's image slider using its options

You can change the way that Orbit functions by changing the default values. This is done in the javascript file flexibility.js by adding values to $('#slider').orbit()

$('#slider').orbit({
  animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
  animationSpeed: 800,                // how fast animtions are
  timer: true,                        // true or false to have the timer
  resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
  advanceSpeed: 4000,                 // if timer is enabled, time between transitions
  pauseOnHover: false,                // if you hover pauses the slider
  startClockOnMouseOut: false,        // if clock should start on MouseOut
  startClockOnMouseOutAfter: 1000,    // how long after MouseOut should the timer start again
  directionalNav: true,               // manual advancing directional navs
  captions: true,                     // do you want captions?
  captionAnimation: 'fade',           // fade, slideOpen, none
  captionAnimationSpeed: 800,         // if so how quickly should they animate in
  bullets: false,                     // true or false to activate the bullet navigation
  bulletThumbs: false,                // thumbnails for the bullets
  bulletThumbLocation: '',            // location from this file where thumbs will be
  afterSlideChange: function(){},     // empty function
  fluid: true                         // or set a aspect ratio for content slides (ex: '4x3')
});
	

Find what Orbits’s options are here: http://foundation.zurb.com/old-docs/f3/orbit.php

Graceful loading of the image slider

The images are loaded on to the page before the associated javascript so you will see all the images flash up briefly on the screen before the javascript kicks in. To avoid this we neet to write some css.

When the javascript does act it adds class="orbit" to the slider div. So we can initially hide the images and add a loading animation until the javascript is active.

Add the following code to assets/templates/flexibility/stylesheets/style.css

#slider { background: transparent url(loading.gif) no-repeat center center; height: 450px; }
#slider img { display: none; }
#slider .slide_content { display: none; }
#slider.orbit { background: none; }
#slider.orbit img { display: block; }
#slider.orbit .slide_content { display: block; }
	

We use a loading gif here but you could put the first image of the slides; The height value is the height of the images in the slideshow.