Tweaking text wrap around images…
-
Greetings, helpful gurus, my goal is to tighten up the text wrapping around an image in my latest blog post. Is this possible through the edit window using HTML, rather than my needing to use CSS?
You’ll see that there is too much white space underneath the image. It seems like a simple matter to make an adjustment to have it wrap one line higher. I hope so! Thanks as always for enlightening me.
The blog I need help with is: (visible only to logged in users)
-
Yes you can. Twenty Eleven was overly generous on white space in several areas.
Open the post in the editor, switch to the HTML tab and add a “style” declaration such as this right after “<img”.
<img style="margin-bottom: 1em; margin-right: 1em;" ETC ETC... -
This is what I’ve done so far, which I know isn’t right yet as the image disappears:
<img style=”margin-bottom: 1em; margin-right: 1em class=”alignleft size-full wp-image-1447″
What am I missing, or what have I screwed up? Thank you!
-
Go to settings > writing and select to have WordPress automatically correct invalid nested…” and save changes.
I just did the above in Firebug and it ended up adding the style stuff at the very end of the image code. Replace your image code with this.
<a href="http://youngteresa.files.wordpress.com/2012/01/project-24-horiz-right-just-e1325660475953.jpg"><img class="alignleft size-full wp-image-1447" title="Project 24 horiz right just" src="http://youngteresa.files.wordpress.com/2012/01/project-24-horiz-right-just-e1325660475953.jpg?w=584" alt="" style="margin-bottom: 1em; margin-right: 1em;"></a>In the future, add the style stuff right at the end of the image part of the code just before the ending
></a> -
Got it! This is fantastic, and shows me the width and depth of an em space. I’d like a little MORE space to the right of the image, so that the space is equal beside and underneath the image; is there a unit of measurement smaller than the em for finer detail for that purpose?
This is incredibly valuable, and I truly appreciate your help. I’ll tear myself away as I’ve gotta sleep, and I’ll be back. THANK YOU, THANK YOU! THANK YOU!
-
You can use decimals such as 0.9em, or even things like 0.67843em. Or if you have a better feel for pixels, use pixels. em units are based off of the base font size settings so if the font size was increased, the margins on the images would increase (although the numeric value would stay the same). With em units, things “scale” in relationship to the other things, which is why some designers are now moving to them instead of px since px is an absolute value. em units are relative.
-
-
@Rich: Your original suggestion was ok – style before or after the rest doesn’t make any difference if the coding is correct.
@youngteresa: Your mistake was a missing semicolon and quotation mark to close the style declaration. You had written this:
<img style="margin-bottom: 1em; margin-right: 1em class="alignleft ETC ETC
instead of:
<img style="margin-bottom: 1em; margin-right: 1em;" class="alignleft ETC ETC -
Thanks, guys, this is so great. I’ll make notes on all of it after my work day today rather than wishing I’d done so the next time I’m futzing with an image. I love wordpress, though; it’s amazing what you can do on it WITHOUT knowing html. And I have another question that I’ll switch to the CSS forum for.
And thank you both again!
- The topic ‘Tweaking text wrap around images…’ is closed to new replies.
WordPress.com Forums 