Hi folks,
There is a significant hole in Drupal when it comes to a simple, clean workflow allowing content creators to upload an image and insert it into a piece of content. This functionality has been implemented elsewhere on the web (e.g. Blogger, Facebook, etc.) in a variety of ways. Under Drupal, the 'img_assist' module burdens users with creating an image node and the 'upload' module provides insufficient UI integration that couples images with a text block, rather than with a node.
The post at http://groups.drupal.org/node/3227 discusses the issue, but didn't seem to lead to a solution. I am wondering what solutions you might have implemented (custom or otherwise) to provide the desired simplicity. The upshot of this for newspaper site contributors is that if the tool is difficult or painful to use, they will tend not to use it. This is especially problematic when trying to create blogging interest at a newspaper site, where the potential bloggers are used to reasonable tools for adding images to their postings.
Thanks.
Comments
IMCE now, AM in the future
I like the TinyMCE/IMCE combo, but IMCE doesn't actually get the images into the database.
Asset Manager is still a little rough around the edges, but looks like it is gong to eventually be a great solution to the assets beyond just images.
Bill O'Connor (Lead Developer at Achieve Internet) wrote a nice summary of AM's features here...
http://groups.drupal.org/node/6069#comment-17461
IMCE does upload images
In my IMCE installation, when I get to the window to select the photo I want (the Image/File browser) there is an option at the bottom to upload images to the images directory.
Not a perfect solution
We ended up rolling our own, but it's not perfect. We basically cloned the upload module, limited acceptable files to jpg/png/gif, added a caption field to go with each image, then inserted the images at view time and used thickbox to make them clickable. The only bad thing about this approach is that the user can't size or position the images. Here's an example node with attached images:
http://www.yourclimbing.com/blog-gold_bar
In this example, the user didn't include any captions, but if she had they would show up to the left of the "close" link.
Also, we don't also create nodes to go with the images, but we could have. The best option would probably be to add an optional gallery dropdown in the upload UI, allowing the user to optionally put the image in a gallery.
Image attach?
Out of curiosity, what would be the issue with using Image Attach? Seems to me this eliminates the issue of having to create an image node before creating the content node with which you wish to associate the image.
If you wanted a custom caption, credit etc. to ride with the content node instead of the image node, you'd just create CCK fields for those data types. You could theme the display of attached images using either ConTemplate or the actual node template for the content type in question.
I've built sites with either Image Attach or Image Assist as the method for associating an image with another node, and I tend to think Image Attach is the better method, both in and behind the scenes.
-- Jay Small
http://smallinitiatives.com/contact-jay-small/
-- Jay Small
http://smallinitiatives.com/contact-jay-small/
TinyMCE + arc90's ImgCaption
I've had great success using just TinyMCE with arc90's ImgCaption:
http://lab.arc90.com/2006/07/image_caption_1.php
imagefield?
The previous posts prove there are many ways to do this. But unless I'm misunderstanding the question, I'd handle this with the imagefield module -- http://drupal.org/project/imagefield.
It integrates well with any custom content type. It doesn't create unnecessary nodes. It supports multiple images and it plays well with imagecache module -- http://drupal.org/project/imagecache.
Additionally, instead of creating another CCK field for the caption, imagefield allows an option to provide text for title and alt tags. I'd set up my template to use the text from one of those fields as the caption.
The only downside I can think of is you don't have access to previously-uploaded images.
Resizing, Thumbnails?
Isn't another downside of the Imagefield/CCK approach the lack of thumbnails and/or resizing the image to fit your layout? Or is there a fix for that I'm not aware of. The module page still says...
"Imagefield does not provide thumbnail or derivative generation like image.module.
Views can use imagecache to generate derivatives of imagefield images, but imagecache
can be difficult to configure and is not well documented."
We use it, but only when the users submitting the that type of content are able to crop/resize an image before they upload it.
imagecache
Maybe, but I don't think imagecache is difficult to configure. I think the fact that it offers a lot more flexibility than just resizing an image worth the effort to configure it.
In Imagecache you create "presets"
In Imagecache you create "presets" for as many versions of the image that you like. The presets can scale and/or crop the original image. I am using the combination of Imagefield and Imachecache on my sites and think its fantastic.
By default the images you add to a node via Imagefield just show up in a row under the body (or above depending on the weight of the field). So if you want a different layout, you'd have to create a node.tpl.php file for your content type and mess around with that. So that is perhaps a disadvantage compared to using IMG Assist where you stick the image wherever you want in the body. However on sites I do I don't like to give that much layout inflexibility to users in order to keep the look of he site consistent.
Also, I don't find Imagecache to be difficult to configure at all. This is a handbook page I wrote about how to do an image gallery using Imagefield and Imagecache http://drupal.org/node/144725 which explains some stuff.
Update: Just noticed this: http://drupal.org/node/134086 in the Handbook HowTo section.
Yet another solution
Probably the dumbest of all, but still...
We're using image node + thickbox.
I wrote a quick and dirty script that asks a writer for image node's ID, align position and title and then it generates HTML code and shows this image within some example text (to make sure node ID was correct). It's extremely far from being perfect, but it's much better than nothing when non-geeks are expected to insert html code... .
If you want to try it, an example of image node ID is 3827.