How to Implement Responsive Images in WordPress

To implement responsive images with PHP for WordPress, you need to do two things: upload multiple image sizes and display them with the appropriate HTML attributes.

To upload multiple image sizes, you can use the WordPress function add_image_size(), which allows you to register new image sizes for your theme. You can use this function in your theme’s functions.php file or in a plugin. For example, if you want to create three image sizes: small (300px wide), medium (600px wide), and large (1200px wide), you can use the following code:

// Add custom image sizes
function my_theme_add_image_sizes() {
  add_image_size( 'small', 300 ); // 300 pixels wide (and unlimited height)
  add_image_size( 'medium', 600 ); // 600 pixels wide (and unlimited height)
  add_image_size( 'large', 1200 ); // 1200 pixels wide (and unlimited height)
}
add_action( 'after_setup_theme', 'my_theme_add_image_sizes' );

This code will create three new image sizes with the names ‘small’, ‘medium’, and ‘large’. You can use any names you want, but make sure they are unique and descriptive. You can also specify the height of the images, or leave it blank for unlimited height. You can also set a boolean value for cropping the images, or leave it as false for no cropping.

Note that this function will only apply to new images that you upload after adding this code. If you want to apply it to existing images, you need to regenerate the thumbnails using a plugin like Regenerate Thumbnails.

To display the responsive images, you need to use the WordPress function wp_get_attachment_image(), which returns an HTML <img> element with the srcset and sizes attributes. You can use this function in your theme’s template files or in a plugin. For example, if you want to display an image with the ID of 123, you can use the following code:

// Display responsive image
echo wp_get_attachment_image( 123, 'medium' );

This code will display the image with the ID of 123 and the default size of ‘medium’. It will also generate the srcset attribute with the available image sizes and their widths, and the sizes attribute with the default value of (max-width: { {image-width}}px) 100vw, { {image-width}}px. You can customize these attributes by using filters like wp_calculate_image_srcset and wp_calculate_image_sizes. You can learn more about these filters from Responsive Images | Common APIs Handbook – WordPress Developer Resources.

I hope this helps you implement responsive images with PHP for WordPress. If you have any other questions, feel free to ask me.

ABOUT THE AUTHOR

David Halmai

Affiliate marketer with 25 years marketing online. Founder of NicheMoney.co, NicheLightning.com and a host of other businesses. I help people turn their side hustle into a full time income with SEO, email marketing and video marketing techniques. My hobbies are cooking, reading, blogging and hiking.

Follow my posts on Twitter

Keep Reading

Comments are closed.