Symphony.

For a while now I have been thinking of the best way to add illustrations/images to articles. Now without wanting to clone article layouts that I do, what would be the best way to have articles with dynamic placing off imagery.

For example, if I am writing a tutorial and I want to display a figure that is relevant to the paragraph I just wrote, how can I add that image? I guess I could hardcode it, but I'm looking for a simpler solution. I also don't want to have lots of redundant image fields if I can help it.

I was actually working on this sort of thing the other night. My news section has a section link to images. The images section has a text field to enter the paragraph number and also a text field to indicate alignment. Then it's a simple matter of manipulating HTML and XML.

This is interesting, I remember reading this a while ago. I am going to don my Ninja outfit and light some candles, and digest the teachings of Allen Chang.

That is an interesting method, Mark...

Actually Lewis, could you expand on what you mean, perhaps an example?

I'm thinking he means that Images have a section link field that makes them 'children' of an Article, and they also have fields for paragraph number and alignment. So when you're laying out the article entry in your XSL template, you can fetch all its related images and place each one based on which <p> element they go with, and which alignment they should use.

I've done something very similar to what You want, but different way than the one described by Lewis. Also it's on 1.6 and 1.7 so i'm not sure it will work on 2.0 (but as long as nothing changed in how fields data is passed to XSL, it should work :).

There is "photo" field in entries, where author can upload image files (so it's just like in default installation of Symphony 1.7). When author wants to link to one of those photos "attached" to entry, he/she writes "[fig. X]" (actually it's "[patrz zdj. X]" because site is in Polish language, and that's how it is written in books and papers in that language :), where X is number of photo. Rest is done by XSLT (disclaimer: i don't know much about XSLT, so it probably could be optimized a bit. Also server, on which that site runs, does not support XSLT 2.0, so things like regex are not available there).

First define templates (i just added them to the entries component):

<xsl:template match="text()[normalize-space(.)]" mode="filter-photo-links">
    <xsl:choose>
        <xsl:when test="contains(., '[fig. ')">
            <xsl:call-template name="photo-linker">
                <xsl:with-param name="txt" select="."/>
            </xsl:call-template>
        </xsl:when>
        <xsl:otherwise><xsl:value-of select="."/></xsl:otherwise>
    </xsl:choose>
</xsl:template>

<xsl:template match="@*|node()" mode="filter-photo-links">
    <xsl:copy>
        <xsl:apply-templates select="@*|node()" mode="filter-photo-links"/>
    </xsl:copy>
</xsl:template>

<xsl:template name="photo-linker">
    <xsl:param name="txt" select="''"/>
    <xsl:param name="num" select="substring-before(substring-after($txt, '[fig. '), ']')"/>
    <xsl:param name="txtafter" select="substring-after(substring-after($txt, '[fig. '), ']')"/>
    <xsl:param name="path" select="substring-after(ancestor::entry/fields/photo/item[number($num)]/path, 'workspace/')"/>
    <xsl:value-of select="substring-before($txt, '[fig. ')"/>[<a href="{$root}/image/{$path}">fig. <xsl:value-of select="$num"/></a>]<xsl:choose>
        <xsl:when test="contains($txtafter, '[fig. ')">
            <xsl:call-template name="photo-linker">
                <xsl:with-param name="txt" select="$txtafter"/>
            </xsl:call-template>
        </xsl:when>
        <xsl:otherwise><xsl:value-of select="$txtafter"/></xsl:otherwise>
    </xsl:choose>
</xsl:template>

Then in entry template (the one which handles rendering of each Entry), instead of outputting body/more, use this:

    <xsl:apply-templates select="fields/body/*" mode="filter-photo-links"/>

That only creates link to photo, but it will be easy to modify template to directly embed image into text. I can modify it if You want.

Lewis,

So, do you first create the Image entries in your Images section, assigning them paragraph number, then link them to the article entry when you create your article, or first write the article, then create the image entries and attach them to the article.

Does this involve working on two different entry pages to add the images?

I like this idea b/c it keeps the image placement independent of the article copy itself. The progression of this method in my mind would be to have those image entries really be image reference entries, tying a unique image entry to an instance of usage of that image in the context of an article. So you could have multiple image references per image. Thoughts?

Actually Lewis, could you expand on what you mean, perhaps an example?

Let me try to extract what I've done and come up with a simplified version.

>I'm thinking he means that Images have a section link field that makes them 'children' of an Article, and they also have fields for paragraph number and alignment. So when you're laying out the article entry in your XSL template, you can fetch all its related images and place each one based on which <p> element they go with, and which alignment they should use.

Exactly.

Does this involve working on two different entry pages to add the images?

You would create your article entry. Then click on the linked section hyperlink, images and add however many images are needed for the article (along with their position info).

So you could have multiple image references per image.

You could create an images section that has section links to it as opposed to linking the images section to other sections. I'm doing the latter because I do not require the former's complexity.

How about an Ensemble of what you mean.

I really like ahwayakchih's method.

The holy grail for me would be to have the above method, with thumbnail images in the section edit area which you could click on. Once clicked, use a bit of javascript to enter the proper figure syntax where the cursor was in the text area. Very simple for even the most clueless of users.

I hope that makes sense - I need food right now.

Personally I'm going to use another method all together, I'll still have a separate Images section, but instead of specifying where I want the image to be used from the image entry itself I'm going to use a customized image element:

<img name="image name" width="100" />

Then I'd use an XSL template to insert the correct srcattribute:

<img src="/image/100/0/1/fff/image.png" width="100" />

Of course, I'm using HTML for input, so it probably isn't possible to do this with the Markdown or Textile formatter.

Henry,

Once clicked, use a bit of javascript to enter the proper figure syntax where the cursor was in the text area.

For that You would need campfire/module which would add JavaScript to administration page. Also with such module, You could generate img tag directly, without a need for XSLT.

OR different module and different JavaScript, which would hint user about images whicle he/she is typing in textarea. I did something like that for section links (to make it easier for author to include link to other articles :).

row,

I think you can create custom elements with TinyMCE, but I'm not sure about adding attribute values to it. Not too into the javascript myself...

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/custom_elements

I have finally written an article using the method I spoke about above:

Dynamic Image Placement in Symphony

WOW! Lewis!!!! Thank you so very much!!! This is a great and really helpful article!

Lewis, your article is cool.

Thanks guys, hopefully it sparks some creativity.