How to Do Everything with WordPress Photos, Galleries and Media

August 12, 2019 12:26pm

WordPress has some nifty tools available for adding photos, aligning them, crafting galleries and more. Let’s walk through them all!

Jump to: How to add an Image | How to add a Gallery | Editing Images and Galleries | Featured Images

To get started, create a new Page, Post or custom post type and click Add Media

You’ll see something like this:

How to Upload and Insert a Photo into a WordPress Post

From here, you can simply drag and drop any image from your computer to upload. The popover will turn blue as you drag a file onto it:

Once the image has finished uploading, it will have a blue checkmark on it and additional options will appear to the right side of the screen.

Here’s a rundown of those options:

Alt Text is the most essential of all of these fields. It is used by screen readers so that visually impaired users still know what’s going on with the image and the context it has in the post. A good alt text for the following image would be a man kickflipping a skateboard, the board in the air halfway rotated while his feet wait for the trick to complete before he lands however man doing a skateboard trick would be sufficient as well.

The Title is automatically added from the filename, and WordPress will use this as the Alt Text if you don’t explicitly complete that field. But you should, because it’s unlikely the filename will be an adequate slice of alt text.

Caption can be used to further describe the image or give it some additional context. The caption will be displayed on your site as well, like the “Nothing says skateboarding like red shoes” text below this image:

The Description is typically only shown on what’s called an Attachment page. Attachment pages are pages WordPress generates specifically to show the image on its own. If you’re a client of mine, I remove these pages and redirect them back to the original post where the image was uploaded, which is good for SEO because if you upload 1000 images to your site, you’ll have 1000 pages that are little more than an image with perhaps a short description. This is called “thin content” and Google doesn’t like it, plus in most cases it’s unlikely you’re intending to create this page anyway.

You can also Copy Link should you need the actual URL to the image itself.

That Smush area isn’t a default of WordPress. It’s part of the very handy Smush plugin by WPMU Dev. This plugin automatically reduces your images’ file sizes, which is important to Google and your users, and should therefor also be important to you!

Finally, we have the ability to control how the image will be displayed when we insert it into our post:

Alignment determines whether the image will float to the left or right of your text, be centered on the page (with no text around it) or if set to None the image will typically just sit on the page, any text entered after it without pressing enter to start a new line first will start at the bottom of the image and continue on however it fits.

Note that this alignment is not set by WordPress but by whatever theme you use. If I built your site, the images will look good. With other themes, results may vary.

Link to determines if the image will have a link associated with it (ie, if you can click on the image to do something or go somewhere.)

None means no link on the image.

Media file will make the link open up the image all by itself. Sometimes this is useful, but in most cases it feels strange to users when this happens.

Attachment page will link to the Attachment page, as explained above. In my themes, this will typically just redirect back to the page you uploaded the image to, so you typically don’t want this.

Custom URL is more or less the only really useful one, other than “None.” This allows you to link the image to any other page on the Internet you’d like.

Size allows you to determine how big the image should be. The actual display size of the image will be, in most cases, and always with my themes, limited to how big the area the image is going into. So if the content area on your site is 750px wide, and you insert a 1500px wide image, it will still only display at 750px wide. Google won’t like this. You should try and choose the size closest to what it will actually be displayed at. If you intend to align an image right or left, you could choose something half or less the size of your content area. If you intend to center the image, whatever size is closest to the width of your content area would be best.

The sizes available depend on how large the image was when you uploaded it (WordPress will automatically make all of the sizes your theme tells it to, but it won’t make sizes that are larger than the original, only smaller.) You can control three of these sizes via Settings > Media. Here’s what you’ll see on that screen:

Whatever you enter on this page will determine the Thumbnail, Medium and Large image sizes, and these will be available to you in the dropdown assuming you upload an image larger than all three of those sizes. In general, the best practice is to upload an image only at the size you need. This will keep your database smaller, make Google happier, and likely cost you less with your host than if you uploaded every image at 3000 x 1800px every single time.

When you’ve completed the fields you’d like to and chose your Attachment Display Settings, click the blue Insert into post button and the image will be placed into the page wherever your cursor was when you clicked Add Media.

How to Create a Gallery in WordPress

This section assumes you’ve read through the above, at least the part about how to upload an image.

Once you’ve got a few images uploaded, you can hold Control (on Windows) or Command (on Mac) to click on multiple images. Once you’ve chosen the images you want to add to the gallery, and they all have little blue or grey checkboxes next to them…

…you can click Create Gallery on the left.

Then click Create a new gallery, the blue button near the bottom right of the screen at this point.

You’ll get this new screen:

You can drag and drop the images to reorder them:

Once again we have a few options to set with the Gallery, similar to how we did with individual images in the first section of this post.

Link to allows you to choose where each thumbnail in the gallery will point.

Read about Attachment Pages above.

If you choose Media File, in many themes that will simply open up the image, and the user will have to click the back button to return to the gallery. In my themes, at least those built since 2016, it will open the image up, along with any associated caption, in what’s often called a lightbox, modal or popup. Users can then click through to see each image in the gallery in a larger view.

Or you can choose None, which will allow you to create a gallery of images that are not clickable.

You can choose how many Columns the gallery will have. Depending on the size you have in Settings > Media for Thumbnails, choosing between 3 – 5 is probably best, if you want to have a bunch of thumbnails that when clicked on go to one of either the Attachment page or Media file. If you don’t want your thumbnails to have links, you could choose 1 or 2 and they should show at a pretty good size to just create a gallery that people can look at but not interact with.

Random Order will just ignore the order you uploaded the images and / or drag n’ dropped them, and show them randomly.

Size allows you to choose, much like when inserting a single image, the size of the images as they’ll be displayed before they’re clicked on in any way.

When you have your settings all configured, click Insert gallery, and it will be placed in the area where your cursor was when you clicked Add Media.

Editing Images and Galleries in WordPress

If you hover over either a single image or a gallery, in the WP editor, you’ll see additional options:

For single images, the icons represent different alignments, the pencil allows you to edit the size and more of the image and the X will remove the image. Galleries only have the option to edit or remove the image.

What is the Featured Image?

Most themes will have this box for Posts, and sometimes Pages and other post types, too:

Themes can do many different things with this image. Sometimes it will be displayed at the top of the page, sometimes not on the page at all. Other times it will be used to set a thumbnail on pages that display lots of your posts. In my themes, it will even be used as the image that is shown on Facebook when sharing there, by default. Since every theme can do whatever it wants with this image, you’ll just have to experiment to see what it does with yours!

Up Next: How to Send a Mailchimp Newsletter