Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Strategies for making Wordpress featured images responsive?

I am trying to make my 'featured images' responsive in Wordpress. Does anyone know of any good strategies I could employ? I tried using the Mobble plug-in but it doesn't work.

7 Answers

Matt Campbell
Matt Campbell
9,767 Points

Just find the class with the images in and set them to a percentage width and auto height. Job done.

If you want to get fancy, resize everything with jQuery while the page loads.

This is been overcomplicated somewhat. It's just targeting the image and doing normal CSS or jQuery stuff.

I think the question is to serve a completely different image to save with the actual image size (in k, as in 100k vs 50k image size). That cant be done too easily on the client side without doing detect and replace prior to the image loading, so detecting on the server side and responding with a different size image there in the img tag would probably be best. I am not sure how much actual speed savings would be experienced with that though if the large image is properly optimized.

Wow! All good answers... it's gonna be tough picking a winner - haha! Swapping out images would be my strategy if I had more time and the site was the kind of site that requires it. For now, I think I'll sick to the media query strategy. Thanks y'all!

a combination of the advanced custom fields wp-plugin and the picturefill js plugin seem to work fine.

Making the featured images responsive is not a matter of tweaking the wordpress engine itself, but more about modifying your themes CSS. Adapting the featured image to different viewport sizes is done by writing media queries. You select you featured image's css class and write in what you want it to do at a given viewport size. so for example, at a desktop screen size you might want it to only span 300px and float left to leave the post's words wrap around the right side. At a mobile viewport size you might want the image to span 100% of the width and have the words beneath. If this is what you are trying to do, media queries are what you should look more into.

plain media queries won't do the trick. if you wanna stay semantically correct you would have to load the images belonging to the content inside the html markup. if you exchange those images with media queries would imply that the user would have to load not one but each version of the image. the bandwidth would grow exponentially.

A media query doesnt replace the image, it just scales it differently depending on the viewport size (if you set different css width properties inside the media queries) so I am not sure what you are referring to in terms of multiple image versions and bandwidth, but I get part of your point. You are saying, "if the viewport is 400px, why send and image that is 800px wide scaled down 50% for mobile, the image served should be 400px to save on the image size" correct?

The Mobble plugin will not just automatically scale your images, it just provides you with helper functions to let you know if the device accessing the page is a mobile device or not. You will need to account for what your page does depending on that detection. Looking at the documentation, it looks like it has these helper functions: is_iphone(), is_mobile() and is_tablet() which I am guessing return a boolean depending on the device accessing, which you would then handle with a conditional.

I still think that the complexity vs page speed savings of using this purely for serving a different image size probably isnt much in comparison to just serving an optimized image, scaled with CSS Media queries depending on the view port size. Using something like Mobble would maybe be better to serve different html structure rather than just an image?

Matt Campbell
Matt Campbell
9,767 Points

You can compress a 1.5mb image down to a few hundred kilobytes on a resolution of 1920x1080 and the quality is still great and load time is minimal.

The title and question are for responsive image sizes, that in my mind means pixel size.

So after some research, you may be looking for something similar to the purposed HTML5 picture element. It is not fully supported yet, but it looks promising for serving adaptive images based on screen resolution (retina) and viewport width (desktop vs mobile). You can actually use the element now, and browsers that dont support it will hit the fallback image property, however there is also a JS polyfill called picturefill that appears to do the job of the purposed picture element that will be cross-browser compatible. You can see a demo of it working, just pull the screen in to see it adapt, or pull the screen in and load the url to see it serve a smaller version of the file. This would be the best solution I could find for your issue, besides waiting till the picture element is supported by all major browsers.