Symphony.

Nick had mentioned I should start a post mentioning this. One of my hesitations right now in really using Symphony on all of my client projects is how it handles images. Specifically in two areas:

1. In WYSIWYG editors (TinyMCE is the one I’ve been using) its difficult to add images through the provided editor, for the most part, it requires uploading an image that has already been resized through FTP, and then finding the full URL, and pasting that into the pop-up TinyMCE editor. That is all near-impossible to explain to a client.
2. I wish there were more specific Image upload fields similar to the current file upload field but make it more specific to images. Possibly adding alt text? a thumbnail? ability to crop images? other ideas?

I just think that a good modern CMS should be able to elegantly handle images. I love Symphony though, just want ya’ll to know that and that I’m not just complaining. Thanks for all the hard work so far.

Yes, this is certainly one of the bigger challenges. Nils’ Mediathek extension is a major step in the right direction, though, so maybe have a look at that.

As for your second question, try thinking about images as a content type (i.e. as a section), rather than as a field. The file upload then is only a part of the entry. You can also specify alt text, a caption, a title, a credit. And thanks to the JIT Image Manipulation extension (a beautiful bit of sorcery if there ever was one), you could even have entries include fields with desired dimensions for resizing or cropping and so on…

All of that said, though, the problem still remains, especially on the user/entry level (as opposed to the developer/page level). I’m not sure there’s a one-size-fits-all solution (but then again there are lots of folks around here who are much smarter than I am, and I’d love to hear their thoughts). Ironically, it’s often the things we love most about Symphony (in this case, its flexibility) that end up creating our most intractable problems. Hopefully this discussion will help us figure it out :)

I’m not sure there’s a one-size-fits-all solution

Agreed. I generally don’t provide a way to manage images that gives the client any power at all… because I know they’ll break things. They’ll try and upload a 10MB JPEG from their digital camera and expect it to work in a web page.

Perhaps a sensible starting point would be to look at the existing CMS offerings and to see how they achieve this. Wordpress, Drupal, Joomla, Expression Engine.

From my memory of Wordpress several years you would upload images and drag thumbnails into the WYSIWYG editor. Pretty clunky.

What are the alternatives?

An image-specific upload field would be a good start. A basic implementation could let you specify a number of sizes in the field/section definition and then provide links (with appropriate text-formatters) on the Publish screen for inserting.

@Makenosound: I bet it wouldn’t be too much to add some of that functionality to the Mediathek extension. JavaScript could be used to grab the url to the selected image, then – with the JIT extension installed – you could have buttons that add the appropriate variables to the image link. Then, once you have the the desired URL, pass it to the text area.

I think the hard part is setting up an abstract system to adding images that could be modular. What if you need captions? A class added to the image? How granular do you want to get? There’s a lot to think about. Wordpress now does something pretty decent, but you only have a few options for image sizes. If you want to be more granular you have to resort to the browser resizing the image.

Here’s how Movable Type handels images

@nick:

I generally don’t provide a way to manage images that gives the client any power at all… because I know they’ll break things. They’ll try and upload a 10MB JPEG from their digital camera and expect it to work in a web page.

Approved. I would never encourage clients to freely insert images into articles. They would surely mess the website up… (This why I don’t even use WYSIWYG editors on my websites.) Instead I always try to find a Symphony-like way, e.g. link images from a gallery section to entries and control the output via XSLT.

The discussion is often about features vs simplicity. If it’s hard to have both, I go for simplicity, because this will make your client much happier in the end.

@pole: Do you really have clients who could manage the Movable Type way??? (It might even be easier to upload an image to a “files” section in Symphony and insert it into an entry using Markdown.)

BTW: I really hate those “align” buttons in some WYSIWYG editors…

I’ve never used Movable Type for a client before, but I used Wordpress and handling images is very similiar on those platforms. And I’s possible to explain it to the clients, believe me :)

As far as I’m concerned the “Symphony” way could be something like this:

