WordPress.com

1. fashionasliterature
   Member
   Jul 6, 2012, 9:56 PM

   So, in the editor, my images are perfectly resized and align beautifully, but when I preview or publish a post, they're suddenly not.

   This is especially pronounced on the post I'm attempting to publish right now, but can be seen more subtly in almost every post I've done with images. I've provided screencaps for clarity.

   In edit: http://postimage.org/image/s8p9xkio1/
   In preview or post: http://postimage.org/image/d7y5bqbvn/

   My HTML looks right; both images have the same height of 300, and I even tried re-sizing them in Photoshop so that they have corresponding dimensions, and then re-uploading them; it didn't work. Can't figure out what's going on here, and its happening for a number of the images I'd like to post.

   Please help!

   The blog I need help with is fashionasliterature.wordpress.com.

2. justpi
   Member
   Jul 6, 2012, 10:00 PM

   Publish the post please, so we can check its code and tell you what's wrong.

3. fashionasliterature
   Member
   Jul 7, 2012, 6:29 AM

   I'm sorry, but I would rather not publish a post where the photos are not aligning correctly. I'm a bit of a perfectionist, I guess.

   But, any one of my posts with pictures will show the same problem, albeit less exaggerated than in the example I offered; its become a regular problem for me.

   Here you can see a slight difference in height the two Vogue covers, even though they're both set to the same height dimensions: http://fashionasliterature.wordpress.com/2012/06/12/vintage-favorites-swimwear/

4. justpi
   Member
   Jul 7, 2012, 11:40 AM

   You think they're set to the same height: change the number to see it has no effect.

   Let's take the first couple of images as an example. The left one is 363x500 but the right one is 357x500. When you insert images via URL, the width and height indications you get are those of the originals: changing the numbers manually can scale the images down but it cannot distort them to make the displayed versions same aspect ratio although the originals aren't. To do that, you need to delete these:
   width="200" height="275"

   and turn these:
   <img ETC ETC

   to:
   <img style="width:200px;height:275px;" ETC ETC

   (Although that's not what I would do: I would resize them in Photoshop to the exact pixel dimensions I want on the post, and upload them to the blog instead of inserting them via URL. This would result in faster loading time and slightly better quality.)

   By the way, you're using too much unnecessary coding for your side-by-side images. Here's one simple alternative:
   

   <div style="margin-left:18px;">
   CAPTION CODE 1 & CAPTION CODE 2, NO LINE BREAK OR SPACE BETWEEN THEM, ALIGNMENT OF BOTH SET TO LEFT
   </div>
   <p style="clear:both;">TEXT</p>

5. fashionasliterature
   Member
   Jul 7, 2012, 8:09 PM

   Thank you so, so, so much. I am incredibly grateful; I would have never been able to figure this out myself!

   I do plan to go back and upload the images directly to WordPress, but I would want to link to higher quality versions, so it was really necessary that I learn how to appropriately code to resize.

   And thank you for showing me how to shorten the code for placing images next to one another!!

6. justpi
   Member
   Jul 7, 2012, 10:23 PM

   You're welcome!
   If you're going to upload the images to your blog, again you can follow my suggestion and edit the large versions in an image editing application to make them exactly the same: this way you won't have to modify the coding when inserting them. (When you insert images uploaded to your blog, you can select thumbnail, medium or large size, and you can set the default widths for these options in Settings > Media).

Topic Closed

This topic has been closed to new replies.