Use CMB2 to create a carousel

Add photos to multiple groups and randomise group order in a carousel

Last month I wrote about a site I was working on for a stylist, creative director, TV and radio contributor. I added a carousel behind the header area. On one of the internal pages I added another carousel, with images grouped into blocks. I hardcoded the images to reduce development time and costs.

Use CMB2 for the photos

The hardcoded carousel has 23 images. I set it to auto play, moving left by a single image every 3 seconds. It would take over a minute for someone to see all images. As no one would sit looking at it for that long I grouped the photos by photoshoot and randomised the order the photoshoots were displayed. This kept the photos from each photoshoot together but changed the order of photoshoots.

I have now converted this code to use CMB2, while retaining the randomising code.

CMB2 Metabox setup

The CMB2 metaboxes use the ‘group‘ feature to allows for repeatable fields. I used the ‘file_list‘ field to hold the photos. Once photos are added they can be dragged and dropped to reorder.

The shortcode code

The code retrieves the photos information from the database, copies it to a new array (so that I could use the code I wrote before) and the generates the required markup. It was a lot easier than I thought.

When the shortcode is used it enqueues the slick carousel scripts in the footer and adds javascript code to initialise the carousel.