Resize all images with HTML

alexcornes · Member · Jul 9, 2014 at 11:13 pm
Copy link

Add topic to favorites
Hi,
I’ve been searching for an answer for this for over an hour so any help greatly appreciated.

Is there a way I can resize all the images within a blog post, without having to do it individually each time? My images are posted from instagram at the default size of 612×612, but I would like them to resize to 400×400 automatically using a code that applies to the whole post.

I know how to do it for each image individually already so I’m after a piece of code that would overwrite and resize all of the images posted.

Thanks!
dannywellman · Member · Jul 10, 2014 at 1:58 am
Copy link
You can change the default maximum sizes of your images (thumbnail, medium, large) in your dashboard. Settings > Media.

I believe that will only apply to all future image uploads and it won’t be specifically limited to certain posts.
thesacredpath · Member · Jul 10, 2014 at 4:11 am
Copy link
The settings at Settings > Media will only apply to images uploaded and inserted from your Media library here on WordPress.com.

The only suggestion I have for images that are not hosted here on WordPress.com is to switch to the text tab in the post editor and copy out all of the text and code and paste it into a plain text document and then use find/replace to replace the height and width stuff in the image code. Generally you should see something like the following within the image code on the images inserted from instagram:
width="612" height="612"
You could put that into the “find” and then the following into the “replace”.
width="400" height="400"

You would then past the fixed text and code back into the post editor replacing the old code.

One of the problems in doing things this way is that you will be relying on the browser to resize the images and they aren’t too good at that and there will be a loss in quality (probably something you do not want).

It would be better if you were to insert 400 x 400 images direct from instagram instead.
designsimply · Member · Jul 16, 2014 at 12:01 pm
Copy link
It’s also possible to adjust image sizes with CSS. To do it, you need to know what to target, for example a custom class name. If you don’t have a custom class name to target, then you can resize images with CSS but it would be all images at once so it might not be the most helpful.

You can also use body classes to target one type of page, and that might help a little.

I reviewed your site and found this page to look at as an example:
http://alexcornes.com/blog-2/

This CSS will make all the images on that page a max width of 400px:
```
.blog .entry-content img {
	max-width: 400px;
}
```
And if you wanted to include single posts such as this one:
http://alexcornes.com/2014/07/11/client-gave-me-some-lovely-flowers-today-at-the/

You could update the rule like this:
```
.blog .entry-content img,
.single .entry-content img {
	max-width: 400px;
}
```
The down side of using either of these methods is that all images in content areas on either of those types of pages will be limited to 400px wide. So if you wanted to insert larger images on those pages in the future, you would need to adjust your CSS.

No items found.