Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress Plugins
Code

How to Create a WordPress Gallery Using the Justified Image Grid Plugin

by
Difficulty:BeginnerLength:MediumLanguages:

Displaying photos and videos on your website is essential for your website's success. 

Photos and videos on a website can increase engagement by over 65% and encourage visitors to spend a longer period of time on your site. By increasing engagement and keeping your target audience on your website, you will have a much better chance of making a purchase or having visitors sign up for your newsletters. Not only that, but having images on your website will also help boost your site's SEO ranking, which will increase your daily traffic.

Simply uploading photos in WordPress and putting them on your pages and posts is not enough, however. You need a professional gallery plugin to display your images in a beautiful and SEO-optimized way.

There are many WordPress gallery plugins on the market, but one stands out above them all: the Justified Image Grid plugin. Justified Image Grid is a powerful and responsive plugin that is designed to showcase your images in the most attractive way possible. 

In this tutorial, I'll show you how to create a gallery with the Justified Image Grid plugin for WordPress.

Creating a Gallery

Once you have installed the Justified Image Grid plugin, you can immediately begin creating your gallery. 

To start creating your gallery, go to a new or existing post or page. From the visual editor, click the Justified Image Grid Shortcode Editor icon. This opens up the plugin's advanced editor where you can create and customize every aspect of the gallery. 

To create a gallery, first select one of the presets to use as a starting point. You can choose either the global settings or one of the 20 presets that the plugin comes with.

(If you want to edit these presets, go to General Settings > Override the Plugin's Settings > Preset.)

Once you have selected your preset, go to the bottom of the editor and click the Create Shortcode button. A shortcode for the gallery you have selected will appear. Exit the shortcode editor and you'll now see that the shortcode has been added to your visual WordPress editor for your page or post. 

Justified Image Grid Shortcode Editor

Now it is time to add the images to the gallery! Above your editor, click the Add Media button. This will open up your add media menu. 

From there, click the left-hand drop-down menu and choose the Upload to this page option. 

Then either select the images that you want to add to your gallery or upload them. Next, exit out of the add media menu without clicking the Insert Into Page button. You don't have to insert the image to your page directly, because it will be displayed automatically in the Justified Image Grid plugin gallery.

Now you can update your page and preview the changes you have made to see a beautiful-looking image gallery on the page. 

That's it! A very simple process for creating a stunning gallery. You can see this process in action in the video below. 

 

Next, we are going to look at how you can customize the gallery to suit the theme of your website.  

Editing the Gallery

While the default presets and general settings offered by the plugin might suit your specific design and functionality needs, you'll usually need to make some edits and tweaks. 

Fortunately, with this powerhouse plugin, the options for customizing your gallery are endless!

As mentioned, you can either edit the general settings or change the presets offered by the plugin. We'll change the general settings.

To do this, go to the settings sidebar on the left-hand side of your WordPress dashboard and click Justified Image Grid.

To customize our gallery, we are going to adjust the overlay and lightboxes. All of these settings have their own specific category at the top of the plugin's settings page. 

Customizing the Lightbox

We are going to start by adjusting the lightboxes. A lightbox displays images and videos by filling the screen and dimming out the rest of the web page when the image or video is clicked on. 

Our first option is to choose the type of lightbox. Here are a few of the options that you have for lightboxes.

ColorBox

Color Box Lightbox

Magnific Popup

Magnific Popup Lightbox

PhotoSwipe 4

PhotoSwipe 4 Lightbox

I'll choose the Magnific Popup option for my gallery. Since we want the same lightbox to appear on the mobile website, I'll click the Same as desktop option. 

Customize the Lightbox Title Text

The other setting that we are going to change for our lightbox is the text. Since we would like the image's title to show up in the lightbox, we are going to choose Title for the link title setting. 

Customize the Overlay Effects

The next setting that we are going to change is the overlay effects.

The overlay effects that we are going to change are the overlay opacity and the overlay color settings, which are under the Overlay appearance and style settings. 

Overlay Opacity  Color Justified Image Grid

I am going to change the opacity to 0.4 as I find the overlay a bit too light. I really want the user to know that they are hovering over an image.

Next, I am going to change the color of the overlay to grey. Currently, it is set to black with the #000 hex code. To change it to grey, I'll add the hex code #808080.

Once you have made all of these changes, click the blue Save Changes button at the bottom right-hand corner of the dashboard, and your changes will be saved as part of the general settings. 

To add this gallery with the changes you have made, go back to your page or post editor, and click the Justified Image shortcode editor. Under Preset, make sure the Global settings option is selected and click Create shortcode

Add this shortcode to your page or post, and your customized gallery will be displayed!

Display Global Settings Grid Justified Image Grid

In this article, I only went over a few of the settings that you can change for your grids. The Justified Image Grid settings are quite extensive and allow for a much deeper level of control. We have only scratched the surface of the customization that this plugin allows! 

For more information on what other settings can be adjusted, check out the Justified Image Grid manual.

Creating Presets

If you want to have different styles of gallery on your site, you can create a preset. 

Creating your own preset is a simple process. Access the Justified Image Gallery settings by going to the Justified Image Grid settings from the WordPress admin menu. 

From there, adjust the settings of the grid however you see fit. Once you've got the grid looking the way you want, find the Presets section at the top of the settings page. 

Enter a name for the preset you would like to create and click the Create new preset button. Now you can load the preset for any post or page with the shortcode editor.  

Create new gallery preset

Conclusion

The images that you choose to put on your website are a big contributor to the success of your website. With the use of the Justified Image Grid plugin, you will be able to display your images with a perfectly balanced photo grid that captures your audience's attention. 

By following this tutorial, you'll be able to create a stunning image gallery that can be customized to match your website's theme. 

Want to check out other gallery plugins for WordPress? CodeCanyon has many beautiful gallery, carousel, slider, and media plugins—there's sure to be one that is the right plugin for you.

Also, if you want to use custom plugins but you're not comfortable tinkering with servers and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.