Why are my images not displaying at the right size?
-
As of yesterday, images on my blog are not displaying at the right size. I size them using the “height” attribute in the img tag (I use the text editor rather than the visual one), but it seems to be ignoring the size attributes when it displays the page, and displaying all images at their original size. This is happening in multiple browsers on multiple computers, whether I’m logged in or not. I use the Vigilance theme, but I haven’t changed my theme recently or made any other changes that would have caused this. Any ideas?
Blog url: http://fyreflybooks.wordpress.com/The blog I need help with is: (visible only to logged in users)
-
That’s because the height attribute doesn’t work with images hosted elsewhere. Instead of this:
<img src="http://ecx.images-amazon.com/images/I/51USAq5-GJL.jpg" height="200" align="left" />
you should use this:
`<img style=”height:200px;” src=”http://ecx.images-amazon.com/images/I/51USAq5-GJL.jpg” class=”alignleft” />Other remarks:
a) Inserting images hosted elsewhere isn’t best practice: your page takes longer to load, and you risk a no-show if the other site is down or takes to long to load, or if the image gets relocated or removed.
b) Images downsized by WP lose some color and sharpness.
So best practice is to upload the images from your computer to your blog, after you downsize them to the desired dimensions in an image editing application.
Also, what on earth do you need a “spacer” image for? -
Sorry, forgot to enclose the second example correctly:
<img style="height:200px;" src="http://ecx.images-amazon.com/images/I/51USAq5-GJL.jpg" class="alignleft" /> -
the height attribute doesn’t work with images hosted elsewhere
Is that new? It’s worked just fine for the past four years, up until yesterday. Also, it doesn’t address the problem, because WP is also ignoring the “height” and “width” attributes for images that I’ve got hosted on my own site.
I can go through and edit the images individually so that they display correctly, but that’s a LOT of work to go through my archives and fix everything one at a time, and doesn’t really address the fact that this is something that used to work and now doesn’t.
And the spacer image was the easiest way that I could create a margin on only one side of an image. It’s maybe not the most elegant solution, but it worked, and I’ve stuck with it.
-
1) No it’s not new. A more precise answer would have been: it doesn’t work when used by itself, without the width attribute. And again it may work in some browsers or browser versions but not in others: the safe method is the style attribute.
“It’s worked just fine for the past four years”. Link to an example please.
2) “WP is also ignoring the “height” and “width” attributes for images that I’ve got hosted on my own site”. Again, link to an example.
3) The spacer image is an unnecessary complication. The CSS of Vigilance specifies a default 15px margin right/left for the alignleft/alignright classes, so you’ll have your margin if you specify the alignment as I showed above (class=”alignleft” instead of align=”left”).
If you don’t want to use classes and/or or if you want a larger margin, again you don’t need an extra image:
<img style="height:200px;float:left;margin:15px 30px 15px 0;" src="URL HERE" />
(the four margin numbers refer to top, right, bottom, left)PS If you care about search engines, page rankings and such, you should also add the alt attribute to image codes.
-
1) I can’t link to an example of an old post that shows it working, because WP has stopped displaying them properly across blog-wide, but before yesterday, this same code resulted in the images displaying as 200 px high, with the width downsized relative to the original dimensions.
<img src="http://ecx.images-amazon.com/images/I/51USAq5-GJL.jpg" height="200" align="left" />2) Again, can’t link to a specific example where it is working, but I use my spacer image to create a 200×15 margin next to the book cover images. The following code used to do this; now all of my spacers are displaying as the original size (40×40).
<img src="/files/2007/12/spacer.jpg" height="200" width="15" align="left" />3) That’s good to know! The spacer is definitely a holdover from the earliest days of my blog, when I was using another theme and didn’t know much about CSS, and is the result of a “it’s not what works best, it’s what works first” approach.
In general, I’m just thrown because I’ve had the same template code for my blog posts for years (again, probably not the most elegant, but functional and easy), and all of a sudden it’s stopped displaying properly. I’m not averse to changing my template so the code is right for future posts, but the idea of having to individually edit each of the posts in my archive makes me die a little inside.
-
Well, I’m not WP staff so I can’t tell if and what changed on their side, deliberately or not. What I can tell about your last reply is:
1) That’s not good coding, for the reasons I explained.
2) No way! The height and width attributes can’t be used to distort an image: if the original is square, it’ll show up as a square; the width value takes precedence, and the height value is ignored. You’re not right when you say “now all of my spacers are displaying as the original size (40×40)”: at the moment the ones on your front page are displaying* at 15x15px or 30x30px (depending on the width you’ve specified). This might have been different in the distant past, but it certainly didn’t change yesterday. As an example, here’s a cached version of one of your posts (October 9):
http://webcache.googleusercontent.com/search?client=safari&rls=en&q=cache:http://fyreflybooks.wordpress.com/2012/09/24/deborah-harkness-shadow-of-night/&ie=UTF-8&oe=UTF-8
The spacer image was the same as today: 30×30.
Distorting an image can only be done if you specify width and height in the style attribute.*In my browsers. What browser and version are you using?
-
2) I don’t know what to tell you; that cached page is showing up with the images displaying “incorrectly”, but I promise that as of last week, the code I posted above absolutely did “distort” my spacer image so that it was not square, without using the style attribute, and that this was true in both Safari and Firefox.
-
Additionally, the images are being displayed correctly in the RSS feed: feed://fyreflybooks.wordpress.com/feed/
-
The RSS feed is another reason I use the spacer image, since any css-dependent formatting doesn’t show up correctly in feed readers.
Also, my attribute tags are still being ignored, where they worked fine last week. WP staffers – did something change between now and then?
- The topic ‘Why are my images not displaying at the right size?’ is closed to new replies.
WordPress.com Forums 