Symphony.

Any disadvantages you can think of that come with using WYMeditor?

I was going to have a go at doing an extension for EpicEditor when I get some spare time, but I might not now. :)

I also considered several options, but I'm not sure yet if I should give WYMeditor a try or stick with TinyMCE and "dumb" it down (leave out all the unwanted features) so it's more like WYMeditor. TinyMCE is used more widely and seems more robust to me. (Maybe we should continue our little brainstorming via email or IM ;)

Another possibility?

http://developer.yahoo.com/yui/editor/

http://clearassembly.com.au/platform/live-content-editing/

Henry, neat implementation.

Half off topic, but when it comes to image placement, you can build quite elegant solutions with the default textfield, subsection manager, the system id field and a little bit of xslt magic.

I've recently done something like setting the drag n drop text of ssm to <article-image id="{$sys_id}" />. These tags get parsed by the xsl sylesheet, and here you can do pretty much anything.

@iwyg: Jens and I were discussing trying that approach this afternoon - glad to hear that someone has already made it work. Thanks for the description.

@iwyg

Sounds interesting indeed, but still doesn't solve my particular problem. Not every image inside an article (textfield content) should be rendered in the same way. Authors need at least two different options:

1. Inlining smaller floating images along with paragraphs.
2. Having large images that take the full width of an article.

(Possible solution would be including SSM twice with different drop-text (for different css-classes), but what if you need a third and fourth option). Any ideas?

Lewis has another "quite interesting but still not good enough"-approach.

@DavidOliver also great for videos and code snippets :)

@jensscherbl: You can achieve this as well with my approach. Depends on the options and fields you've set up in your image section. Imagine a tag like <article-image id="{$sys_id}" float="center" caption="no" size="small"/> or whatever you like.

I'm thinking I'd usually want to have the image entry in the SSM containing the options on size, float, etc., so that the article-image tag was as small and uncomplicated as possible. I'll have to try this out!

What about extending MarkitUp like here https://gist.github.com/783934

Have it reference an image section or something... ?

@jensscherbl

On a project I recently worked on, I used about the same solution as Lewis. Only I used a SSM and I had predefined image formats:

• Paragraph (paragraph width)
• Full (paragraph + margin)
• Half portrait (Full cropped in half side by side)
• Half maintain aspect ratio (Half width but not cropped)
• Thumbnail (thumbnail accros margin + paragraph)
• Thumbnail margin (thumbnail stacking up in the margin)
• Thumbnail paragraph (thumbnail accros paragrah)

So the author select a picture, a format and choose after which paragraph (or element) the picture should be displayed. The good thing about SSM is that the author can reorder picture at will.

In my XSLT I would group picture by paragraph and by format. Wrap each group of picture into a div. The div would then have a CSS class applied to it.

If you need images to be embeded inside a paragraph you could have another format and append or prepend the image groupe inside using the html ninja technique. Or use iwyg technique for this particular case.

It ended up making an interesting layout for the blog. (see attachment)

I can show you my code if you are interested.

Attachments:

image-layout.jpg

@antoine

Thanks, will try that out sooner or later and get back to you...

I think I just discovered the missing link and I'm really excited about this. Apparently, buzzomatic is already working on a perfect solution and it looks quite promising so far.

Check it out: Content Field

Check it out: Content Field

You can't install it on 2.2.5 because I believe it chokes on not having an about () method because 2.2.5 declares it as abstract. I haven't tried it on 2.3 yet, but hope to tonight or tomorrow..

@Lewis

Screenshot for you.

It's not ready yet. There are bugs and currently 'text' is the only content type available, but if Rowan continues working on it, this is really gonna be a killer extension for structured content.

@iwyg, @antoine

I'd like to ask you, or someone else, to give the less experienced users (like me) a more detailed explanation of how you achieved what you`ve described above:

• image placement with the default textfield, SSM, drop text
• predefined image formats/positions

Having those predefined formats combined with a drag and drop experience gives the authors the flexibility to create their articles with different image formats and reduces the possibility of inexperienced users "destroying" the design and over-all-look of a page by placing custom image sizes in random positions.

