A Simplified Guide To Display WordPress Images In Rows and Columns!
Here on Beautiful Themes, we’ve talked time and time again the importance of good presentation. When your blogs are arranged in a well-structured manner, with accompanying media, users tend to enjoy reading it more. You can’t just expect to randomly place jumbled images wherever and expect them to impress any viewer. Thus it is important to learn how to preview images in a WordPress image grid or a grid gallery. When your images are structured in rows and columns, their presentation factor rises up by quite a huge margin.
It’s necessary to preview a large collection of images at times. When you’re either showing an album of images to accompany your blogs or advertising your portfolio of images, using Grids to show WordPress photos can be quite beneficial. For one it provides a collection point for your viewers to check out all the important photos that you want to highlight. Moreover, the grid format allows you to place newer images whenever necessary without messing up the content of blogs. This is even more useful if you are using a page to show images to users for some defined content.
Thus, Beautiful Themes presents you this guide on using WordPress grid gallery and grid gallery plugins to display images in rows and columns.
1. Displaying WordPress Image Grid using Native WordPress Gallery.
By itself, WordPress contains a default feature to help you create a functional gallery which can be displayed on posts and pages. This feature is linked with the Media gallery WordPress itself provides. Using the media gallery, you can build selective galleries with custom dimensions. This requires users to insert images and videos uploaded onto WordPress’s gallery.
In order to create and insert a gallery you need to follow this procedure:
First, open the post or the page you want to insert the Photo grid onto. Then Click on Add Media button on the top of the editor’s toolbar. On the left column, click on the option named Create Gallery.
Now you can either upload new images or use pre-uploaded images on your WordPress gallery to create a custom WordPress photo grid. Simply click on all the photos u want to be featured on the Gallery and select on Create a New gallery button on the bottom right side of the Window.
In the window that opens thereafter, you can edit the order and dimensions of photos featured in the gallery. Drag and drop the photos onto their respective positions to reorder the photos and use the Columns field on the left to select how many columns you want in your grid.
Choosing the Random order tick box will reorder your images a random order and the Size field will allow you to choose the size of the images shown on the photo grid.
Once you are done, click on Insert gallery to place the gallery onto your post/page. Additionally, you can click on the Gallery box again to add new images, reorder them and delete images as well.
2. Displaying WordPress Image grid using Plugins
You are also free to use dedicated third-party WordPress plugins to preview WordPress image grids. These plugins add features and functions that are extremely lacking in WordPress’s image gallery. This includes reusing pre-made galleries, selecting Grid layouts, controlling spacing and padding and better reordering features.
We have an amazing list of the best WordPress Photo Gallery plugins available on the market which we highly recommend our readers check out. Take a look at this list to see which Plugin would fit your website the best using this article.
For this demonstration, we’ll be using the NextGen Gallery plugin. Do remember that you can take the reference of the above-linked article to check out how these plugins work. Similarly, the working process of these plugins can be quite similar and with the help of this guide and their documentation, you’ll be ready to enable your WordPress Image grid without any difficulty.
NextGen Gallery plugin:
Before we start, you’ll be required to install the NextGen Gallery Plugin on your WordPress website. To learn about this process, you can check out this blog.
Creating a NextGen Gallery and adding images to them
Open NextGen Gallery’s plugin page by clicking on the Gallery listing on your WordPress Admin Dashboard. Click on the Add Gallery/Image feature to start creating a new gallery of your own.
You will be provided with three different options to create your new gallery. You can either Upload images yourself, use stored images in your Media library or Import entire folders from your WordPress installation to create a gallery. When you use the either of the features, you can set create an entirely new gallery or add images to an older one.
Use the Upload images section to directly add files from your computer by clicking on the Add files button. Alternatively, you can drag the photos directly into the current window to select the images as well.
Once you are done, click on Start Upload and a progress will be shown to you notifying you of the upload process.
In order to add more images to an already existing album, simply click on the Gallery name field to show a drop-down menu and select the required gallery.
Change Gallery options and Sort images
To change your gallery’s functionality and options, click on the Manage galleries listing on the left to open the Manage page. Then, choose your respective gallery given on the list table.
In this new field, click on Gallery settings to manage the gallery’s settings. These options allow you to do the following activities:
- Change Gallery title
- Add a Description for it
- Link the gallery to various website pages
- Change preview images
Once your settings are changed, Click on Save Changes to apply the new settings.
Next, let’s take a look at the Gallery images and its sorting.
If your newly uploaded images do not show up on your gallery, click on Scan Folder for new images to update your gallery.
You can also add custom tags as well as Alt text and Description for each gallery listing as well. Under each listing’s image, there are multiple options that can help you customize the image’s gallery thumbnail. Using these options you can Edit the thumbnail entirely, rotate it, publish it as a separate image, delete as well as recover it from the backup. Again, once you make your changes, click on Save Changes to save them.
In order to change the sorting of the gallery, click on Sort gallery on the actions bar. In the sorting page, you can use the list of pre-sort options to easily sort your images based on various file details. You can also manually drag and drop the images to reorder them as necessary. Once you’ve sorted the images in an acceptable order, click on Update Sort Order on the top left to set your Gallery’s sorting.
Inserting NextGen Galleries in posts and pages:
You can insert this gallery onto any of your pages or posts by clicking on the Add Gallery button on the editor toolbar. First, Click on the Add gallery button to open NextGen Gallery’s UI.
Now, Click on the Select a Gallery field to see a drop-down list of all your galleries. Then, Click on the gallery you want to preview. Do remember that you can insert more than one gallery at once by clicking another Gallery field and choosing a different gallery. You are also free to insert images using entire albums, random images, tags, recent images and more by clicking on the drop-down menu above the select a gallery field. By default, this field should be set on Galleries.
Next change the layout of your Image gallery. By default you can choose between 4 options:
- Thumbnails
- Slideshow
- Imagebrowser
- TagCloud
You can choose which images to exclude by clicking on Exclude images section on the top bar. Tick on the exclude tickbox to remove an image from the Gallery view.
Clicking on Customize Display settings lets you change various gallery settings such as Number of columns, Showing slideshow links and text.
Once you are done customing your gallery, click on Insert Gallery to place the gallery on your post.
The gallery box should be displayed on your post. Additionally, you can edit or remove it at any time by clicking on the Edit or Remove button on the Gallery box.
By using NextGen Gallery, the final product for your Gallery should look something like this:
Concluding:
Thus by using the WordPress Photo grids, you can display amazing images in an easy to view format. Feel free to use this images for your content portfolios as well as various other image collections. Creating albums is a completely viable option using Gallery views as well and it isn’t just limited to just that.
Similarly, Galleries aren’t the only means of showing cool media content to your readers. You can do more with your WordPress media content, some of which you can learn about here:
- How to Add an Image to the WordPress sidebar
- Beginner’s guide to change the WordPress sidebar into a slideshow
- How to add a creative WordPress Photo gallery
