Imagecache + Imagefield Screencast

This screencast demonstrates the recipe for Imagecache and Imagefield (for CCK) to build a system for posting images on your Drupal website. This is a robust and flexible system for handling images and has a bright future with more helper modules born every day.

This micro-lesson depends on prior understanding of the CCK module and the Views module. This example uses Drupal 5 since the Image* modules for Drupal 6 are not available (yet).

Comments

Thank you!
Scary modules goes simply.

Cool! Also useful for us more advanced users that have older sites that are using the image module and is considering if switching to image field and imagecache a good idea? The screencast did not answer all my question but some and it was very clear, simple and pro.

Two years ago I thought that nodetype was the way to go with images, events etc. but lately I seen more and more users are moving towards more fieldbased content. Are you seen the same?

Thanks for the note. The future, which includes RDF, is making a good case for us give a lot of power to fields rather than nodes.

Great. Really great.
Thanks for this instruction.
ryo@drupal.org

Very useful video. Thank you:-)

However, it would be helpful if it also answers the following questions:

1.) How does one accomplish 'media in the flow of the node' when using imagecache and imagefield? With modules such as img_assist, asset and image, you can place any number of images/media wherever you want in the node. With imagefield, it seems you can't unless you have multiple fields for each node type and even then, it seems you can only weight the fields to get some kind of ordering within the node, but not the kind of placement/alignment flexibility offered by the other modules.

2.) How does one handle the alignment of images/media in a node when using imagefield? It seems to call for tweaks to theme files, whereas with the image, img_assist and asset modules, this is straightforward and can be done using the module itself.

IMHO, these two issues really frustrate less savvy users trying to use these two modules together to handle images.

Do you think there is a solution to this?

Good questions. If there isn't a method for this then I am sure there will be one appearing shortly. Imagefield and Imagecache are getting a lot of traction because of their elegance and fluidity, I think its only a matter of time before this well developed bundle has a full deck of features. When those solutions appear I am likely to do more screencasting.

Perhaps contemplate module might help . I read it helps in postioning or displaying CCK fields the way you want ...

Thanks for a nice tutorial and demonstration of these modules.

I was advised to give this a shot by someone in the drupal-forums (http://drupal.org/node/273453), when I asked which image module I should be using. I've tried it out.

My goal: Users should be able to upload images (several per node), teaser view would have small image which links to node, full node would have medium image - medium image would link to original size image, which would also be carried within a page (and not just as image.jpg).

Also, I wanted the images to be watermarked at upload.

The Image module + the watermark module does all this EXCEPT allowing users to upload more than one image at a time. Also it looked to me as if the image module was creating far too many nodes (but I might have misunderstod that and it was the "gallery" extra that did this).

I currently have 680 image-posts, all carrying 3-4 images (at least) per post that are a custom content type. I just want to make it very very easy for users to upload their images to this content type and have the sizing done automatically for them. Also, I want all images displayed on "a page" and not (as I do now) linking to the original image.jpg file to see the original (big) version.

Seems this should be possible, but I'm lost.

I believe the config in this screencast will let you do everything you are asking for on your specific site - except the watermarking.

Imagefield can handle multiple images in one node, and resize and point links to any of those sizes, and more.

As for watermarks, I don't know if there is a module for Imagecache, you'll have to research that.

Yes, the screencast is a great step in the right direction, and If what I want is possible I may indeed have just missed it. (Apart from the watermarking, lets leave that for now)

I want:

1) a smaller thumbnail on the teaser node that links to the node (I can get this! Yes!)
2) a larger thumbnail within the full node (I can get this!) that links to the original image also found within a node (here's where I get confused).

So that the original image can be seen at, say: /node/number?image=original
and the full node is at /node/number

I don't want the larger thumbnail seen within the full post to only ink to /image.jpg - I can do that without any modules help. I'd like the original (large) file to appear within a page.

Image does exactly this, BUT you can only do one image at a time / per node / per post.

Sean,

Fantastic job on the instructional video! I am a former student of yours from over a year ago in the Northern VA area.

Screencasting (let alone facilitating a learning experience) is sometimes not done very well but you make it look simple and easy.

Your screencasts (which include navigating through example scenarios) are very effective tools for beginners and advanced users alike.

Looking forward to future topics.

Rhino, I finally understand your question and did a little research. Because there are only two states of a node, teaser and full, then we can only get some of your solution right.

We can have:

1. A teaser node displaying a small thumbnail linking to the full node.
2. A full node displaying a medium thumbnail linking to the original image alone.

Seems you are right. In this model we cannot have:

3. An additional full node displaying an original image.

But maybe you could cheat a little with Views. You can make a fake third state of your node by building a view that shows only one result, and use a Node ID argument to choose which node is displayed in the view. The view would display a title, body and an imagefield displaying your original image size. Maybe then you can custom theme the node in step 2 pass a Node ID to the argument in your view. That's science fiction right there so I don't know if it would work.

Hahaha, science fiction indeed. That gave me a headache.

Checking the image.module I find that I can not build it to fit more than one image at a time (per node), so its seems wise to spend time on this cck-solution instead. Perhaps simply do "medium" (in teaser) that links to "original" image (in full node) and then declare that all of these photo-nodes are viewed without the right hand navigation etc. (since it will no longer fit, original images are often 2000 pixels wide)

Annoyingly, this forces me to redesign the site quite drastically so I'll work on that first.

"this forces me to redesign the site quite drastically"

The story of our lives. Good luck and drop me a link if/when you have something you want to show off.

Great post, a really useful video, this will totally change the way that I organise the latest site i'm working on.