Jetpack tiled gallery

Jetpack Tiled Galleries is an EXCELLENT gallery creator. I’ve tried pretty much every gallery creator out there, and each has some failing that makes it hard to use. Many of them require one to create galleries in a separate interface, and then use a mechanism to drop the pre-created gallery into a page or post. While that mode has its advantages, I find it cumbersome. Its far superior to be able to add images to a page/post normally and have them auto-magically turned into a visually pleasing gallery. And Jetpack does this very well, especially the mode that I quite love, “tiles” which everyone else calls “masonry”, is implemented very nicely, and works perfectly out the box without having to muck around with 20 settings.

Jetpack lightbox

Jetpack Carousel is a decent carousel style lightbox. The great thing is that it works seamlessly with tiled galleries.

However its a wee bit sucky, or at least not suitable for my needs. It shows all kind of needless data (comment form, metadata, link to larger size) along with the photo that cannot be turned off with a few clicks. So here are some customization tricks.

There are other masonry galleries that dont have a decent responsive lightbox, and then there are nice responsive lightboxes which dont have masonry style galleries. Case in point is Elegant Themes Divi framework, and its a real shame.

CSS customizations

I looked around and found this excellent tutorial How to Remove the Comment Form from the Jetpack Carousel Screen. I started with the great stuff given in that article, and then added my own special sauce on top to (hopefully) get a nicer result.

Prettifying the close icon

/* Move close icon to the right. */
.jp-carousel-transitions .jp-carousel-close-hint {
position: fixed;
text-align: right;
right: 40px;
width: 100px;
}

/* increase the size of the icon */
.jp-carousel-close-hint span
{
font-size: 40px!important
}

Prettifying the caption

/* Move caption to the center & increase the font size */
.jp-carousel-info h2 {
text-align: center !important;
font-size: 30px!important
}

/* Move the caption a bit higher than the default since on a mobile screen it gets hidden if the browser has a lower bar */
@media only screen and (max-width: 760px)
{
.jp-carousel-photo-info {
bottom: 100px!important
}
}

Getting rid of clutter

/* Dont display any meta info */
.jp-carousel-image-meta {
display: none;
}

/* Hide all comment stuff */
.jp-carousel-comment-form-container {
display: none !important;
}

#jp-carousel-comments-loading {
display: none !important;
}

.jp-carousel-comments {
display: none !important;
}

Result is aN uncluttered viewing experience