Text Wrapping Around Pictures
  • I have the newest version of Mars Edit, but I have not been able to do the same things in it as easily as I can in MS Writer. I would love to do everything I need to do for my blog/podcast on my MacBook, but as of yet, that has't been possible.

    I I like to place pictures on my blog posts and have the text wrap around it. I generally left align the picture and have the text wrap around on the right side. I have so far not been able to do this in Mars Edit. I would hope there would be the capability for this and maybe I am just not seeing how to do this.

    Could you tell me how this is done in the rich text mode? My site is http://thegaycountryboy.com. Thanks.

    Wes
  • Daniel JalkutDaniel Jalkut
    Accepted Answer
    Hi Wes - unfortunately MarsEdit's image handling is not as sophisticated as Windows Live Writer. It doesn't do things "out of the box" for images as intuitively as WLW does.

    The best solution I have is to add your own custom "Media Markup" items. When you select the style for an image (e.g. Left, Right), there is an option at the bottom to "Customize". In this area you can add your own custom "HTML wrappers" for the media that is getting inserted, and you could for example add one that has HTML to tag it as having a right margin or a left margin. Unfortunately I don't have a solution yet that doesn't require editing the markup by hand.

    For example, you could add a new image markup macro "Left Image" media markup to be:


    <img src='#fileurl#' alt='#alttext#' title='#displayname#' border='0' width='#imgwidth#' height='#imgheight#' style='float:left; margin-top:1em; margin-right:1em; margin-bottom:1em;' />


    And this would ensure a margin on the top, right, and bottom of the inserted image. Text should flow to the right of this image.

    "em" is a placeholder size that is roughly the size of one character in the current font size, but you could use e.g. 10px instead of 1em or something like that to fix it to a specific number of pixels.

    Daniel
  • Ok, I'm trying this out, making some progress, but no success yet.

    I set up a Custom markup called Left Image.

    I pasted

    <img src='#fileurl#' alt='#alttext#' title='#displayname#' border='0' width='#imgwidth#' height='#imgheight#' style='float:left; margin-top:1em; margin-right:1em; margin-bottom:1em;' />


    into the Opening Markup, and left Closing Markup blank.

    I now get Left Image as a menu item in Format.

    I select the image, and choose Format Left Image, and another object with a ? mark appears to the left of the image.

    See http://itools.clarify-it.com/d/cene9f

    I try to get my text to the right of the image, but it always goes below.

    What I want is the image, which is several inches tall, to be the left border for several paragraphs of text. Or the right border.

    I'm not that fussy on what side the graphic is, but I do need the text to wrap around.

    What am I doing wrong ?

    Thanks

    mark
  • Hi mark- sorry for the delay in responding. It sounds like maybe you are adding the markup to the "Format" menu in the main editor, and not to the "Style" menu in the Media Manager.

    Unfortunately there is no easy way to redo the formatting HTML of an image after it's been inserted. You want to make sure you pick the right style before inserting the image. So in this case you would want to delete the image from the post (and from the Uploads list) and then go back and reselect it with the desired "Style" popup selection.

    If you look in the Media Manager and select an image, you'll find a "Customize" item in the Style popup and it's very similar to the way you (I think) added a formatting macro to the main HTML formatting menu.

    The idea is to define a style for the image that will wrap it up in the desired markup while it's being inserted into the post.

    Does that help?

    Daniel
  • Daniel, is this a bit of the functionality you're hoping to add to future versions of the software? It seems like a sophisticated level of blogging rather than just a basic level where the graphic is always above or below the text rather than having the image to the side of the text.

    EDIT: I followed your advice and it works perfectly. Thanks for the solution! I also changed out the references to "right" with "left" to enable another such image/text placement on the right side of the screen.

    I'm definitely going to use this tip in my blogging with MarsEdit, but will this maybe be something that becomes a default selection and other such image interaction choices?
  • Hi Pleroma - I would definitely like to see nice shortcuts like this as part of a future update to MarsEdit. Can't make specific promises but it is on my mind!
Start a New Discussion

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!