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! While you're at it, check out some resources Treehouse students have shared here.

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


How to bend responsive images in Wordpress

Well i've done all Wordpress courses except the plugin development one, done much research on the net, but the only thing i am still uncomfortable about Wordpress is its media library and the processing of images in particular - furthermore i am troubled about responsive images.

if anyone might recommend a good blog post, has a good word of advice on one or two of the questions below or could help in any other way to get a new perspective onto the image topic it would be more than welcome. so far everything feels quite vague, unable to understand things thoroughly and i am far from feeling in control. ;)

1) what is the best practice for image import. is it always recommended to upload images to the media library in the admin interface first and in the next step access images directly from the media library for the theme ?

2) is there also a function to link images from the media library directly in the code like it is possible with external images. e.g.

<img class="picture" src="<?php bloginfo('template_directory'); ?>/img/about.jpg" alt="about">

3) and inside the wordpress settings you are able to adjust large medium and thumbnail sizes for the imported images (as well as you are able to extend that list within the functions.php with add_image_size) but will wordpress also change between those images depending on the active viewport? checked a few wp sites but haven't seen any adjustment in img width.

4) and about the add_image_size function in functions.php i also wonder if it would be possible to select sub sets of media sizes. i mean you have a list of e.g.

thumbnail 150x150 medium 450x9999 large 750x9999 ximage 1000x9999 (custom size with add_image_size) yimage 1200x9999 (custom size with add_image_size) zimage 1400x9999 (custom size with add_image_size)

so that i am able to apply the medium ximage and zimage picture for one set of images and medium, yimage, zimage picture to another set. i mean to manage that you are able to choose which set of breakpoints is applied to which set of media objects.

5) and is there a best and recommended solution for the implementation of responsive images in wordpress? i've found a nice tutorial on the implementation of picturefill in wordpress: http://premium.wpmudev.org/blog/diy-truly-responsive-images-on-your-wordpress-website/ but are there any other maybe better more native alternatives out there (responsive images including retina images)???

Sorry for that many question but i haven't found satisfying answers yet and i am still way too puzzled about the whole topic. ;) thanks in advance ralf

4 Answers

Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

Each of those questions is a thread in of itself, but I'll do my best...

1) It depends on what you're using the images for. If they are part of the content, it's fairly standard to just use the Media Library, so you have access to them later if you need it. For theme specific files, it's best to use a images folder in your theme directory.

2) I don't know of a function, but the URL string is consistent: it's always /wp-content/uploads/[year of upload]/[month of upload]/file_name.ext

IE: /wp-content/uploads/2014/01/myPic.png

3) As far as I know, WordPress just pulls whatever file you tell it to. When you upload using the Media Library, it creates new files for each thumbnail size. You have to call the specific one to access it. It will not happen automatically.

4) Each image size you define is unique. There are no subsets (like a multi-level array), but each one is still accessible by the name you provide. If you structure your names using a subset naming convention, that's up to you.

5) Considering there still isn't a true consensus on responsive images period, it's too early for a best practice for responsive images for WordPress. That blog post is a great start, but like most responsive image solutions out there it's nearly as much extra work as just using PictureFill.

Thanks! Yeah i am aware of that, and normally i tend to ask one question per post, but i thought in that matter splitting up the issue in several sub posts would be counter productive.

1.) ok as i thought. content into the media library and layout related stuff into the img directory.

2) i found two options meanwhile. Either with content_url()

<img class="testclass" src="<?php //echo content_url() . '/uploads/2014/01/'; ?>frontpage-4-720x252.jpg" alt="logo"> 

or with wp_get_attachment_image_src()

$attachment_id = 239;
$size = 'respsmall';
$image_attributes = wp_get_attachment_image_src( $attachment_id, $size ); // returns an array

<img src="<?php  $image_attributes[0]; ?>">

3) Oh ok, i guess I expect and and project too much into plain facts. Just seeing different sized versions of a picture I implied Wordpress would exchange images if the width allows. But I get it ;))

4) No I guess my question was a bit misleading. Basically I had the following in mind. Would it possible to distinguish in functions.php:

    if($hook == x) {
    add_image_size('bps1-small', 410, 9999);
    add_image_size('bps1-medium',750, 9999);
    add_image_size('bps1-large', 920, 9999);
else if ($hook ==y) {
    add_image_size('bps2-small', 360, 9999);
    add_image_size('bps2-middle', 520, 9999);
    add_image_size('bps2-middle', 820, 9999);
else {
    add_image_size('bp3-small', 220, 9999);
    add_image_size('bp3-middle', 820, 9999);
    add_image_size('bp3-large', 1200, 9999);

I mean to have a conditional image creation routine. So that there aren't nine versions created but only the three necessary for the image and the breakpoints in the context. But aside that i am still a bit puzzled which hook might do the trick.

5) Yep I know a consensus is far far away. But I just wondered which solution people use recently along with Wordpress. And yeah just using Picturefill was my basic goal. The described method was just an easy automatisation for the html markup as well as the image versions creation and their naming. Question 4 is basically based on my research on the Picturefill usage.

Thanks again for the feedback and input! Cheers Ralf

Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

You're better off creating all of the image sizes. They don't take up very much space, and you may need them at some point anyway. Such is the nature of responsiveness (yay.).

Going back to the article you linked before, it's a really interesting way to implement PictureFill without the nightmare markup. That being said, my experience has shown me that just using max-width:100% goes a long way in solving most of the responsive image issues you're going to run into, at least until the W3C makes up their minds on how to move forward.

If you have so many images that resources are that much of a concern, you may need to rethink your design, or get creative with things like lazy loading. Going image heavy on mobile isn't usually a good idea. WordPress is already bringing enough to the table that your images are the least of the resource issues. No need to pile on.

Yeah i am already tending to that kind of procedure finally and just create all images cuz working around that at the moment seems to be a nightmare. But I just feel uncomfortable creating resources i don't really need. It's not the loading but just the webspace they take even they aren't used.

Yep max-width:100% i am also using already. That is one of the most fundamental properties in respect of responsive design ;)

Well will give the solution of the article a spin this afternoon.