Image field (options for administrator/developer):

• ability to choose a destination directory
• max width, height and size
• assigned image class in css
• filetype validation
• optional thumbnail creation - width, height, prefix(filename)

inserted in Images Section (with title, description and any other fields).

Media(thek) field inserted in Entries/Articles/Blog posts/Static pages Section associated with a particular Images Section (options for authors):

• to create/upload new image
• to choose from the images uploaded before in the section
• with information like image title, filename, url, width and height
• with optional thumbnail (with info on filename, url, width, height)
• with ability to chose image float - none, left, right (which adds a float style to img) in my opinion it’s necessary that client can control that, but text float it’s to much

BTW: I really hate those “text align” buttons in WYSIWYG editors too :)

An interface for using JIT Image Extension in content editing would be also nice.

nickdunn: I generally don’t provide a way to manage images that gives the client any power at all… because I know they’ll break things. They’ll try and upload a 10MB JPEG from their digital camera and expect it to work in a web page.

michael-e: Approved. I would never encourage clients to freely insert images into articles. They would surely mess the website up…

I’m sorry, but I completely disagree with you guys here. You limit the client wayyy too much when you have to program every little thing into the layout. Lets say you’re creating a blog for them, and they want to be able to add an image, so you make a little upload field that resizes it automatically using Jit and puts it on the right side of the blog post. What happens when they want 2 or more images? What if they want it on the left side, or want it a different size altogether?

What you are describing sounds to me like the client would have to come back to me and ask for more “features” whenever they can’t do something! That’s frustrating for both me and the client.

I understand that some categories of content make sense to limit things. For example a product section you might have them upload a few images (front, side, back, etc) and then not give them any freedom to do anything else. But I think you are entirely limiting Symphony as a CMS when you’re not considering blog posts, and just typical website Pages as content. You can’t predict what they’re going to want to add in the future, and they need some amount of freedom to add what they want.

I know its a hard balance because none of us wants Symphony to be Joomla or something where the client could potentially move everything around themselves and completely mess up your hard work. But its stupid to limit Symphony so much that only programmers can accomplish anything with it. It’s supposed to be a tool, right? So lets work on making a tool that can be flexible, while still giving a lot of control to the designer/programmer.

I kinda of agree with both camps here! Horses for COurses as they say.. Outlining to the client what is possible and what isn’t from the off, is what I’d say is key here.. sussing out whether they are likely to want full control or limited control of structure and advising them what’s gonna suit them best.. I am at present in a debate with a client about the freedom to place images in posts as they so wish…. and first thing they do is upload a 2mb file they won’t fit on the page.. TheJester12 the select image from upload area in a drop down was my first solution to this.. but then reading further, the (what if I wanted to add more than one image?) kicks that idea in the nuts - (at least when I start thinking about how it would be contructed) the debate for me at least is still open..

Have started to think Nils# mediathek is quite a usefull featured extension..

Am setting it up as the sole method of inserting more than one image in an article and having a select box with Left or Right as options in order to use the left or right values as class attirbutes for floats.. so I can allow the client to add a new post with an article of text and they can vary the position of the images attached to the post and have them stacked one on top of each other, either floated left or floated right, based on what they select from the select box. Lets see how this goes eh!

moonoo2 - how’d this go for you? I’m curious as I’m working on a project that will require images to be uploaded. It’s easy enough for me to control the layout/align for them and I can suggest a Windows image re-sizer for them to handle properly sizing the images “before” upload time, but it’d be sweet to have it auto-resize too. I’m thinking of using imagemagik or something for certain areas of the page and caching the images.

@ashworth - check out the image formatter utility i wrote. the nodes used within that one are kind of specific to what i’m working with, but if you read through the xsl, you can see where i make these declarations. this will always fall back to a default value though. this uses the JIT image resizer symphony comes bundled with.

this also assumes that you give the option to the user to define the width and height values.

