Symphony.

hi symphony people.

i have a question for you.

I’m re-creating template and I’ve found a problem I don’t know how to solve.

Basically, in template there is image in article which has class=”float-left” .

That makes text wrapped around that image nicely, from top till bottom.

Now how would I apply that for image inside article, but not for every image in symphony article, but only for one, or only for chosen ones.

oh, i guess it might be important to mention i have mark it up extension installed, and enabled.

Easiest would probably be to hand-code it. Does MarkItUp allow direct HTML input?

as i can see, no it doesn’t.

Well, you’d probably either need to switch to something that allows you to directly input HTML or come up with some other markup/XSLT workaround that allows you to directly target and transform your selected images.

what would allow me to input HTML directly, and could I after that still use MarkItUp?

Just did a quick test. You can directly input HTML into a MarkItUp textarea. So while you’re composing your entry content, you can just throw an img tag—like <img src="your-image.jpg" alt="title" class="float-left"/>—right into the text.

you can just throw an img tag—like <img src="your-image.jpg" alt="title" class="float-left"/>—right into the text.

“float-left” is a bad class name: “W3C - Use class with semantics in mind“!

@kauiwe: Fair point, but I wouldn’t say it’s a hard an fast rule. Semantic class names are great if there is an appropriate content descriptor, if there’s not then I think it’s better to be explicit about the presentation.

I’m with Max on this. In my opinion id attributes should always be descriptive and semantic. But class attributes less so. Sometimes it’s simply impractical.

Well… the point is that whatever template diomed is using requires that class name, and we’re trying to help him get it in there ;)

Ah yes, sorry.

It’s not the simplest of methods, but using the Ninja HTML technique to catch images from this field and add them dynamically with XSLT?

Example XML:

<data>
    <articles>
        <entry>
            <text>
                <p>This is text with an image <img src="image.jpg" /></p>
            </text>
        </entry>
    </articles>
</data>

Example XSLT:

<xsl:template match="data">
    <xsl:apply-templates match="articles/entry/text/*" />
</xsl:template>

<xsl:template match="img" priority="1">
    <img class="float-left">
        <xsl:apply-templates select="* | @* | text()"/>
    </img>
</xsl:template>

<xsl:template match="text//*">
    <xsl:element name="{name()}">
        <xsl:apply-templates select="* | @* | text()"/>
    </xsl:element>
</xsl:template>

<xsl:template match="text//@*">
    <xsl:attribute name="{name(.)}">
        <xsl:value-of select="."/>
    </xsl:attribute>
</xsl:template>

See here.

@ czheng, thanks. that worked.

@ Nils - this really is interesting, however I don’t really understand where would I put all that so I went with easier sollution. Sorry.

Maybe you could explain it a bit better, where all that code needs to go, in existing templates, that are in utilities folder. Like if I put XSLT in get-article.XSL where would I need to put XML?

Well… the point is that whatever template diomed is using requires that class name, and we’re trying to help him get it in there ;)

You are right. My comment was only a short notice: With the next redesign the image has another alignment - maybe?!

Best regards, Kaiuwe

@nickdunn, @nils … I had the same thought initially, but the issue is that he doesn’t want to apply the class to all images, only some. So even if he used the ninja technique he’d have to somehow differentiate those images in the markup, which means he’d have to hand code those tags no matter what.

@diomed here’s the technique in question, btw: http://chaoticpattern.com/article/manipulating-html-in-xml/

@ Nils - this really is interesting, however I don’t really understand where would I put all that so I went with easier sollution. Sorry.

Have you read the article Craig and I linked to above? I use this technique all the time and it works just great …

@nickdunn, @nils … I had the same thought initially, but the issue is that he doesn’t want to apply the class to all images, only some. So even if he used the ninja technique he’d have to somehow differentiate those images in the markup, which means he’d have to hand code those tags no matter what.

Well, it would be possible to do something like this in your backend textarea:

This is text.

FLOAT: image.jpg

This is text, too.

Assuming you are using Markdown or Textile the resulting HTML should look like this:

<p>This is text.</p>
<p>FLOAT: image.jpg</p>
<p>This is text, too.</p>

You could then change my example code above like this:

<xsl:template match="data">
    <xsl:apply-templates match="articles/entry/text/*" />
</xsl:template>

<xsl:template match="text//p[starts-with(., 'FLOAT: ')]" priority="1">
    <img class="float-left" src="{$workspace}/{images}/{substring-after(., 'FLOAT: ')}" />
</xsl:template>

<xsl:template match="text//*">
    <xsl:element name="{name()}">
        <xsl:apply-templates select="* | @* | text()"/>
    </xsl:element>
</xsl:template>

<xsl:template match="text//@*">
    <xsl:attribute name="{name(.)}">
        <xsl:value-of select="."/>
    </xsl:attribute>
</xsl:template>

The end result will look like this:

<p>This is text.</p>
<img class="float-left" src="/workspace/images/image.jpg" />
<p>This is text, too.</p>

I’ve been doing this on my own site. It’s the reason why I ended up creating a drag and drop feature for the Mediathek field …

Nice :)

Yes, cool.