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.
Any suggestions?