this method is used for dynamically resizing blog post images that the user uploads and includes in their post.

I have just started experimenting with Symphony. Long time Joomla dev, but I need something besides “article” and URLS that don’t duplicate.

I was also looking at ez publish this week. It has a GUI WYSIWYG for text input and had image manipulation. One of the things I really liked about EZ is that everything is kind of an object and has a unique id, any piece of content has a unique id. So you refer to a picture like ez://id# or something, and you can incorporate it. It also stores all other “pieces of content” that are related to each other. It would seem that in the symphony way you would create another page type and just need to manage the relationship. However, the gui does make it easy to upload on the fly, and then different classes exist (should be even easier with xslt) for how to display, e.g. with caption, and what size. I am sorry its a little beyond me so I may have mucked the explanation here. More info about the image datatype

In my opinion image management is one of the few BIG things that Symphony is still missing. I like Niels’ Subsection extension, I think it’s a step in the right direction. However, what I imagine is something like the subsection extension with the following functionality, additionally:

• After adding images to an entry, you can drag them over to the text box and thus define their position within the entry. This is already implemented, but I think that the text box string should ideally only include an id of the image (and not the whole domain etc). Thus the image will stay intact when you change the domain or location of the site.
• Also we should not use the Markdown image syntax but instead develop our own, so that people can also define the alignment of the image (float left / right) and the height / width (using JIT) right within the textbox without being a Symphony Ninja ;-)

Well, actually I agree to pole’s description about how this should be like. It seems to me that this should be easy to implement since almost everything is already there with Niels’ Subsection extension.

What do you think about it?

PS. I just saw that the first point has already been requested and Niels wants to implement that with version 1.1, so I guess it’s just a matter of time :-)

For the second point I like to create some HTML Ninja Templates like the Alternate Text Attribute Splitter to define your own custom syntax for the control of the display and attributes of images and other elements.

For the first point I added the option to output the entry ID in the “Custom item caption” option of the Subsection Manager but I never really used it because you can usually reference the image entry by its name or something, provided the image is selected in the Subsection Manager and has the according XML output. This way you can use all the fields from the image entry, like a caption, and mix it into your Ninja Templates.

And as a (temporary) solution for domain problem in image src-attributes you can use something like

<xsl:template match="img/@src" mode="html">
    <xsl:variable name="src">
        <xsl:choose>
            <xsl:when test="starts-with(@src, $workspace)">
                <xsl:value-of select="substring-after(@src, $workspace)"/>
            </xsl:when>
            <xsl:when test="starts-with(@src, '/workspace')">
                <xsl:value-of select="substring-after(@src, '/workspace')"/>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="@src"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:variable>
    <xsl:value-of select="$src"/>
</xsl:template>

to strip the domain.

That is basically my setup, pretty close to pole’s description.

Thanks a lot for the hints! With every little discovery I make about Symphony, I like it even more :)

Well, another question:

I have a simple gallery on the project I’m making now: Just images and description. The images are divided in two categories.

First, I only had one gallery section for all images, had one entry per image and was using three fields: a simple upload field, a page select box in order to choose which category the image belongs to (i.e. on which page it should be shown) and an entry order field. But I noticed that this quickly gets confusing since there is no thumbnail / preview capability in the backend for file uploads and when you have 50+ images that’s not convenient.

Now I’ve switched and I’m using three sections: one section just for the images + description, the other two are for the categories, each having only a Subsection field and they are both static. Now I can see the images per category at a glance and easily add, reorder and unselect images. However, it’s really hard now to find images which are not used in any category (i.e. not shown at all)… so I don’t like this solution so much, either.

So, I need either a way to

• show thumbnail images in the backend while only using a simple upload field or
• find a way to highlight all images in the backend interface which are not linked to any other section using the subsection extension.

Actually, I’d like to have both. What is the best way to accomplish this?

I haven’t used it, but does the Quick Preview extension do what you want?