Theme Development: Incorporating responsiveness in post images?

CMS & WordPress
1

OK so recently Ive run into something that has raised a question…

Normally if i’m developing a responsive website, to make imagery responsive and scaleable, i do it like this:

I set the images inside a div which has a class, that class has its width (percentage) and height… then images inside that class are set to width: 100%; … that forces the image to scale the smaller the “image container” gets…

But recently ive been building a wordpress theme, and ive noticed that wordpress doesnt wrap images in any kind of a container div or class or anything, so how would i go about building responsiveness for post and page images into the theme? everything else about the theme is totally responsive at the min but when the user ads images, they arent responsive because of this problem.

Has anyone else run into this issue and how did you overcome it?

Thanks

2

You can add filter to image_send_to_editor and remove width and height with regex and then add extra html.

3

im not familiar with what you mean. can you explain in more detail please?

4

You should check WordPress codex, to find more information on filters.
In this case I would add something like this in themes functions.php file:


add_filter( 'image_send_to_editor', 'my_image_tag_filter', 10 );

function my_image_tag_filter($html) {
    $html = preg_replace( '/(width|height)=\\"\\d*\\"\\s/', "", $html );
    return '<div class="my_image">'.$html.'</div>';
}
5

No need to dive into PHP code to get this done.

img {
width:100%;
height:auto;
}

This will just resize the image proportionately as it appears on the screen so that it doesn’t stretch beyond the container (or screen)–it won’t limit the data that’s actually being downloaded.

If you have massive images, you might also want to consider this: http://adaptive-images.com/