Home › Forums › General Issues › Suggestions on building a masonry photo and video gallery w/ lightbox using ACf?
I’m trying to make a portfolio gallery and none of the plugins or solutions that I can find online are working for me, so I’ve decided to make my own using ACF.
Here’s all the features I’m trying to hit.
– I want it to be masonry or justified responsive layout so that all the images are seamlessly presented.
– I want it to support autoplay silent looping videos inside the gallery (so that instead of having gifs with huge file size I can have short clips of my motion graphics work displayed as mp4s
– I’d like a nice minimal lightbox for when you click on images or videos, also the ability the scroll through those images usingswipe or clicking a button
– I’d also like the option to instead of a lightbox popping up, clicking on the video might act as a link to another page (though I would also be okay with having a description section that shows on lightbox popup that also acts as a hyperlink)
– I want it to be well optimized. That means that I would like the gallery pictures to be lower resolution thumbnails than the lightbox, and/or have lazy loading so that a page with a lot of images isn’t slow.
So far I’ve got about half of it working. I’ve got this ACF loop below working:
<section id="gallery-wrapper"> <?php // check if the repeater field has rows of data if( have_rows('card') ): // loop through the rows of data while ( have_rows('card') ) : the_row(); // display a sub field value ?> <div class="grid-item"> <?php $title = get_sub_field('card_title'); $childImage = get_sub_field('card_picture'); $file = get_sub_field('card_video'); $video = $file['url']; if( $childImage ): ?> <img src="<?php echo $childImage['url']; ?>"> <?php endif; ?> <?php if( $video ): ?> <video class="gallery-video" loop autoplay> <source src="<?php echo $video; ?>" type="video/mp4"> </video <?php endif; ?> </div> <?php endwhile; else : // no rows found endif; ?>
And I’ve got these gallery pieces presented in a responsive masonry layout using macy.js
But now I’m trying to get lightbox to work and I’m running into problems.
A lot of the plugins I find are either way too heavy and work only with images or galleries. I’ve also been looking at pure js solutions like Photoswipe but I can’t seem to understand how to implement them in wordpress.
Okay! I got lightbox working, using this post: https://support.advancedcustomfields.com/forums/topic/lightbox-images-in-custom-content-field/
and fancybox3 Very easy to set up etc. Now I just have to add in Lazy loading. Any suggestions on lightweight lazy loading apps that would fit well?
Okay I’m using this post now to set up my lazy loading:
But I’m running into some issues. Namely this:
Not sure what’s causing that problem.
Did you ever figure out how to do a masonry layout?
@westwords Yes. I used Macy.js which was just a much simpler implementation than the Desandro Masonry that’s more popular. http://macyjs.com/
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
Plugin boilerplates can do some of the heavy lifting during initial development. We look at four options to speed up your plugin creation. https://t.co/ZtMsdBxAHw— Advanced Custom Fields (@wp_acf) June 5, 2023
© 2023 Advanced Custom Fields.