• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / How To Create A WordPress Gallery For Your Images

How To Create A WordPress Gallery For Your Images

Posted: September 14, 2018 by Claire Brotherton
4 Comments

Astra WordPress Image Gallery, full width

In my last post, I wrote about adding images to your WordPress posts or pages.

Sometimes though, you might want to show a collection of related images in rows.

The way to do that is through the WordPress Gallery feature.

Adding a gallery

Start a new post or page (Posts > Add New or Pages > Add New).

Insert the cursor where you want to place your gallery.

Press the Add Media button.

Add Media

On the left, select the link Create Gallery.

Add Media screen

Create your image gallery

If you need to upload images for your gallery, select the Upload Files tab and upload them. Find out more about uploading images to posts.

Otherwise, select the images from your Media Library that you want to add to the gallery by clicking on them. (If you use the keyboard to navigate, use the Tab key to choose an image to use and the Enter key to select it for addition.)

Every image you choose will show a tick, and you can see the number you’ve chosen and thumbnails at the bottom of the window.

6 images selected to create a WordPress gallery
6 images selected to create a WordPress gallery

Remember, for each image you choose it’s good practice to add alt text.

Use the Create a new gallery button to continue.

Edit your image gallery

This is the penultimate step before you add your gallery. Here you can choose how will show on your post or page.

The Edit Gallery window

Left hand side links

Cancel gallery: use this link if you’ve changed your mind!

Add to Gallery: Select another image or images to add. Use the Add to gallery button when you’re done.

The Add to Gallery window, with 2 new images selected to add
The Add to Gallery window, with 2 new images selected to add

Main window options

Change the order of your gallery, either by using drag and drop to rearrange items or the Reverse order button.

Add captions to your images by writing them in the Caption this image areas, assuming they don’t already have them.

Remove images. To remove an image, click the x on the image.

Gallery settings

Link To: Select what the images link to.

You could choose Attachment Page (the default), Media File or None. You can’t have your own link of choice.

If you choose Attachment Page, your users will see an attachment page like this:

An attachment page showing the image title, thumbnail and description
An attachment page showing the image title, thumbnail and description

If you choose Media File, your users will see the full size image in their browser. (If the image is especially big, they might see a magnifying glasss with a plus which means they can zoom in even more.)

A full size image shown in the browser
A full size image shown in the browser

Columns: How many columns you want to display your images in. The default is 3, but you can have 1-9 columns.

Random order: Check this box if you want the order mixed up.

Size: Thumbnail is pre-selected but you can also have Medium, Large or Full Size. For best results choose Thumbnail or Medium.

Inserting a gallery

When you’re done, use the Insert gallery button to insert your gallery. You’ll see something like this:

An image gallery of 8 images in the post editor
An image gallery of 8 images in the post editor

Publish your post and View post (or preview it) and you’ll see what the gallery looks like on your site.

A WordPress image gallery in Twenty Seventeen theme
A WordPress image gallery in Twenty Seventeen theme

Editing an existing gallery

To change something in your gallery, click anywhere on the gallery and a blue border and some buttons will appear.

Use the Edit button – the pencil icon – to go back to the Edit Gallery screen.

Edit or delete a gallery buttons
Edit or delete a gallery buttons

Make the changes you want to make.

I decided to remove the captions in my gallery, add one more image and change the number of columns to 3.

Use the Update gallery button to continue.

Edit Gallery and Update Gallery

Remember to save or update your post to finish.

Galleries and different themes

Your choice of WordPress theme will affect your gallery display.

For example, the same thumbnail gallery in Astra theme looks different from that using Twenty Seventeen theme.

Image gallery in Twenty Seventeen theme with sidebar
Image gallery in Twenty Seventeen theme with sidebar

 

In Astra theme, you can configure the sidebar to not show at all, so the same gallery displays to the full width of the page.

Astra WordPress Image Gallery, full width
Astra WordPress Image Gallery, full width

Every theme displays galleries in its own way, so you will need to experiment a little to find out the settings that work best with your theme.

Deleting a gallery

In the post editor, click on the gallery, then the x button.

The gallery is gone!

If you made a mistake, use the Undo button or click CTRL+Z on Windows or CMD+Z if you’re using a Mac.

Reusing a gallery on another post or page

This is not as simple to do as you might think!

One way to do it is:

Click on the Text tab of the editor.

Copy a WordPress gallerySearch for “gallery” on the page and copy the code in square brackets – this is called a shortcode.

Mine looks like this – yours will be different.

[gallery size="medium" ids="76,87,79,82,80,83,88,84,81" orderby="rand"]

Paste this code into a new post in the Text tab.

Paste a WordPress gallery

Go back to the Visual tab and you should see your gallery in the post.

Save or update the post and you’re golden!

Adding a lightbox to a gallery

If you use the Media File setting and click on an image in your gallery, it will load the full size image.

An image linked to its Media File shows the full size image on click
An image linked to its Media File shows the full size image on click

But to see another image full size, you have to use the Back button in your browser and do the same for the next image, and the next…

That’s where a lightbox can come in handy. A lightbox can display a larger version of your images within the same browser window. This lets you move to the next image without having to use the browser’s Back button.

One lightbox plugin you can try is FooBox Image Lightbox.

Welcome to FooBox!

FooBox works right out of the box with WordPress galleries.

But make sure that you have set your gallery images to link to Media File, or it won’t work!

When you have FooBox active, if you click on a gallery image, it will pop up in a lightbox.

FooBox lightbox

Use the arrows (or left/right arrow keys) to navigate forward and back.

Alt text and captions show as an overlay on each image. If you have both, the caption is above the alt text.

As you transition between images, if they are different sizes the screen animates to grow or shrink to the new size.

To leave the lightbox, click outwith the lightbox area or use the Esc key.

More gallery plugins

There are many, many more plugins to help you create a stunning WordPress gallery.

Here’s a round up of some of the best:

8 Best WordPress Photo Gallery Plugins (Compared With Examples)

You can also check out my post on free image collage plugins.

What have you found best for creating a WordPress image gallery? Let me know in the comments.

Related

Category: WordPress Tags: gallery, images

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Kalpana says

    September 15, 2018 at 4:47 am

    Cool collection of plugins..very helpful.
    Thanks for the sharing.

    Reply
  2. Samuel says

    November 6, 2018 at 6:35 pm

    Never knew about Foobox before, it’s going to solve my problems. Thank you

    Reply
    • Claire Brotherton says

      November 12, 2018 at 10:06 am

      Thanks Samuel, glad my post helped!

      Reply
  3. The TShirt Guru says

    November 21, 2023 at 4:40 pm

    Good info, but didn’t find the answer I was hoping for…

    I have a photo gallery in my WP Astra site and it’s flush against left and right borders (full width)… how do i specify how wide I want my gallery?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map