Photo gallery in Post as Masonry Grid and Lightbox

Activello
1

Hi,

You guys helped me so much before, but still having issues on my blog with the masonry photo gallery with lightbox view in posts. Here’s my website: http://blog.roeyyohaiphotography.com/. How can I create masonry look like the photo gallery in your demo: https://colorlib.com/activello/template-featured-image-vertical/, but with images of the same width in three columns?
They have a lightbox viewing of each image that I would also like to use on my site as well.

Please let me know. Tried several different plugins with no luck.

Thanks,
Yasma

2

Hi Yasma,

I hope you are well today and thank you for your question.

You can achieve this using Jetpack plugin and its Tiled Galleries functionality Tiled Gallery Block

Best Regards,
Movin

3

Hi Movin,
You are by far the most helpful person I’ve talked to on here! The lightbox feature looks great, but the grid is now aligned to the left, no matter if I edit the alignment of the blog post. Would be great if it was the full width of the screen, probably matching the width of the featured image at the top of the post. Also, the plugin doesn’t seem to work for mobil devices. Thanks for all your help. So close to being finished!
Best,
Yasma

4

Hi Movin,

Actually I found out how to make the content fit whichever width I want on this forum: https://colorlibsupport.com/t/how-to-make-tiled-gallery-jet-pack-full-width-for-activello-theme/

And if I turn off enhance mobile feature, then it works fine on phones.

My boss is asking if I can limit the number of images to 4 IMAGES MAX across for the mosaic format.

Also is there a way to turn off comments in the LIGHTBOX view.

And last, how can I make my header only appear on my main page.

Really could not have created the blog without your help. Thank you so much for all your tips and codes.

Best,
Yasma

5

Any ideas about the comments on the Lightbox view?

Or how to make the header only appear on the main page?

Can I make the photo mosaic grid only have 4 images max across?

Please let me know. Any help would be greatly appreciated.

Thanks,
Yasma

6

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.jp-carousel-left-column-wrapper {
    display: none!Important;
}

.jp-carousel-image-meta {
    display: none!Important;
}

I hope this helps :slight_smile:

Best Regards,
Support

7

Awesome! That code totally works to get rid of the comments on the lightbox.

Also found this code to make the header only on the front page if anyone needs it in the future. (inserted on the theme header.php file after the navigation menu)

<?php if (is_home()): ?>
    <!-- ... -->
<?php endif; ?>

Still need a code to make the photo mosaic grid only have 4 images max across… Not sure if this is possible.

Thanks so so so much for all the custom codes!!!

-Yasma

8

Hi there,
Thanks for keeping in touch with us.

These grids were made to have varying numbers of images per row along with images of varying size. It’s simply the nature of masonry/mosaic grids. With that said, the algorithm used to create this will not allow for one set amount of images per row without major distortion in terms of spacing etc.

Sorry about that.

Best Regards,
Support