Making a lightbox from a CPT Loop

Making a lightbox from a CPT Loop

With new features in Breakdance 2.3, I’ve been excited to try a few things out, and this one was especially useful for me, and I suspect it’ll be great for a lot of people using the Breakdance Builder.

Extra cool new feature:
You can now add ACF content into text elements with a (generated) shortcode allowing you to create dynamic text and it even works within data attributes!

Additionally, this tutorial happened because a client wanted a lightbox from a grid of items, and since we had also discussed adding an archive page, the lightbox would have to work from a custom post type loop.

So my search for a usable lightbox started, and this is what I found:
baguetteBox.js: Simple and easy to use lightbox script written in pure JavaScript
https://github.com/feimosi/baguetteBox.js

It’s a fantastic lightbox that is lightweight and easy to use.

To get this work, here’s a quick rundown of the work you’d need to do:

  1. Make a CPT
  2. Add the fields you’ll need
  3. Make the global block
  4. Load the js and css files. (Download from the git and upload to your site via plugin)
  5. Set up the loop element

 

Click the button to have a look at the preview or reference.
Demo Preview

The Video

Timestamps

  • 00:05 Introduction + Sample
  • 00:33 Step 1. Making the CPT
  • 02:18 Step 2. Making the field groups
  • 03:36 Step 3. Making the global block
  • 05:25 Breakdance 2.3 feature – easy wrapping elements
  • 06:10 Breakdance 2.3 feature – using dynamic fields inline
  • 06:55 Quick side note tip – Getting ACF field keys
  • 12:30 Step 4. Adding the JS + CSS for BaguetteBox
  • 14:12 Step 5. Building the post loop
  • 20:15 Outro

1. Making the CPT

I used to use wp-hasty, but after ACF added the feature, I’ve found myself just using ACF for it.

A couple of things to keep in mind, if you’re going to have an archive page, make sure you allow it in the ACF settings.

Also, “hierarchical” means they work like pages (because pages have child pages) and since you’d usually be looking at CPTs that work like blog posts, non-hierarchical is what you’d be looking for.

Lastly, if you need them to work with categories and/or tags, remember: hierarchical taxonomy means like categories, and non-hierarchical taxonomy means like tags.

2. Add the fields

Assign the ACF field group to the CPT posts. Of course, you can use ACF image fields for the ones that display in the lightbox. I only used the featured image because that’s the WP default, and I tend to stick with them when it’s an easy choice.

3. Make the global block

This is where things become fun.

The global block will need to be wrapped with a link wrapper. If you forgot to start with a link wrapper, you can always add it later with a right click > wrap in

BaguetteBox.js looks at the children of the selector in an anchor tag (<a>) that uses an image in the href attribute and lightboxes them. So you’ll need to set it up to have the image in the link reference.

You can add titles and text inside it, but since it’s not good to have links inside links, don’t link the titles to anything.

Extra note: In the global block, you don’t need to set up the image to be full size, but since the lightbox will need to show the full image, just make sure the link wrapper is linked to the full image, and the image element inside the card is just a smaller version (for better loads).

If you’d like a way for the user to view the content of the CPT on a single post page, add a button outside the link wrapper and link the button to the post permalink.

The lightbox script uses data attributes to populate the text in the caption, so if you want the captions to have all/some ACF fields displaying in the lightbox, you can add them by going to the link wrapper element > advanced > attributes. The name is ‘data-‘ and the content will need to be populated by the Breakdance ACF shortcodes.

Note: this is a Breakdance 2.3 feature, so you need to make sure you’re updated

To get the shortcodes, you can assign the field, then click on the field name to open the advanced window. There’s a little clipboard icon near the upper right corner.

Click on that to copy the shortcode into the clipboard.

Then paste it into a text editor so you can get it to look the way you need it. Here’s what it will look like when you build the content in a text editor.

Now that will all go into the caption attribute (in this case).

Quick tip: You can use ACF’s export tool to get the full list of field keys. This can be helpful when working with multiple fields.

4. Adding the js and css

We can add the js and css easily via cdn. The git has a couple of cdn links, and you can go there and get the links. Of course, if you’re using this method, you can click on the copy code button from the code section (in the right sidebar)

Alternately, you can download the zip file of the git and upload it into the plugin directly so it’s all onsite.

5. Making the loop

Let’s use the post loop builder element to make a quick banner grid of the CPT. Useful for things like ‘recent posts’ and whatnot.

Load up the post loop builder, adjust the query to show what you need.

Now for the last and most important part of the whole loop building process.

We need to add the code to make the js+css load and to get it to work with the loop we just created. In order to do that, we’re going to add a custom class to the loop builder element.

The git just uses .gallery which works for webpages you code yourself from scratch because there aren’t any other selectors floating around, but when we’re building on WordPress, it’s always a good idea to prefix it.

The sample code provided has the prefix mn because of my agency MajorNeon, but you can/should change it to fit your brand. Just make sure the classes match between the one in the code and the one you add to the post loop element.

So ultimately, it will look like .your-class-gallery .ee-posts (don’t forget the space, and don’t forget to make the ee-post plural) inside the JavaScript you’re adding.

Once you do that, just drop the code in a code block next to the post loop builder element and you are done! (Of course you can add things globally, but that’s only for when you really want to have the lightbox thingie on every page)

Additional notes

The client ended up not wanting the lightbox any more because they made some changes to the content, but I got to make a nice tutorial out of it, and it’s great for portfolio pieces and other similar approaches to showcasing content.

So there you have it. I hope this helped and I hope it have you some cool ideas and a great new feature of breakdance 2.3. I have a lot of cool projects coming up, so please stay tuned, like and subscribe and I’ll see you in another video.

Extra Code

Here's the code used in the episode. Click on 'copy code' to copy to your clipboard and paste it appropriately.
Type of code: html

This will add the js and css files from the CDN. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.12.0/baguetteBox.min.css" integrity="sha512-1hit2XBKwGtoT792KMYEhLYTk+eYYATgFqSkftn4dG8/7TA0ysVRCBIYzhe+IRd9XPi2l8pceoKlV+Oa/B+PDA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.12.0/baguetteBox.min.js" integrity="sha512-HzIuiABxntLbBS8ClRa7drXZI3cqvkAZ5DD0JCAkmRwUtykSGqzA9uItHivDhRUYnW3MMyY5xqk7qVUHOEMbMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
window.addEventListener('load', function() {
  baguetteBox.run('.mn-gallery .ee-posts', {
  	animation: 'fadeIn',
  	captions: true
  });
});
</script>
Leave a Reply

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

    New tutorials

    Making a lightbox from a CPT Loop
    Use a featured video in post templates with Breakdance
    ACF repeater fields as accordions in Breakdance
    Breakdance 2 vs. Divi 4

    Why no ads?

    Hi, I'm PK, and I maintain and publish content on this site for two reasons.

    1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

    2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

    The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

    Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

    There's a newsletter!

    Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.