@padexx

Here is what I did:

First I have a Photos section. Photos in that section can be used in several places in the site.

Then I have my Article section for the blog. In this section I have a SSM that link to a (hidden) section call Blog Photos.

The Blog Photos section have a SSM linked to my Photos section, a select box link field with predefined formats, and a text input field for the position (a number).

Here is the logic of my XSL template:

First I save my article content in a variable so I can reuse it later on.

<xsl:variable name="content">
    <xsl:apply-templates select="content/node()" mode="html"/>
</xsl:variable>

I do the same with my pictures, and order them by position

<xsl:variable name="pictures">
    <xsl:apply-templates select="blog-photos/node()" mode="html">
        <xsl:sort select="position-after-paragraph" order="ascending" data-type="number" />
    </xsl:apply-templates>
</xsl:variable>

Then I group the pictures by position

<xsl:variable name="groupedpictures">
    <xsl:for-each select="exsl:node-set($pictures)/item">
        <xsl:if test="not(preceding::item[@handle=current()/@handle])">
            <xsl:element name="group">
                <xsl:attribute name="para"><xsl:value-of select="position-after-paragraph"/></xsl:attribute>
                <xsl:apply-templates select="self::node()" mode="html"/>
                <xsl:if test="following-sibling::item[position-after-paragraph=current()/position-after-paragraph]">
                    <xsl:for-each select="following-sibling::item[position-after-paragraph=current()/position-after-paragraph]">
                        <xsl:apply-templates select="self::node()" mode="html"/>
                    </xsl:for-each>
                </xsl:if>
            </xsl:element>
        </xsl:if>
    </xsl:for-each>
</xsl:variable>

Then I lay down the content and the pictures based on their position.

<xsl:choose>
    <xsl:when test="blog-photos/@items &gt; 0">
        <xsl:for-each select="exsl:node-set($groupedpictures)/group">

            <xsl:variable name="groupposition" select="position()"/>
            <xsl:variable name="grouppara" select="number(@para)"/>

            <xsl:if test="$groupposition=1">
                <xsl:apply-templates select="exsl:node-set($content)/*[position() &lt;= $grouppara]" mode="html"/>
            </xsl:if>

            <div class="image-group">
                <xsl:for-each select="item/photos/item">
                    <xsl:call-template name="blog-image">
                        <xsl:with-param name="title" select="title" />
                        <xsl:with-param name="format" select="format/item/@handle"/>
                        <xsl:with-param name="path" select="image/@path"/>
                        <xsl:with-param name="filename" select="image/filename"/>
                    </xsl:call-template>
                </xsl:for-each>
            </div>

            <xsl:choose>
                <xsl:when test="$groupposition!=last()">
                    <xsl:apply-templates select="exsl:node-set($content)/*[(position() &gt; $grouppara) and (position() &lt;= exsl:node-set($groupedpictures)/group[position()=($groupposition+1)]/@para)]" mode="html"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:apply-templates select="exsl:node-set($content)/*[position() &gt; $grouppara]" mode="html"/>
                </xsl:otherwise>
            </xsl:choose>

        </xsl:for-each>
    </xsl:when>
    <xsl:otherwise>

        <xsl:apply-templates select="content/*" mode="html"/>

    </xsl:otherwise>
</xsl:choose>

Now, instead of using a position field, you could possibly use iwyg solution for the drag and drop.

The rest is just a matter of styling your pictures based on their format.

Thank you!

I'm currently experimenting with another approach for a project with a lot of really long educational articles, trying to get the client to edit their articles in a markdown desktop app and then just copy/paste it into a plain textarea in Symphony (instead of editing stuff directly in a small textarea in the browser).

There are a lot of really great apps available on the Mac, like iA Writer, but most clients are on Windows. The best thing I came across so far seems to be MarkdownPad, but I would really appreciate if somebody could recommend some other nice looking and easy to use markdown editors for Windows, maybe even with Markdown Extra support?

vim? Sorry, couldn't resist.

What if you create a small extension that, let's say, generates previews on the fly (or an demand). There're some promising javascript based projects out there, if you want to do conversion client side.