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

WordPress

Bob Sutherton
Bob Sutherton
20,160 Points
Posted by Bob Sutherton
Bob Sutherton
20,160 Points

Getting images to be responsive in WordPress w/ Bootstrap?

I followed Zac Gordon's course on building a WordPress theme with bootstrap. I have this site built but I want the images to be responsive. The site features a lot of images that have been inserted via the post editor. How can I make all of the photos on the site responsive?

I know that Bootstrap has a responsive image class:

.img-responsive

Is there an easy way to add this class to every image featured on the WordPress site?

6 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

You could maybe try this, and I've included some additional resources for you as well.

img.post {
  width: 100%;
}

Styling Posts and Images in WordPress

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

If you don't want to add the class to each image manually, you can create a custom style sheet to load after bootstrap, and add the code below.

custom.css 
img { 
  width: 100%; 
}
Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Thanks for the response, Dustin Matlock. I already had a custom.css file next to my Bootstrap css, so this solution was easy enough to try out. Unfortunately it had some negative side-effects.

Is there an easy way to apply this to only the images in the posts?

Also, I really wouldn't mind manually adding the .img-responsive class to each image that needs it but I don't even know how to do that. I tried adding it in the WordPress image editor to the 'link class' but it didn't do anything.

Raymon Oleaga
Raymon Oleaga
19,298 Points
Raymon Oleaga
Raymon Oleaga
19,298 Points

If what you want is to add the .img-responsive class to your images via the wordpress editor do this:

1.click on the "text" tab instead of visual so you can see the html<br> 2.Click add media and insert the image you want.<br>

  1. you will get something that looks like this:<br>

    <a href="http://yourwebsite.com/wp-content/uploads/2014/05 /myimagename.jpg"><img src="yourwebsite/wp-content/uploads/2014/05/myimagename.jpg" alt="some description" width="150" height="150" class="alignnone size-thumbnail wp-image-6077" /></a>/

4.in the img tag add your class (img-responsive) in other words in the part of the code that looks like this:

<img src="yourwebsite/wp-content/uploads/2014/05/myimagename.jpg" alt="some description" width="150" height="150" class="alignnone size-thumbnail wp-image-6077" />

5.add the class there so it will look something like this:

<img class="img-responsive" src="yourwebsite/wp-content/uploads/2014/05/myimagename.jpg" alt="some description" width="150" height="150" class="alignnone size-thumbnail wp-image-6077" />
Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Thanks Raymon. WordPress has an option to add a class to an image via the image editor. I did this and saw that it was showing up using the dev tool in the browser. For some reason, though, it wasn't having any effect. I will try your method and see if there is any change.

Dustin Matlock
Dustin Matlock
33,856 Points

If you're using CloudFlare or a cache plugin, you might check that. Usually, if you look at the source, you can see if there is any versioning.

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Dustin Matlock, what do you mean by versioning? I checked the files in my theme and I am linking to the bootstrap in a CSS file in my theme. So it's not a CDN. I am using the javascript from the Bootstrap shortcodes plugin though.

I don't think I have a cache plugin installed either.

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Thanks everyone for your replies.

I would like to offer someone to take a look at my site, particularly this article. Most of the images on the page seem to behave responsively. It is only the largest photo, the one of Kunju Swami, that sticks out to the right when the browser window is sized to a very narrow width.

I will see if I can find some more good examples. They normally involve large photos that stick out towards the right side of the page when the browser is resized.