How do you add space around photos in posts?
In my “About” section, I was trying to add an image to the left, with text wrapping around it. When I did, the text butted right up to the image, almost on top of it. How do I add a buffer of white space between the image and the text?
Blog url: http://coach2wellnessblog.wordpress.com/
The blog I need help with is coach2wellnessblog.wordpress.com.
I’m using Firefox 14.0.1 and I see one center aligned image on your About page http://coach2wellnessblog.wordpress.com/about/ I don’t help with CSS editing so you will have to wait for help with this.
I changed the allignment to be centered and above the text because it didn’t look good with the wrap-around text butted right up against it. Will someone else from WordPress respond to me? Thanks!
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).
Every theme has a maximum displayed image width http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ so it’s important to keep that in mind when posting multiple images side-by-side. If you want two images to be side by side on the same line start by setting the alignment of both images to left. See > http://en.support.wordpress.com/images/image-alignment/ To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
<br style=”clear:both;” />
I changed the allignment to be centered and above the text because it didn’t look good with the wrap-around text butted right up against it.
I don’t see that using Firefox 14.0.1. Which browser and version of it are you using please?
@coach2wellnessblog: Like many themes, Yoko automatically adds some space next to left and right aligned images. Please set the alignment to left again so I can check the sourcecode of your page and see if something’s wrong or if you simply mean you want more space than the default one (in which case I’ll tell you how to do it).
I set it back to left. Thanks!
It’s a bit complicated because it involves a heading, so instead of telling you change this and add that and remove that etc, it’s easier for me (and safer for you) to give you a complete worked-out substitute code. Switch the page editor to Text (=code) and replace this:
<a href="http://coach2wellnessblog.files.wordpress.com/2012/08/crescent-pose-on-beach2.jpg"><img class=" wp-image-34 alignleft" title="Crescent Pose on Beach" src="http://coach2wellnessblog.files.wordpress.com/2012/08/crescent-pose-on-beach2.jpg?w=273&h=205" alt="" width="273" height="205" /></a> <h2>Meet Your Coach</h2>
<div style="float:left;margin:0 8px 14px 0;"><a href="http://coach2wellnessblog.files.wordpress.com/2012/08/crescent-pose-on-beach2.jpg"><img style="width:273px;" class=" wp-image-34 alignleft" title="Crescent Pose on Beach" src="http://coach2wellnessblog.files.wordpress.com/2012/08/crescent-pose-on-beach2.jpg?w=273&h=205" alt="" /></a></div> <h2 style="margin-top:12px;">Meet Your Coach</h2>
Where it says “margin-top:12px;”, you can change the number to adjust the vertical positioning of the heading in relation to the image.
Where it says “float:left;margin:0 8px 14px 0;”, you can change the 8 and the 14 to adjust the space next to and below the image, respectively.
By the way, the image links to a large-size view of it when clicked; is that intentional?
You have like button spammer on the Taming the Gremlin post
Thanks! That helped.
1. Do I have to do that every time? Why doesn’t it automatically leave some white space around the image?
2. It was not intentional to link to a larg-size view of the image when clicked. I think I fixed it. Is it better now? If now, what do I do? How did that happen?
3. What is “like button spammer” on Taming the Gremlin post?
4. If I pay $30 upgrade for custom design, will I be able to change font type and size and color in body copy and also subheads?
Thanks so much for your help!
1. Depends. As I said, in this case there was the complication with the heading (which has its own special default formatting). If the wrap-around text is plain text only, the space can be adjusted in simpler ways.
Yoko does add a fair amount of space next to the image, but not enough below it. Each theme has different defaults, and no default can cover all possible text/image arrangements satisfactorily.
2. No, you didn’t change it. See here:
3. It’s a spammer who pretended she liked your post so she could plug a link to her spammy profile.
4. Yes (and also change the default space around images once for all, or make any other change to the way any element looks). But you need to have experience in CSS editing – or you’ll have to post CSS questions here and usually wait for a staff reply; this means you may have to wait long. Note, in case it’s not clear: the $30 is an annual fee. Also note that if you’re interested in changing the font size, color etc. in the content of a post or a page, it’s also possible without the upgrade. The difference is that the upgrade allows you to do it once for all instead of on a post-by-post basis, and also allows you to change elements outside the post content (for instance post titles, blog title, widget lists etc).
1. I attempted again to delink the photo. Does it look like it worked this time? Now that I selected “none,” will that be the default in the future?
2. Do I need to do something about the spammer? How am I able to see that she (or someone else) did that? What is the issue with this?
3. It says with the upgrade that you can use CSS editing or just do it an easy way with clicking on things. Is this not the case? How do I change font size and color in body text and also subheads without the upgrade?
1. a) Nope! You’re probably missing a step: you need to click on the image (in the Visual editor), click the edit tool (mountain icon), click None, click Update (image) then click Update (page).
b) Once you do that, it won’t be the default because it’s a correction of an already inserted image; it will become the default when you insert a new image in another post or page and click None before inserting it.
2. You’ll have to ask TTTS who brought this up.
3. a) Some things can be changed in an easy way, some cannot; and some themes allow more of this easy way, some don’t (yet).
b) See this post of mine:
How do I ask TTTS the following: You commented that I have like button spammer on the Taming the Gremlin post. Is there something I need to do about it? Thanks!
The topic ‘How do you add space around photos in posts?’ is closed to new replies.