Custom Image Sizes
Understand how to define and implement custom image sizes in WordPress themes using the add_image_size() function. Discover how to apply these sizes to various site areas like teacher portraits and banners. Explore using plugins to regenerate thumbnails for previously uploaded images and display optimized images on your site.
We'll cover the following...
WordPress image sizes
For this lesson, we will use teacher images in large dimensions so that the concept of custom sizes becomes clear. High resolution copies of the images we uploaded in the previous lesson are provided below for download:
Replace the teacher images (in the /assets/images folder) with the ones provided above and then update the featured images on the corresponding teacher posts. You can see that the images are out of proportion. In a moment, we will see how to fix the sizes.
The images we uploaded for the teachers are saved in the Uploads folder. This folder can be found in the wp_content folder besides the theme folder.
The Uploads folder has subfolders for years and months in which WordPress organizes the images. Within the folder for the current month, you will notice that WordPress has several copies of the images we have uploaded.
WordPress saves copies of the uploaded images in different resolutions. The default image sizes are:
Thumbnail (150px) ...