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.