Training and Development for Drupal

Imagecache + Imagefield Screencast

FAIL (the browser should render some flash content, not this).

If you like this screencast, you can show it by pitching in to a special fundraising effort. (And here's why.)

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

Appreciate this post. Will try it out.

I love your screencasts!! I was wondering, though. I didn't see the ability to choose the cropping area of the original. What if the auto-cropping doesn't choose a good area to use? Is there another module you could install that would give you that type of tool?

Thanks for all you do!

Vickie

thank you, saved a lot of time

This was great! Thank you for the nice video. It was just what I needed.

Thanks a lot. Very well explained and useful.

Thanks for all your webcasts... Brilliantly explained esp for Drupal newbies like myself. I'll be Back!

Very well explained. Thanks a lot!!!

Excellent tutorials - great teaching techniques. As a total newbie to Drupal, you are flattening the learning curve tremendously for me.

Thanks a Lot !!!!

just wanted to say thanks for posting this. helped me out of a big bind.

Sean,
Your screencasts have helped so much. Even when the modules change, the info still helps make sense of scary topics (thinking Feeds).

But can't seem to solve something imagefield related that (seemingly) shouldn't be that hard.

Want to add images with captions to sidebar (block region) without having to manually add blocks:

  • Added imagefield field to content type
  • Use 'CCK Blocks' to have it show up in a bock region in sidebar
  • Realized didn't have a clue how to add caption

Can you point me in a direction?

Thanks a 1,000,000 for sharing your wisdom on Drupal, you make it all look so simple.

You are a great presentor & have the foke wisdom attitude to what you have learned.

CM

Merci! Great screencast, easy to adapt to D6.

Aurélien from Bordeaux, France.

Ah, I love your screencasts! They're sooooooooooo much easier to understand than trying to follow the text documentation. Thanks!

And congratulations on your marriage! I hope it won't stop you giving videos to the Drupal community!! If it does, well, enjoy.

very cool ! thanks , this is very help for a drupal beginner like me who is chasing after a project deadline...

helo sir i am using drupal 6
i have installed
all the above modules correctly
its working fine but one problem

when displaying image field with thick box and lightbox

when i used this the image is not appearing

what went wrong

pls suggest

i will be grate full

Great video! Thanks!

Very useful video. Thank you :-)!!!

Greetz from Belgium.

Thanks doc! awesome!

Hi Sean, As many have commented -- and you by your pointed '(yet)' -- this would now seem to work with 6.x. This entire site is such a great gift, I hate to ask for more... but.

One of the things I like so much is that you include very early and very clearly a specific Ingredients List of the modules you will be using. With all due respect and thanks to poster Jafar I have come to really trust you. So could you please post here an updated Ingredients List for major revisions (6.x for this particular one) or at least "bless" a viewer's comment, or state clearly that you moderate these posts to the point where it wouldn't have made it in without it being accurate. Thanks again for this great resource.

I do have plans to update these screencasts as they become -way- out of date. And by way I mean when Drupal 7 introduces major changes for nearly all of these recipes by including Fields API in core. That means no more CCK.

Until then, the modules' changes are well documented in their own project pages, including new dependencies and everything.

Thank you for this very professional and easy to understand vodcast.

One note:

In Drupal 6 of the ImageField module changes the way you add an Image CCK field. In the first drop-down list, select "File", and select "Image" in the second drop-down list.

I had to poke around for that a little bit.

Thanks again, that was excellent!

This tutorial was hotter than my girlfriend.

Even though the Drupal version is out of date, the content of this screencast still applies to drupal 6.x.

For those with 3+ presets you basically just use views to grab the Content field and then under the extended options are select which preset and how you want it linked (or not linked).

Thanks a LOT for putting this up.

Also, just happened to notice that this screencast is node #47 which happens to be associated with [Link] the curse of 47. Now that you know about the curse it will haunt you Big time.

The modules Sean suggested did just what i wanted with my photo gallery. I'm new to Drupal but already it makes so much sense! I can't believe I messed around with Joomla for so long!

I got it to work, thanks for the great tutorial.

I'm using Drupal 6 and the backend is different than Druapl 5, but the concepts are the same.

I had to download these modules:
1) imageCache
2) imageField
3) imageAPI
4) fileField
5) panels
6) ctools
7) views_bonus

Views_bonus wouldn't work for me unless I had Panels and that wouldn't work unless I had Ctools.

Your my personal hero for the day saved me tons of work and frustration!

Another great Script Sean. Keep 'em coming.

Thanks!

Hey thanks allot for the vid pal. Just when I was starting to get stressed, I came across your therapy site. Awesome.

I also would love an update with views 2. I tried with the new views 2 but did not pull it off.

I just tried it with the latest version of drupal(6.6). Nothing's changed and so far it's working great. My setup is basically having a teaser with a thumbnail cache which opens up to the full node with a medium size image which then opens up the original in a lightbox frame (using lightbox2 module). Also didn't like how if there's more than one image it's stacked one on top of another, had to make them display inline with css. :)

Your tutorial's been very helpful! Thank you.

I second a refresher on image solutions in Drupal 6 (and views2!) Next screencast maybe?

Anyone have any resourced for getting imagecache+cck working together in D6?

This really looks like a great method for uploading images. I loved the tutorial and the extra functionality this method provides.

Despite the scaling and customizability of this method I find that it's far more important for me to offer easier upload solutions that are favorable to say, uploading an entire "roll" of film.

I'm using Multi-Image Uploader for that.

I realize they are entirely different ways of going about things, but is there a way to bring the postlet part of multi-image to this method?

Thanks again.

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

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.

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.

Sean, great tutorial, BUT :)

I might have found a little problem with it.

You say in the screencast at 10:05...

"I could delete it (the photo), I could add more photos if I like..."

Yes, you could add a photo but your current one would get overwritten, it even says so on the page in the video.
So basically Imagefield can handle multiple images in one node only if you add some more imagefields in the content type, right?
And this means some more text fields in between them... hm.

In this form it doesn't look like it's very gracious for articles, or am I missing something?

Thank you, and please enlighten me!

Akos

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.

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.

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?

Have you tried the inline module, it might do what you are looking for.
If you are using tinymce or another wysiwyg, you could try the imce module.

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

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.

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

Thank you!
Scary modules goes simply.

I got one project which design was using desaturated round cornered images to be displayed in the list of teasers in some content type (project content type) - Imagecache Actions helped me with this job ;)

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?

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Most Recent Screencast

See video

Support the Association