Symphony.

Hi all,

I've recently started developing with Symphony and I'm absolutely loving it! XSLT is all very new to me but I'm getting there thanks to a lot of poking around on the forums and some extensive googling.

One of the things I really want to provide for authors, is the ability to float or align images within text while avoiding WYSIWYG. Since I am no php developer I have come to a solution using Subsection Manager, section fields, the ninja technique and css which I would like to share.

Basically, an author can drag and drop images inside the textarea using subsection manager and pick an alignement option for it from a drop down inside the image entry (see attachment). This of course limits the scope for re-using images across sections, however images will rarely be used in this way for this site, if ever so I'm not too bothered.

So here is the code.

<xsl:template match="portfolio/entry">
<h2>
    <xsl:value-of select="title"/>
    <xsl:if test="$is-logged-in = 'true'">
        <a class="edit" href="{$root}/symphony/publish/{../section/@handle}/edit/{@id}/">Edit</a>
    </xsl:if>
</h2>
<xsl:apply-templates select="description/*" mode="html"/>
<p class="genericMore"><a href="{$root}/portfolio/">Back to Portfolio</a></p>
</xsl:template>

<xsl:template match="//img" mode="html" priority="1">
<xsl:variable name="currentimg" select="."/>
<xsl:for-each select="/data/portfolio/entry/images/item/image-title">
    <xsl:if test=". = $currentimg/@alt">
        <xsl:variable name="currentalign" select="../align/item"/>
        <xsl:element name="img">
            <xsl:attribute name="class"><xsl:value-of select="$currentalign"/></xsl:attribute>
            <xsl:attribute name="src"><xsl:value-of select="$currentimg/@src"/></xsl:attribute>
            <xsl:attribute name="alt"><xsl:value-of select="$currentimg/@alt"/></xsl:attribute>
        </xsl:element>
    </xsl:if>
</xsl:for-each>
</xsl:template>

<xsl:template match="//*[child::img][not(text())]" mode="html" priority="1">
<xsl:apply-templates select="* | @* | text()" mode="html"/>    
</xsl:template>

The first template is simply calling various fields from a portfolio entry.

The second is the one I was struggling with. It is basically looking for all img elements, matching the image alt attribute with the image-title element which is created for each image, then replacing the matched img element with a new element containing all previous attributes plus a class value picked up from images/item/align/item.

The third removes p tags wrapping imgs if no text surrounds the image.

It works great but I know this is simply not the best way to do it as it involves a lot of manipulation.

I would love to hear your thoughts on this and please feel free to tell me if this is convoluted or plain wrong! All suggestions for improvements are welcome :) Thanks in advance.

Attachments:

symphony-img-floats.png

@4ll4n - Here's an article that @Lewis did on his blog, called "Dynamic Image Placement in Symphony," that might be helpful to you.

Great stuff, nice idea.

There's also the Alternate Text Attribute Splitter utility so you can embed this information in Markdown if you prefer.

Thanks for the pointers, they'll come in handy.

The attribute splitter utility looks good, only I fear my authors' somewhat limited technical skills would yield strange results with that one :P