Repositioning image with caption
-
I have three graphics next to each other at the top of my El Fondo page, but I can’t get them right. I insert the first graphic aligned left, give it a caption, then the next one, also aligned left but no caption, then the third, aligned left with caption.
The third graphic appears between the first two, not to the right of the second one. When I drag it manually, the caption detaches and appears elsewhere in the text. If I add the caption again, the graphic moves to position 2 once more.
I know this can be done, because I’m translating an English website into Spanish and the original is a WP site hosted by a commercial organisation. That one is http://tetrapods.org
I have to say, I have started shouting at the computer!
The blog I need help with is: (visible only to logged in users)
-
The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. http://en.support.wordpress.com/visual-editor/#alignment 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. 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.
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).
To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
<div style="clear:both;"></div> -
I don’t think I can have explained properly. I’m not using the text alignment icons. When I insert the picture, I click the picture and I see two buttons, one showing a sort of landscape view, one showing a red ring with a diagonal line through it. The latter deletes, the image, the former opens a panel allowing some fiddling. In there, there are alignment checkboxes, which is what I’ve been using to try to get my pictures properly aligned. I use the Caption box on the Edit Image tab to add a Copyright statement or some other text.
As the page is now, the pictures are in the right order across the page, with the correct captions, but the right-hand one is too low. When I drag it upwards, the caption gets detatched.I did try your <div> code, which just arranged my pictures vertically against the left margin. Perhaps I misunderstood you.
-
“Perhaps I misunderstood you.”
No, it’s the other way round. Timethief simply copypasted a stock reply of hers: half of it is wrong, half of it is copied from past replies of mine, and none of it addresses your question.
Your images cannot show in a row because the sum of their widths plus their default margins exceeds the width of the column. The middle image has been inserted at a width of 380px. You need to downsize it to 290px (if you don’t change the other two).
Then you need to switch the editor to Text (=code) and paste this after the code of the third image (before “Durante la última década”):
<div style="clear:both;"></div> -
Thank you. I have reduced all three images and inserted the <div> code after the third one, and all is ticketyboo!
I notice that the page editor is not exactly wysiwyg as far as images is concerned, but now I know that I can just hit the Update button and view the page in non-edit mode to see what it really looks like.
Thanks for your help.
-
@TT: I might, after you learn to say “sorry nowordsmith” instead of being concerned with quote boxes, and after you quit the habit of tossing in irrelevant replies without paying attention to what an OP is saying.
@nowordsmith: You’re welcome.
The 290 I suggested was based on the previous version of the right image (which was malformed). Now that you inserted a correct version, the middle image can be wider (up to 350px).
But not all is ticketyboo… You’re using a responsive layout theme. The three images now show in a row when you view the page in a relatively high resolution screen, but the third one will still drop below the other two in a low resolution screen or mobile device. Drag the browser window to make it narrower and see for yourself. So the theme you’re using is totally inappropriate for the sort of thing you tried to do. It’s better (and it would have saved you the shouting too!) to use an image editing application to create and insert a composite image, like this:
http://wpbtips.files.wordpress.com/2013/06/romercomposite.jpg
And yes, the Visual editor isn’t wysiwyg: it has the same width and the same font no matter what the theme (with a few exceptions), while each theme has a different width or max-width and a different font. -
That’s really useful info, @justpi. I had thought about creating the composite as you have done.
Your use of the term ‘a responsive layout theme’ suggests to me there are different types of theme. Given that you can see what I’ve done so far, can you suggest how I might recognise a more appropriate theme? I chose this one because it looked vaguely like the one at the British Geological Survey, which you can see if you click the Union Jack flag on the Proyecto TW:eed page. -
Responsive themes are a little more difficult to work with but they are popular because they can display on different sized screens. So many folks are using iPhones and tablets now.
Juspi can correct me if I’m mistaken, but you can use percent for specifying image sizes, as well as for tables, divs, columns, and other things. That way the pictures shrink to fit smaller screens.
-
-
@timethief
No worries, I used to work in tech support and I know how easy it is to misunderstand.
- The topic ‘Repositioning image with caption’ is closed to new replies.
WordPress.com Forums 
