Oh for God’s sake, he posted another one. Can’t someone tell him to stop?!
-everyone on the Facebook Divi Groups
Welcome to part 2.5 of my tutorial to add a masonry output to the Divi theme without using a plugin. I’m labeling this 2.5 because I originally promised to use the Masonry.js library and got a bit distracted. Instead, I’m going to show you have to add categories to your media library images and use a function, along with CSS to accomplish our layout.
In the last tutorial we had to enter the URL of each image we wanted displayed into HTML markup by hand. Painful!!! To get around this we need a way to identify selected images. You would think that by now WordPress would have Categories and Tags for images, but no. I guess we’ll just have to implement that by ourselves! Okay, first up, make sure that you are using a child theme. Divi updates will break this method.
Go into your child theme’s functions.php file. If you haven’t made any alterations previously, it should be relatively short. At the bottom add the following code:
Okay, so what does this do? When you bring images into your media library Wordrpress considers them ‘attachments’. This simply says to allow for taxonomic categorization of all attachments. If you go into your library you will see that you now can assign categories to your uploads. For the purposes of this tutorial, go ahead and make a new category called ‘masonry’ and assign several photos to the category. Okay, we now have a way of identifying the photos we want displayed. Let’s go back to our ‘functions.php’ file to implement some code to actually pull the file URLs out of the library. We will use two separate functions for this:
This function performs a query on your media library and fetches all of the attachments with a category of ‘masonry’. I chose to give them a random order to change the page on each reload, but you may want to do this in a different way. With the second function we will actually make a shortcode to allow us to easily dump an HTML formatted list of URLs to a Divi code module.
Okay, now we have the short code ‘[masonlist]’ that we can take back into the Divi code module. Almost done!!
Loaded up a Code module into the page you want to display your images on. In the code module you are going to put together a little HTML, just as in the last tutorial. Again, for simplicity I’m using exactly the same CSS that I used last time to achieve the masonry effect.
And that is it. Any pictures from your library that have the category ‘masonry’ should load in and neatly tile. In this case you have fight a little more to change up the order, but if you have a lot of attachments you want to display, that is the price you pay.
As always I would be happy to clarify/extend any part of this. I’ll be back soon with the last installment of this tutorial. In the meantime, drop me an email if there is any other tutorial you would like. I apologize for the code boxes. Me and WordPress are arguing about how to display things!