Photo alignment with text.

  • Author
    Posts
  • #176335

    Hi! I’m having an awful time with an issue and cant seem to figure it out. Here is the problem. I write text then add a photo and everything is uneven.

    How do I have the text wrap around the photo? And, how to I have the text level with the top of the photo line? Thanks!

    #176623

    wolfieb
    Member

    This is relatively simple to do, but you need to be in Code Editor to do it. When you insert an image, there will be a line of code that starts <img src="http://....

    To make the text wrap, you need to add some code, such as:

    style="padding-right:10px;padding-bottom:0;float:left;" before the closing “>”.

    You can see what this looks like at this page

    #176625

    /nod to wolfieb
    To get the text to wrap, you can also, while in the visual editor, click on the image so that it is highlighted (little handles at the corners) and then click on the left or right text align button in the toolbar depending on whether you want the image at the right side or the left side. Then the text will flow around it.

    #176626

    wolfieb
    Member

    @tsp
    That’s something I didn’t know (but I tend not to use the WordPress editor to write my posts) but certainly sounds easier than messing about with code. Thanks for the tip.

    #176627

    wolfieb
    Member

    @tsp
    Just tried it and it is much simpler than my way. The only down side (for me, anyway, maybe not for others) is that you still have to edit the code if you want to add in any padding, so that the text doesn’t go right up to the edge of the image.

    #176629

    vivianpaige
    Member

    If you put the image in, click on it, icon #12 is available. Click on that icon and it brings up the image link properties. http://faq.wordpress.com/2006/05/15/what-do-all-the-icons-mean/

    I’ve not yet figured out how to adjust the margin (so that the text doesn’t butt up against the image) except manually through the code editor.

    #176633

    @wolfieb
    If you look at the code using my way, it isn’t exactly right from an official html standpoint either. If you click the “clean up messy code” in the extended toolbar though it will make it pretty.

    For padding, if you highlight the image and then click on the image icon in the toolbar, it will bring up a little window where you can add the padding.

    #176634

    Actually it allows for hspace and vspace.

    #176636

    wolfieb
    Member

    @tsp
    Thanks for that, but viewed in Flock it doesn’t seem to work; it initally draws the spacing, and then gets rid of it and puts the text right up against the image. (Although, viewed in Safari it does work – that would seem to suggest the created code is not 100% standards complaint).

    #176644

    vivianpaige
    Member

    You need to adjust the margin as I mentioned above.

    #176646

    vivianpaige
    Member

The topic ‘Photo alignment with text.’ is closed to new replies.