Basics of Images in WordPress

Featured Images | WP Gallery | Thumbnails | Image Sizes

When running a website, especially modern online magazines, dynamic news websites or vivid blogs, it is all about visual context. While writing much text in an informative article, blog post or a journal entry it usually is a great idea to add some pictures to compliment the stories you are trying to tell, and this same concept applies to content that comes from fields such as technology, web development, business, and especially food and animals.

The WordPress CMS has been built with images in mind. Oftentimes websites heavily rely on images to create a comfortable (browsing and reading) experience that captures the attention of each visitor who visits your website. Let’s take a look at ways you can better understand WordPress images and how they work.

Difference between featured images and manually embedded images

When working with WordPress, you will often come across a term called Featured Image. A featured image is basically an image that will be featured across your posts, and more often than not displayed in multiple locations all at the same time. To better understand how featured images in WordPress work, take a look at the following information.

Featured images displayed as thumbnails in widgets

WordPress thumbnails

As you can see, there are two different posts on each side of the column, and both have their own unique images in WordPress. But, once you click on one of the posts, you are taken to the actual content page, where you once again meet with one of the images that was used in previous screenshot, which is what you also call a Featured Image.

Featured image displayed in full size on a post

featured image

The featured image may appear on your new posts pages, search pages, categories pages and much more, but will often only display in full size when a user clicks on the actual content that this image is used for. Whereas images in WordPress that are used inside of the post will usually compliment whatever you’re writing about at that particular paragraph.

You should fully be able to understand how featured and embeddable images work to understand how and why your website displays images in a certain way. Regarding the use of featured images in WordPress, please see the following article: How to use featured images in WordPress.

Those of you who are writing articles about travel trips, photo shoots and other similar types of activities, will want to look inside the WordPress Gallery feature which lets you create a collage of the photos you have to share, this way letting you to upload multiple photos of the same nature and throw them together in one convenient gallery. The way it works is, you first access the Add Media button in your New Posts page:

Create WordPress Gallery

You can see on the left-hand side that you have to click on the Create Gallery link, rather than Add Media. Once you do, you will be prompted with all the available images in your WordPress media gallery, you will usually want to use this feature right after you upload all the photos you want to put into a gallery, but that isn’t always necessary. (Just saves time!)

After you select your images, you can click the Create Gallery button at the right-hand side bottom of the screen, which will take you to the following screen, showing the images you have selected:

Edit WordPress Gallery

Here you can make any final adjustments and click the Insert Gallery button at which point WordPress will automatically output a shortcode similar to this inside of your post:

[gallery ids="1060,1061,1098,1110,1277"]

The individual numbers (IDs) being the photos you are going to be using for your gallery. At which point you can Preview your post and you will see all your gallery images beautifully aligned. The default WordPress gallery integration is flexible enough for beginners to get a taste of what WordPress can do for specific types of websites.

WordPress Gallery

What are thumbnails in WordPress?

Thumbnails are exactly what they ought to be. When you upload images in WordPress, you have the opportunity to adjust the size of this image, either by making it smaller, medium-sized, or a thumbnail. As you can see in the above screenshot displaying the demo of the WordPress Gallery within a post, all those square images are actually thumbnails, and full-sized images are displayed once you click on them individually.

How does WordPress handle image sizes / cropping?

By default, WordPress handles image sizes and/or cropping images on your behalf, which usually is based on the default image sizes in WordPress or the image dimensions which are defined by your WordPress theme. When you upload images through your WordPress dashboard, WordPress will automatically create several thumbnails (via cropping if necessary) out of the original image for use on your website in widgets, on posts, archives or else.

After you’ve switched your WordPress theme, the best way to make sure that all of your WordPress images are cropped and resized to your theme requirements, is by using a WordPress plugin called Regenerate Thumbnails. You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads. Please see the following article for more information: How to regenerate thumbnails after a theme change.

Where are images in WordPress stored?

All WordPress installations store uploaded images by default in the same folder, which is /wp-content/uploads/ and all uploads are then individually sorted by yearly and monthly upload dates, making it very easy for you to find images in case you ever need them.

Share this with your friends

12 Comments

  1. I have the MH Magazine theme and I need to know how to add photos in the grayed out photo placeholders next to my posts. I like the design, I just want to add photos. This tells me how to add photos to a post. Any easy suggestions?

  2. I am using the WP Gallery and have a grid of 4 images set up with photos appearing square or 1:1 ratio. I am trying to change out a photo and I have cropped it at 1:1 ratio and saved it.

    The problem is when I view the page it is a rectangle but when I view the page using the visual builder it appears correctly as a square. Can you tell what I’m doing wrong or how to fix this problem. Thanks so much.

    • Hi Tam, this could be related to the way your WordPress theme or Visual Builder is displaying images. It’s possible that there are pre-defined image ratios in your WordPress theme which are different to what you may have prepared. You could reach out to the developers of your WordPress theme for further analysis and support.

  3. Hi guys. Wondering, when a gallery is made, it always seems to justify left? Is there a way to get it centered?

    • Hi Shawn, it depends if you’re using the WordPress gallery, if the gallery is enhanced by plugins or even handled completely by a gallery plugin. You could check if there are settings to align the gallery differently and otherwise adjust it with CSS. You could find the appropriate CSS class by inspecting the gallery with your browser’s inspection tool.

  4. Hi MH Themes, I have your premium theme and want to have a collection of images of a particular product in the featured area of a review post, so the reader can click forward or back (on arrows to left and right) to view different images of the product without having to scroll down the article, is this possible?

Leave a Comment

Your email address will not be published.


*