Symphony.

I'm looking at ways to enable authors to easily insert references to content, such as images or other types of entries which should be inserted into flowing text, into textareas.

I have this working:

<image filename="photo.jpg"/>

Via the ninja technique this is transformed into an img element with a src attribute that contains the full JIT image path.

I'm wondering how this could be simplified for authors, taking away the requirement to type pseudo-HTML and enabling them to type something like:

!image photo.jpg

Or using entry id's:

!image 36

!boxout 12

Would this mean creating a custom text formatter that replaces those references with custom HTML, which I would then match and transform? Or is there a better/simpler way?

Looks like a job perfect for Templated Text Formatter, yes it's a custom formatter but you can chain up multiple ones including your standard markdown and make everything quite simple.

You could do a simple regex to match; and the replacement text. Pay attention as the order of chaining might effect the markdown output in some cases.

You could just apply markdown and match paragraphs starting with an exclamation mark in your templates (p[starts-with(text(), '!')]).

@gunglien: superb. I'll look into creating a custom formatter and applying it before(?) Markdown. I hope to support a variety of parameters, such as size, alignment, etc.

@Nils: ha - simple. :-) I have a lot more learning of XSLT to do. I'll look into splitting the text of the paragraph and grabbing the entry id/filename.

Thanks.

We've used this method a long with the ninja technique a lot. Like so:

<xsl:template match="p[starts-with(text(), '!photo')]" mode="ninja" priority="1">
    <xsl:variable name="id" select="substring-after(text(), ' ')" />
    <xsl:apply-templates select="/data/my-photo-datasource/entry[@id = $id] />
</xsl:template>

@DavidOliver what about altering the JS for drag and drop that SSM extension has, to provide the !photo 25 style referenceing?

Thanks for that, Nils.

@moonoo2, hmm, maybe that could work well if the right types of entries could be listed somehow. I'll stick to working with typing directly into textareas for now and come back to that idea later. Cheers.

HTML Panel field and some custom JS would be great here. May look into this as the exact same discussion popped up in work yesterday.

HTML Panel field

Another interesting extension I haven't tried out yet!

Picture the scene: http://jsbin.com/egefi/554

HTML Panel field would render the top panel and markdown would accept it below.

@nils,

I've made a template that matches similar to what you have above and it's working great when the !image 45! style tag is on a line all of it's own.

I was wondering if there was a way to match every instance of this pattern within a P tag using XSLT 1.0? with the number inside the pattern being a wild card.

The reason for thinking this is floating images within text flow if they are inside a paragraph but have them full width if they are the only item in the paragraph.

Could you point me in the direction of what sort of xslt I should be looking for?

Was looking at a ends-with() alternative for xslt 1.0 such as this:

<xsl:template match= "*[substring(name(), string-length(name()) -10) = '!image *!')]">

But I'm not sure how to deal with the wildcard of the numeric values.

Do you need this exact syntax? The easiest way to get what you want is to use an inline (Markdown) element, like _image: 45_ or something similar. You will then get a nested element you can match in your template.

Yeah, that's how I'd do it, then you could match an em for instance whose text node starts with 'image'.

Thanks both.. over thinking it as usual.