• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Damien Carbery - Website Development

Getting You Online & Keeping You There

Getting You Online & Keeping You There Get Started
  • Home
  • Services
  • Maintenance Plans
  • Portfolio
  • Blog
  • About Me
  • Contact
You are here: Home / Website Development / Use CMB2 to create a carousel

Use CMB2 to create a carousel

Published: June 17, 2019 (Updated: September 6, 2022)

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

Update 6 September 2022: In version 0.2 I have added a check to verify that the CMB2 plugin is active.

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.

Reader Interactions

Comments

  1. agustin says

    January 7, 2022 at 4:00 pm

    how to call this in post creator?

    Reply
    • damien says

      March 7, 2022 at 11:17 am

      @augustin: What is post creator?

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Blog Categories

  • Being Green
  • Food
  • Grammar
  • Just Strange
  • Laziness
  • Personal
  • Portfolio
  • Race Reports
  • Shudder
  • Typo
  • Website Development
  • WooCommerce Tips
  • Facebook
  • Twitter

Copyright © 2013–2023 Damien Carbery · Using Genesis Framework · Privacy Policy