WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] making text wrap around images (20 posts)

  1. ccpetersen
    Member
    Posted 5 years ago #

    Okay, so I upgraded to 2.6.1 yesterday and today I'm writing a blog entry and including an image. WordPress "fixed" the insertion of images and I'm not sure the "fix" was worth it. I cannot, no matter what I do in the interface, get the text to wrap around the image. There is plenty of room on the left of the image, and I've clicked on "align right" but the text just does not wrap around the image. What is the fix for this? It's darned annoying, since 2.5 worked just fine in this regard.

    Here is the html text that the dashboard inserted into my entry (which I won't publish until this gets resolved):

    [caption id="" align="alignright" width="367" caption="The LSST Mirror Blank fresh out of the mirror"]<img src="http://www.lsst.org/Gallery/photos/LSST08-image-half.jpg" alt="The LSST Mirror Blank fresh out of the mirror" width="367" height="302" />[/caption]

  2. ccpetersen
    Member
    Posted 5 years ago #

    Followup: I should add that the wrap looks fine in the dashboard; it just doesn't appear to be wrapping when I preview the page.

  3. ccpetersen
    Member
    Posted 5 years ago #

    can anyone help with this?

  4. ccpetersen
    Member
    Posted 5 years ago #

    So, I'm gathering that the ability to wrap text around images using the dashboard settings is borked... I've searched the codex, sniffed around some blogs about wordpress, but I don't find anything to help me make the tool to flow text around an image work. this worked fine in 2.5, but now that I've upgraded to 2.6.1, it's broken. Is there anybody here who can help with this?

    blog is: http://www.thespacewriter.com/wp -- the entry about mirrors and ovens has text that wont' flow; previous entries were created in 2.5, and they flowed... so what is the deal?

  5. ccpetersen
    Member
    Posted 5 years ago #

    Okay, for those of you not paying attention to this, move on to the next message. For those of you who use the tool to align images, I figured out that if you put in a caption, it borks the alignment and will NOT allow the text to flow around the image. If you go to my page now, you will see it aligned properly around the image. However, if I put the caption in, using the dashboard tool, the text will NOT align.

    Someone from wordpress development should take note of this and test it to see if it can be fixed.

  6. Doodlebee
    Member
    Posted 5 years ago #

    Do you have "alignright" in your stylesheet, setting it to float right? Ahh - yes, you do - but your class is in the wrong thing.

    Your code is like so:

    <div class="wp-caption alignright" style="width: 375px"><img style="border: 1px solid black; margin: 3px 6px;" src="http://www.lsst.org/Gallery/photos/LSST08-image-thumb.jpg" alt="Fresh from the oven!" width="365" height="292" />

    You need to understand a little about CSS to see what's going wrong here. DIV's, by default,are block-level elements. Which means that when you have a div on a screen, there will be nothing else on that line unless you tell it to display:inline or float. You've placed the image within a div, which is a block-level element. The DIV has the "alignright" attribute - but your alignright" is specified for *images* only (img.alignright) - so it ignores the specifics for that and takes up the whole line.

    Take it out of the div. Apply "alignright" to the image only.

    Oh, and you have 143 validation errors. That might be contributing to your issues as well.

  7. ccpetersen
    Member
    Posted 5 years ago #

    Ah, okay, this makes sense. DO I change it in the CSS stylesheet? Here is my stylesheet; where do I make tht change? I didn't write my own stylesheet; it came with the theme I use, but I did modify some if it (although not the image alignment calls).

    Would the validation errors be stemming from the CSS sheet?

    I know how to fix those in html, but not so much with this programmming.

    thx.

    Edit by mod: Removed long bit of CSS, we can see your CSS just fine on your site itself.

  8. ccpetersen
    Member
    Posted 5 years ago #

    Posted last night... Doodlebee... you raised interesting questions; can you help further?

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    The captions thing works for me just fine. I use code similar to that in the default theme:

    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}

    Also, doodlebee, the alignright is indeed supposed to be on the caption div, not on the image. That was a change introduced in the captioning. The idea is that you want the div to float. If you don't have a caption, then the div isn't there and the image gets the class instead. Clever, eh? Given the above CSS code, that is. :)

    ccpetersen: Change your .alignright and .alignleft classes to float instead of using text-align. Basically, change that bit in your CSS to look more like the above.

  10. ccpetersen
    Member
    Posted 5 years ago #

    Okay, I made those changes to my css and just now wrote a post with a pic embedded. Same problem is happening; if I have a caption, the text won't wrap around the image. If I take out the caption using the image edit tool in the dashboard, the text will wrap...

    When I write a caption, it now puts it below the last paragraph, and in addition, no matter where I tell the tool to put the image, it puts it on the left and won't resize the image. It looks fine in the editor, but when I test the page in preview, it's all bunged up.

    Okay... I posted the current one (data in a cube), and neither picture has a caption. The text alignment is fine. If I put in captions, I get what I described above.

    cc

  11. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    ccpetersen: I'm looking at your page now and not seeing anything with any captions.

    We can't fix your problem if you don't leave it up there long enough for us to actually SEE it.

  12. ccpetersen
    Member
    Posted 5 years ago #

    I never put them in -- it screwed up the page so badly... but, here you go... I've put them back in... one with captions, one without...

    http://thespacewriter.com/wp/

    without the caption, the text wrapped fine... with it, the text gets shoved around... and won't wrap.

  13. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    ... I'm not seeing the problem here, other than your captioned image doesn't have the pretty wrap around polaroid like stuff on it.

    Here's what I see on your page right now:
    http://img98.imageshack.us/img98/2643/nocaptionszg0.png

    You can add that pretty stuff by adding this code:

    /* Captions */
    .aligncenter,
    div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .wp-caption {
    	border: 1px solid #ddd;
    	text-align: center;
    	background-color: #f3f3f3;
    	padding-top: 4px;
    	margin: 10px;
    	-moz-border-radius: 3px;
    	-khtml-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    .wp-caption img {
    	margin: 0;
    	padding: 0;
    	border: 0 none;
    }
    
    .wp-caption p.wp-caption-text {
    	color:black;
    	text-align:center !important;
    	font-size: 11px;
    	line-height: 17px;
    	padding: 0 4px 5px;
    	margin: 0;
    }
    /* End captions */

    This is what I see after adding that code to the CSS:
    http://img329.imageshack.us/img329/7554/captionsvv9.png

  14. ccpetersen
    Member
    Posted 5 years ago #

    Well, crap. when I posted it, the page did NOT show the wrap around. Now it does...

    Stumped cat is stumped.

    :0

  15. ccpetersen
    Member
    Posted 5 years ago #

    Okay, I can see how that would tweak the look of it... I'd need to mess with the colors a bit since I think the white border is ugly... but I get your point.

    thanks. I guess this solves the issue more or less. I'll keep playing with it...

  16. ccpetersen
    Member
    Posted 5 years ago #

    okay... so what do I change to change the color of the "polaroid" border and the text color in the border to match my other colors?

  17. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    The text color is the "color:" under .wp-caption p.wp-caption-text.

    The colors of the border are under the .wp-caption, in the 1 pixel border and in the background color of that area.

  18. ccpetersen
    Member
    Posted 5 years ago #

    So it is...I was changing the wrong attributes there, but got them.

    THANK you for all your help.

  19. davidsonsteve
    Member
    Posted 5 years ago #

    My question is similar to ccpetersen's regarding the image captioning. I've inserted the above CSS code and styled it to my likings, but when I try to put two captioned images next to each other in a post, it won't do it - and what I mean by that is it automatically creates a line break.

    Is there really no way to place two captioned images next to each other in a post?

    Also, it works fine and I can get the images next to each other without captions. I suppose an alternative would be to use [gallery], but I really like the current styling of my captions, and would prefer to have a few captioned images in a row (that resembles a row of a gallery).

  20. iroyda
    Member
    Posted 5 years ago #

    My question is also similar to ccpetersen's regarding getting text to wrap with images -- with or without captioning.

    I appreciate your answers above. However I am not comfortable editing CSS code, especially because my site doesn't use the standard WP template, and I don't see where to insert the code changes you give above.

    Can you help me out? Here's the page: http://innervisionportraits.com/wp-admin/page.php?action=edit&post=328&message=4

    Thanks in advance!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.