img links - media markup template
  • I need to ask about how ME uses the templates for image links. I wanted a custom flickr link, that is I wanted to style the content a bit using CSS so I made a template that looks like this (with added spaces so it displays here)

    < div class="flickrimage">< img src="#fileurl#" height="#imgheight#" width="#imgwidth#" alt="#displayname#">< p> #displayname#< /p>

    What I get is

    < div class="flickrimage">< a href="xxxxxx" title="yyyyyy">< img alt="zzzzzz" width="500" src="aaaaaa" height="334" / >< /a>< p> gggggg< /p>< /div>

    The interesting part for me is the "/ >" ending of img tag. Why is that inserted? As far as I understand, http://www.w3.org/TR/html4/struct/objects.html#h-13.2, there shouldn't be a '/' before the closing '>' here.
  • I'm guessing from the rearrangement of the ordering of the attributes, and the addition of the / that you are inserting into Rich Text mode. Is that right?

    There's a certain degree of having to put up with the editor's default choices when using Rich Text mode, as it has some strict rules for how it generates HTML.

    Generally speaking the Rich Text editor in MarsEdit leans toward HTML5 conventions. I believe this is an example of that, where trailing slashes are more common in HTML5. I don't profess to be an expert about it.

    Is the trailing slash causing any specific grief apart from not expecting it to be there? I think the idea is most if not all HTML4 interpreters should just ignore the slash.
  • No, it's in plain text mode.

    Actually I think slashes is an HTML4 and XML thing. HTML5 is pretty awful when it comes to "strictness" and it depends on which validator you use what is considered legal. So both < img ... > and < img ... /> can be legal.

    So according to http://dev.w3.org/html5/markup/syntax.html#void-element both forms are OK so it all depends on what HTML version themes etc generates.

    I was just surprised that inserting an image added that / and the rearrangement is also something that happens without going in to rich text mode (I think I've been in rich text mode only once)
  • jem - when does the rearrangement and addition of the / happen? Immediately upon inserting the image, or only after you've submitted to the blog? I have a hard time imagining the changes happening in HTML Text mode because it is, generally speaking, very agnostic about the markup it edits. It sounds like something that could be happening on the WordPress end, processing the HTML and returning it modified to MarsEdit.
  • Immediately. I can select an image ... ohh, I now see that I'm not completely clear about one thing, sorry about that, I should have been clearer about that

    This is a flickr image, not a local image. Which probably also explains the rearrangement of the attributes. It does not happen for local images.
Start a New Discussion

Howdy, Stranger!

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