Can't fix layout of published post
-
When I write a new post and add pictures to it, the pictures seem to be correctly displayed in the backhand of my blog, in the ‘Edit Post’ section, but when I preview or publish it, the whole layout is messed up. I can’t seem to find what the issue is in HTML coding, though to be honest I don’t really understand HTML coding.
An example is: http://thelifemodelwholookedback.wordpress.com/2013/09/30/sculptures-inspired-by-life-2/ All I want is for two images (same size) to appear next to each other. In the beginning this works, but after the 6th picture all is going wrong :( Still, they are roughly the same size and are aligned in a similar way. It also happens in other posts that the size of the picture is altered in the published or previewed version, yet the size is inserted correctly in HTML coding. Why does this happen? Help!The blog I need help with is: (visible only to logged in users)
-
See here please > http://en.support.wordpress.com/visual-editor/#alignment
The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.
Align-left means position left, with the rest of the content wrapping around the right side of the image.
Align-right means position right, with the rest of the content wrapping around the left side of the image.
Align-center means position center, with no wrap-around (= the rest of the content below the image).
If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.
To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
<div style="clear:both;"></div> -
All I want is for two images (same size) to appear next to each other. In the beginning this works, but after the 6th picture all is going wrong :( Still, they are roughly the same size and are aligned in a similar way.
images side by side > http://en.support.wordpress.com/images/image-alignment/#side-by-side
-
Thanks for wanting to help me timethief, but adding in the code you’ve given me, doesn’t change anything to it. I’ve aligned all the images exactly like mentioned in the second link you’ve provided, side by side. The images aren’t too large as they are the exact same size as those above. Here is the coding about the images, can you see if I’ve done anything wrong?
<img class=”size-medium wp-image-573 aligncenter” alt=”IMG_1338″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/09/img_1338.jpg?w=300″ width=”300″ height=”225″ />
<p style=”text-align: left;”><img class=”alignleft” alt=”IMG_1339″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/img_1339.jpg?w=225″ width=”201″ height=”267″ /> <img class=”alignright” alt=”foto9″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto9.jpg?w=225″ width=”200″ height=”265″ /> <img class=”alignright” alt=”foto1″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto1.jpg?w=225″ width=”201″ height=”267″ /> <img class=”alignleft” alt=”foto6″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto6.jpg?w=225″ width=”199″ height=”265″ /><img class=”alignleft” alt=”foto8″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto8.jpg?w=225″ width=”199″ height=”265″ /><img class=”alignright” alt=”foto5″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto5.jpg?w=225″ width=”199″ height=”265″ /></p>
<img class=”size-medium wp-image-641 alignleft” alt=”foto copy 3″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto-copy-3.jpg?w=225″ width=”199″ height=”265″ /><img class=”size-medium wp-image-640 alignright” alt=”foto copy 4″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto-copy-4.jpg?w=225″ width=”200″ height=”266″ /> <img class=”size-medium wp-image-642 alignleft” alt=”foto copy” src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto-copy.jpg?w=225″ width=”201″ height=”266″ /> <img class=”size-medium wp-image-643 alignright” alt=”foto” src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto.jpg?w=225″ width=”199″ height=”265″ /><img class=”size-medium wp-image-639 alignright” alt=”foto copy 5″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto-copy-5.jpg?w=225″ width=”200″ height=”265″ /><img class=”size-medium wp-image-637 alignleft” alt=”foto copy 6″ src=”http://thelifemodelwholookedback.files.wordpress.com/2013/10/foto-copy-6.jpg?w=225″ width=”200″ height=”266″ /> -
a) To display code correctly in this forum, you need to enclose it in backticks (see the note on “allowed markup”). But when you’re referring to a published and public post or page, you don’t have to copypaste the code: we can see the code.
b) The code you pasted above is not the current code of that post: the mis-aligned images have lost their width and height indications, so they display at 225px instead of 200 or so. And that’s why they cannot show side-by-side: left/right-aligned images have a default right/left margin, so at 225px there’s no room enough for two images plus their margins.
Go to Settings > Media, set the default max width for the medium option to 200, then edit the post, remove all the images and re-insert them (selecting the medium option).
There might still be problems after you do this, because the images aren’t all exactly the same aspect ratio; we’ll see about that. -
- The topic ‘Can't fix layout of published post’ is closed to new replies.
WordPress.com Forums 
