Really, another brick?
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!
Dear Robert,
i read your “bircks” and i find it very interesting.
I am trying to do a masonry gallery in divi.
Could you give me a hint with that?
Here i aw your screenshots but does it really work? Could you send me a link of our test?
Best regards and thanx in advance
Robert
Hi Robert,
I would love to help out. What exactly do you need? This tutorial should be used along with the one before it.
I just put up a quick page using this code.
Since I was having problems at the time I posted this with code boxes, I’ve reposted the code for the php functions below. Hope it helps!
// add categories for attachments function add_categories_for_attachments() { register_taxonomy_for_object_type( 'category', 'attachment' ); } add_action( 'init' , 'add_categories_for_attachments' ); // add tags for attachments function add_tags_for_attachments() { register_taxonomy_for_object_type( 'post_tag', 'attachment' ); } add_action( 'init' , 'add_tags_for_attachments' ); function get_images_from_media_library() { $args = array( 'post_type' => 'attachment', 'post_status' => 'inherit', 'category_name' => 'masonry', 'nopaging' => true, 'orderby' => 'rand' ); $query_images = new WP_Query( $args ); $images = array(); foreach ( $query_images->posts as $image) { $images[]= $image->guid; } return $images; } add_action( 'init' , 'get_images_from_media_library'); function make_list_from_media_library() { $imgs = get_images_from_media_library(); $html = 'Hi Bob,
thanx for the prompt reply, the code and the link.
That looks great!
You really didi it – masonry style gallery in Divi.
Well, i have to admit that i´m more kind of a designer than a code champ but i´m curious and do my best.
I tried some plugins to achieve a tiled/masonry/justified grid layout and well…
Some are good, really good but all of them have their issues.
So i found your site cause i´m really eager to have that done in Divi.
For now these are my best picks regarding plugins:
https://thriveweb.com.au/the-lab/photoswipe/
https://de.wordpress.org/plugins/justified-gallery/
I use the last one at the moment.
It overwrites the standard wordpress and Divi gallery function so i get tiled galleries.
But…
If i use the text module in Divi and generate a gallery in it (like in genuine wordpress) it looks like this:
http://www.new.noodles.de/test-gallery-2/
This is good and responsive but its nit really re-editable. What i have is a shortcode in the text module which is like it is. Also editing the page in the visual editor is pane in the a.. since i have all images in a one row, which makes editing the page a scrolling challenge.
If i use the Divi gallery function the galleries are editable and it even shows both landscape and portrait images in their original aspect ratio but the layout is far from being as nice as the one with the justified grid an behaves strange in responsive matters.
All in all – i wanted to give it a try to put something together which could work i Divi and would be kin of handy to use.
I also bought a child theme for another project, where the projects a re shown in a masonry grid.
It is here:
http://agencyalpha.com/
But since now i did not find anything to show a gallery in this way.
Your work looks really really interesting. Would be possible to generate galleries from inside a page with it?
Cheers
Robert
Hey Robert,
I’ll try to get back to your comment later tonight or tomorrow. Thanks for the comment!
Bob
Thank you and keep up the good work.
Hey Robert,
I’m not sure I fully understand your comment. When you say generate galleries from inside the page, do you mean with the visual page builder, or… The method I describe here is a little code intensive. However, you can make shortcodes based around any category – just replace “masonry” out for the category name on line 12 above. Maybe the next post in this series will be more like what you need? http://www.robertmeans.net/laying-bricks-masonry-js/ I like the grid in the other theme you bought. How do they achieve it there?
Anyway, not really sure I answered your question. I can give it another go if you provide additional information.
Nice Job.
I’ve got it working; somehow I need to change in the CSS code (from the earlier post) the part; margin-bottom: 0px; to -10px to remove the white lines under each photo.
Is that the way to do it? I tried also margin-top: 0px; but that seems not to work.
Now I’m thinking a lightbox popup would be nice for each photo. Would that be possible?
Hey Kurt,
I would have to look at your code, but if your CSS achieves what you want it to with regards to page display, it is correct! Divi uses magnific popup for its lightbox images. Adding additional functionality is pretty easy. You would have to modify the HTML for each image to contain a targetable class. So,
You then would need a little JS –
$(document).ready(function() { $('.mpop').magnificPopup({ type: 'image', closeOnContentClick: true, image: { verticalFit: true } }); });There is a lot you can do with Magnific Popup – the documentation is here.
I hope this helps out!
Metta,
Bob