Home Forums General Issues Suggestions on building a masonry photo and video gallery w/ lightbox using ACf?


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">
    // 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">
                $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">
                <?php endif; ?>
            </div> <?php
    else :
        // no rows found

    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.

    Any suggestions?

  • Okay! I got lightbox working, using this post:

    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:
    console logs and error logs

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Suggestions on building a masonry photo and video gallery w/ lightbox using ACf?’ is closed to new replies.