29
Aug
2018
Add a gallery of images in WordPress
When using WordPress the typical process for adding images is to insert a single instance, a simple and effective scenario.
However, if more images are needed for a single post, or page, then the WordPress Gallery feature is the perfect solution. Users can upload multiple images, which WordPress puts into a gallery.
The images can still be added individually or there is the option to upload the whole gallery in one fell swoop. Adding the entire gallery of images is nothing more than a single click, but there are a number of options to set up before inserting.
Users have the option to define where the thumbnails link to, what order they are displayed in and how many columns they want across a post or page. Once the gallery is in place it’s a quick click of the Edit button and the settings can be modified as desired.
There is also the option to change the dimensions of thumbnails in the gallery to suit any post or page.
Table of Contents
Add Images
To start the gallery process the first step is to upload all the necessary images. Create a new post and click the Add Media icon that resides above the main text box. Now click on the Upload Files tab, locate all the necessary files, use Shift+arrow keys to select multiple images and press Choose to upload all the images.
Gallery Setting
Once all of the images have been successfully uploaded (larger files will take longer) click on the Create Gallery link on the left of the screen. Here, click the images you wish to include in the gallery, then click the Create a new gallery button in the bottom-right corner of the screen.
Image order
The image order of the gallery is determined by date and time, but you can arrange them however you see fit. To re-arrange the image order, simply click and hold on an image and then drag it around the other images. This is an intuitive way to shuffle your images into any order you wish. When done, click on Insert Gallery.
Randomize the order
If you wish to create a random order for your gallery images then check out the Gallery Settings in the column to the right. Here you will see options to link your gallery, arrange it in columns or arrange it in a random order. To randomize the order of your gallery, simply tick the box next to this last option.
Title and caption
Click on an image in your gallery to view all of the various individual image options. By default, the image title is the image name. To add a more SEO-friendly title simply add the desired text. This is the text that will be seen when the mouse hovers over the image. Adding a caption will add a styled depending on theme caption.
Link URL
By default, the Link To field will display the Media File option, which will redirect any clicks on the image to a new browser window displaying just the picture. You can change this to an Attachment Page, which will show the image in its own post within your blog’s theme, or select None to disable linking
Gallery Columns
Now repeat Step 5 to change each image title and more, and then head to the Gallery column’s drop-down list which defines how many columns (effectively images) will appear horizontally across the page before moving onto another line. Simply select 1-9 from the drop-down list and click Insert gallery.
View Gallery
The gallery will appear in the post entry area, where you will see a preview of the arrangement of the images. To get an idea of how the gallery will appear when the post is published, click Preview. This will open up a new window and show you how the gallery will look within your blog’s theme.
Edit Gallary
Edit the gallery by clicking on one of the images to highlight and then display two icons in the top-left corner. The X icon on the right will delete the gallery; the pencil icon on the left will open the Edit Gallery screen used earlier, where the Update Gallery button will save any changes you make.
A Perfect Fit
How the gallery displays are determined by the size of the thumbnail images, the width of the post body and number of columns. If the width of a post, or page, is 600 pixels the thumbnail width and number of columns need to match. For example, four columns multiplied by a thumbnail width of 140px equals 560px, plus padding and margin.
Thumbnail dimensions
The gallery displays all images as thumbnails with the default size determined by the current theme. To modify the thumbnail dimensions head to Settings in the left column and select Media. Add the Width and Height dimensions in Thumbnail size and make sure the Crop thumbnails the checkbox is selected.
Shortcode
Once a gallery has been created, WordPress inserts the code to display the images. Alternatively, users can insert the gallery into any post or page by using the shortcode. To insert, open post or page, switch to HTML and add. To keep the same gallery styling as the initial gallery switch to HTML in the post and copy the code.
Building E-Commerce Solutions with WooCommerce
This book has been written for everyone who wants to learn how to expand an existing WordPress website with e-commerce functions using the WooCommerce plugin. Download Free eBook
