In this tutorial we are going to see how to improve WordPress image galleries with very light plugins that will make them much more attractive and functional.
This tutorial is the second part of the tutorial, in which I explain step by step the basics of creating galleries in WordPress. But as I mentioned in that tutorial, there are several things that can be improved a lot.
One of the most important is the behavior that those galleries have when clicking on one of the images. Remember that we had the option of page of adjuncts, File, Archive media or any. I propose an even better alternative. Make use of a lightbox. And for that we need a plugin
Activate a lightbox for our gallery in WordPress
The plugin that I recommend in this case is , a super light plugin that takes up very little space and does not need any configuration. Just install and it works.
By the way, this is one of my plugins. recommended plugins directorywhich you can find in the .
And what does this plugin do? Well, basically, if we select “Media File” in the gallery settings, instead of sending the user to a new tab with only one image, what it does is create a lightbox effect where it darkens the entire browser screen and the image is displayed enlarged and centered:
We can also see a couple of navigation arrows on both sides (we can also use the keyboard arrows) and the closing “x” at the top right (we can also press the escape key). It goes without saying that it is 100% responsive and that the image adapts perfectly to any screen size.
With this we have greatly improved the usability of the gallery, since the user does not have to enter and exit each photo, or close tabs, or change pages, or have to go back in the browser. But sometimes we don’t want that behavior, nor do we want the user to see the larger image, but we just want to send it to another page. Well, let’s see how to do it.
Links to other pages from an image gallery
By default, clicking on an image in the gallery takes the user to a larger version of it. But what if we wanted to send the user to a page?
For example, let’s imagine that we have a gallery of product photos, and we want that when clicking on one of them, the user go to product page instead of seeing an enlarged photo. That would be much better, as it would help the purchase flow. Well, by default we can’t do it, but as always, there is a plugin that solves it.
It’s called and it’s a joy. It is also one of my recommended plugins in the directory, and not in vain, because it is very light, and super easy to use. We just install, activate, and there it is. When we create a gallery, or edit an existing one, we will see the following new configuration options:
As you can see, not only can we place a personalized link on each image, but we can also choose whether to open it in the same window or a new one, whether to cancel the possible effects that already existed (like the lightbox that we just described in the previous section)or even put in an additional CSS class, and then define it with CSS (more information about this in the ).
And with this we have achieved a gallery of images that when clicked goes to the URL that we want. Either from the web itself or externally. The uses are endless, imagination to power. From a gallery of affiliated products, in which we direct each image to its respective store, to a gallery of our eCommerce that we include in a post… whatever you want. Even links to other galleries.
So far we have seen a couple of plugins that add some functionality to the gallery. But what if we want to make it a little more attractive? Let’s go there!
Modify the style of WordPress image galleries
The smartest of you will have noticed that the first image in this tutorial is a gallery with “unequal” images. Instead of all being the same size square, we can play with various dimensions, to make it more attractive. For example like this:
We achieve that with the plugin (also in my directory)which is a standalone version of Jetpack’s Tiled Galleries module (more information in class).
As we already know, Jetpack is a “plugin of plugins” with a lot of features. Sometimes its use is justified, but in other cases, such as if we are only going to install it for this, it is not worth it. So, it is better to use this plugin (much lighter and faster) that will allow us to show more types of galleries in an easy and simple way.
Just by installing and activating the plugin, we will see that when creating or editing a gallery, we will have new settings:
Thus, we have three more gallery options. The first is that of “Tiled Mosaic”, which generates a gallery with unequal rectangles, like the one I show you above with the landscape images. But we can also opt for a mosaic of squares:
As you can see, unlike the previous one, in this case all the images have a square aspect ratio, although they have different dimensions.
And we can also opt for a circle gallery version:
Personally, the last option does not appeal to me so much, but for tastes, the colors. The fact is that we can give our galleries a point of originality with a plugin that barely affects the performance of the web.
Summary and conclusion
We have seen three light and useful plugins that allow us to change the behaviour Y appearance of the . All free, responsive and recommended in my directory. Do not hesitate to use them if you think they can help you in your case.
And you already know it. If you have any questions about WordPress image galleries, or need to modify them to suit your needs, you can send me a message through the “Support” tab at , and I will be happy to recommend the perfect plugin for it. See you in the next tutorial! 🙂
Facebook Comments
Disqus