With the launch of WordPress 4.4 responsive images were added to the core, enabling developers to introduce responsive image functionality into their themes with greater ease. However, you still need to apply the appropriate CSS rules to those images so that they can scale to their maximum width, relative to their parent containers. This can be achieved in various ways using specific selectors, for example you could target all images by writing something like:

But this is far from ideal, as you may not want to apply this rule to all images within a given container. A better approach would be to define this behaviour in a CSS class and then add it to the images in question.

The Bootstrap responsive image class

For the purpose of this snippet we are going to add the Bootstrap responsive image CSS class to all post thumbnail and content editor (WYSIWYG) images.

Using WordPress image filters to alter the generated HTML when images are rendered

The following PHP code can be dropped into your theme’s functions.php file. Remember though, that whilst this would apply to all dynamically generated post thumbnail images, it will only apply to new content editor images, as the html for those images has already been generated and stored as part of the post content.

Add a responsive image class to all post images

Add a responsive image class to all content editor images

Tutorial

LEAVE A COMMENT

Notify of
avatar
wpDiscuz