Create An Image Gallery With CCK, Views And ImageCache
This lesson shows how to create an image gallery using CCK with ImageField, Views and ImageCache. CCK is used to create a new "image" content type that contains an upload field for images courtesy of ImageField. ImageCache is used to crop and resize the uploaded images. Views is used to display gallery page and an accompanying RSS Feed.
The premium version of this lesson is encoded at the full 1024x768 resolution as originally recorded.
Bookmark or Share Post- learnbythedrop's blog
- 11771 reads
Subscribe or Share
Recent Drops
Recent comments
- Access FCKeditor Permissions
5 hours 28 min ago - Re: IMCE/FCKEditor Browse Button Now Showing
6 hours 5 min ago - Re: Easy Video Embeds With Embedded Media Field
1 day 1 hour ago - Re: Easy Video Embeds With Embedded Media Field
2 days 4 hours ago - Table Sorting on Archive Page Fixed
2 days 16 hours ago - Re: Upgrading Drupal
3 days 21 hours ago - Re: Upgrading Drupal
3 days 21 hours ago - Re: Image Disappearing
4 days 2 hours ago - Re: Data From A MySQL Database
4 days 5 hours ago - Re: FCKeditor/Ckeditor
6 days 18 hours ago
Comments
Use different name for content type
When you enable the 'image' module, it creates a content type 'image' and that might cause a problem if you already have an existing content type called 'image'
http://drupal.org/node/464622
I would probably call it something different than 'image' just to prevent a potential problem later.
Image Content Naming
That's a very good point. I assumed that those who went with the ImageField and Views combo would not get involved with the image module but there's certainly nothing that prevents the use of both techniques on one site. Thanks for the tip.
Image usage
I know a lot of people might be using the image module for other things rather than just a gallery... like for inline images with a (shield your eyes :O) a wysiwyg editor and image assist.
So I think, even if they aren't using image for the gallery, they should keep their options open for future uses of image.
Thank you
Your video was timely as only after discovering it in the Planet Drupal aggregator, a user asked for this feature. (I had it on the 'to do' list!).
I would be interested in setting up sub-galleries if that were possible. Or more specifically when a user wanted to upload photos about an event that they could easily create a gallery with that event name themselves.
Do you have any pointers on how this could be done? Or do I have to wait for the next video ;) ?
Subgalleries? or gallerys on a node?
On my site I use the viewfield module to display a gallery view of images uploaded on a node.
Then I also have a gallery of images from different nodes.
See my little description here: http://drupal.org/node/308784#comment-1686334
Sub-Galleries And More
I don't have a specific answer for you right now. But I do suggest that you check out the following video from Lullabot because I think they're showing off some things that would help you get closer to what you're looking for. http://www.lullabot.com/articles/photo-galleries-views-attach
Step by Step best for a beginner
@learnbythedrop
I did chance on that Lullabot video too. Thanks for the tip.
Their result is great looking and seems to function intuitively but there is so much left out of the video that you are expected to know about.
As a beginner I much prefer your explanations:- step by step.
@Peter
Thanks for the link - will see what I can understand.
I will keep working at the galleries as I want to get to the top of this, yet another, learning curve!
FTP uploads - never covered in Drupal Gallery videos
Hi,
thanks a lot for your tutorial, but the one thing all the articles and videos about implementing galleries in Drupal have in common is: None of them covers the handling of FTP uploads.
Your example is nice but not really suitable for a live site. You neither have sub-galleries (which I think is a must), nor do you care about mass-uploading of files to be imported into a gallery.
It would be great if you could take care of this next time.
Thanks.
Mass uploads and subgalleries
Stefan,
To do mass uploads just use the image Fupload module http://drupal.org/project/image_fupload for your cck field instead of the imagefield. It integrates well with it.
Thats what I did for this: http://simplistechsolutions.com/content/logo-compilation . Also, that is a 'subgallery' of this: http://simplistechsolutions.com/design-gallery . (see the link to the mini tutorial I posted above)
Thanks for the hint. Still
Thanks for the hint. Still this is not an FTP-Upload but at least something to look at. I will give it a try.
CCK - Views Image Gallery
"Your example is nice but not really suitable for a live site."
You make good points but I disagree with the above statement. If someone wants a basic image gallery where they just want to add single photos every so often then this solution works just fine. I used the same technique to build an easy gallery at http://julietlofaro.com/gallery.
If you're looking to build a community site where users will be submitting a lot of content or have a large batch of photos to upload then you'll need more functionality. In future videos I'll show some more advanced techniques but there are a lot of different things you can do with images in Drupal and a lot of different ways to do it. I certainly won't be able to cover all methods. I just try to break things down into consumable bits so that people can learn step-by-step.
"If someone wants a basic
"If someone wants a basic image gallery where they just want to add single photos every so often then this solution works just fine."
Yep, that's true but I guess the most common thing is at least to have sub-galleries.
Sure I understand that you cannot cover everything and it's not your fault that all the other tutorials also just scratch the surface, but everytime I find a gallery tutorial I hope that there will be ONE person that covers everything to implement a full gallery. I have collected a lot of pieces but there is still the glue missing to stick everything together.
Very interesting screencast
Thanks for sharing this screencast! It is very interesting to see the ImageCache API at work in this scenario.
One enhancement is to add a vocabulary to the images and use this vocabulary (or taxonomy terms thereof) to show a "sub gallery".
Fairly straightforward if I am not mistaken, if you use a list of taxonomy terms as parameter for the view. One image can then be displayed in various galleries (e.g., "trip to the zoo", "elephants", "featured").
Now combine this with EXIF and IPTC data that can be extracted from the images and you nearly reinvented Flickr ;-)
Cheers,
Olivier
taxonomy sub galleries
could you provide more information on how to do this?
It would be great to click on a taxonomy term, and show only the images in a grid view only associated with that term.
Image Sub Gallery
I have to admit that it's not in my particular area of expertise.
Album based image gallery
I wrote an identical tutorial a few months ago at http://jamestombs.co.uk/2009-03-18/create-a-simple-image-gallery-in-drup... which I followed up with an album gallery tutorial, where you would have a gallery of different albums, then going in to each album you would get a gallery set up of that individual album.
http://jamestombs.co.uk/2009-05-12/create-an-album-based-image-gallery-i...
Gallery images not visible to logged out users
This was a very clearly explained tutorial. Thanx.
I am able to create & view the gallery as admin user. However, when i log out, i am able to go to the path, but don't see any images. I checked the permissions settings too, and tried to set Allowed for Anonymous Users for 'view imagecache mygallery' under imagecache module section. Doesn't work still. Am I missing anything?
Gallery Image Permissions
Which permissions did you check? The CCK field is the key. Whenever you add a new field to a content type that particular field has its own permission settings. So I'd make sure that anonymous users have access to see the image field that you created.
Next / Previous links
Nice tutorial, but there is one essential piece of functionality which is lacking: the previous and next links when you are at an image node. I've been searching for this for quite a while and can't find a simple solution for this problem when using cck/imagefield/imagechache and views 2.
Ideally, I would like to build a Flickr-like navigation, which shows the previous and next image as small thumbnails. Any suggestions on this?
Custom Pagers
You can use the custom pagers module to get pagers that would allow users to go forwards and backwards. http://drupal.org/project/custom_pagers
That doesn't give you Flickr-like functionality though. What you would need to do (and I'm saying this as a theory because I haven't done it) is to create a block that contains pagers in order to cycle through the photos. You could try out the Views Slideshow: Imageflow module. It looks pretty slick. I tried it once myself on a test site. http://drupal.org/project/views_slideshow_imageflow
Problems
I just can't get the image cache scaling etc to work on my WAMP server. I get the follwing message when I set up the preset:
warning: touch() [function.touch]: Unable to create file /tmp/testpresetimagecache_sample.png because No such file or directory in C:\wamp\www\modules\imagecache\imagecache.module on line 425.
Subsequently scaled images are not created when I select the display for the content type (the subfolders of the preset haven't even been created). I see that others seem to be having problems with imagecache just in case you're having the same issue. http://drupal.org/node/435418
This isn't the first time that I've not been able to get modules to work via wamp - hence why I always end up working on my live site, which is kind of annoying.
Great tutorial by the way Rob. I'm re-implementing my galleries after having watched it.
Success
Thanks Rob,
I got this to work on my production site (although no luck on my local host). I've chosen to hide the node itself from the user and to instead link directly to the full-sized image. The ability to add a title to the field works really well as lightbox2 presents this below the pictures. Here's a link to my gallery (this page is in Japanese so some of the text may look funny if you haven't got a Japanese language pack installed).
http://www.ishigaki-japan.com/jp/kankou_gyararii
Thanks again for a great tutorial.
Need help!!! I have drupal on
Need help!!!
I have drupal on a localhost with WAMP. My root folder (localhost) is on an external drive (F:). No clue what to do with ImageMagick, where do I install it? how does drupal know where that is? How would I go about it once I send my drupal site to a remote server?
Flickr like navigation
I wrote a blog post howto expand the functionality with a 'Flickr-like' navigation with prev/next thumbnails using the prev_next api module:
http://blog.merge.nl/2009/09/30/previous-next-navigation-image-gallery-d...
Previous Next API
That's very nice. Thanks for sharing.
Thanks for useful screencast!
Thanks for useful screencast!
Thanks
Fantastic. Got me going on the right track.
Using comments
What about comments? I like your use of imageField and views, but I'd also like to add user comments to each photo (imageField), rather than on each album (node).
Is there (should there be?) a CCK module that could attach comments to each image saved by imageField? Maybe it's not even possible.
Comments On Images
There may be a module out there somewhere but I don't know about it. One of the things about Drupal is that comments are only related to nodes.
You will need to create a
You will need to create a content type called Image and have the imagefield only allow 1 image. Then you can have comments on seperate images. You will then need to group the images in an album. You could do this via taxonomy or using a master content type and use node references on your image nodes.
Getting RSS feed to work
Great tutorial especially for a beginner.
Only one hiccup I could not get the RSS feed to work. I followed everthing step by step - but no feed. I did notice that on your screencast when on the views screen and you are setting the path "gallery/feed" above the input field there was your URL for the local site - I do not see this on my screen. Any ideas what I'm doing wrong.
Mike
RSS Feed Settings
When you say that the feed doesn't work I don't fully get it. When you go to the feed address (assuming you set up a path) do you get a 'page not found' error? Or do you get a feed but it doesn't have the correct content in the feed?
Some possible enhancements and a question
Possible Enhancements
1. Use Imagefield Import to batch process the photos. You simply ftp the images to a designated directory and the the module detects the images and allows you to enter title and body information, and then it creates the image nodes for you. It can also populate the title and body from EXIF, IPTC, or file name. It can also handle extra fields, such as gallery_name.
http://drupal.org/project/imagefield_import
http://drupal.mwu.dk/imagefield_import
2. On the Image node type specify a gallery field, and then use it as an argument for views and pathauto. In my example, the view path is gallery/%1, and the argument is [gallery_url], so that I can "create" new galleries simply by creating a node with a different gallery_url. Pathauto is set so that new image nodes are created with the path /gallery/[gallery_url-raw]/[title-raw], so that all new image nodes appear to be under their parent galleries.
Using the gallery/all argument displays all images in their galleries one after another, and still allows another custom view "gallery" to simply list the various galleries.
www.patheyman.com/gallery
www.patheyman.com/gallery/all
www.patheyman.com/gallery/turtles
www.patheyman.com/gallery/test
Question:
Is it possible to reference a field other than the one specified in the argument? For example, my argument and view title are from the argument [gallery_url] (turtles), but I would like for the view title to come from [gallery-title] (Turtles, Archie Carr, and Tortuguero).
Show multiple images in a article
Very good tutorial. If I had seen it before, it was easier for me ;-) But now I'm at this level.
I have a content type (article) with a image field which allow multiple images. How can I orgnise my images when the article is show. Is it only by manipulating the css file ? or by using a gallery view that I can integrate (how ?).
Node Gallery
You may want to have a look at the Node Gallery module. http://drupal.org/project/node_gallery
Hi, I really like your
Hi, I really like your screencast. I have watched it like 5 times! My issue is, only one of my thumbnails shows up in my view. What can I have done wrong? My images are all the same content type. Sorry for a silly question. And thanks so much!!!
Items in View
The number of thumbnails that appear in your gallery is determined by several different things.
1. The number of items in the view - Check to make sure that your view is set to display more than 1 item. Check the "Items to Display" setting.
2. The filtering for the view - Depending on your filtering, you will display more or less content. For example you might filter out unpublished items by selecting Node: Published Yes. Or you could filter by certain categories. Perhaps your filtering is too restrictive to show the content you want.
3. The available content - If you set the number of items to show = 10 and you've only got 5 items that match the filtering then only 5 will show. So you might want to double check /admin/content/node/overview to double check that the content you expect to show up is in fact published and not in a draft state.
imagecache?
Hi; Thank you for your video.
I did set up two imagecaches for crop and resize following your video.
When I created "View" for the gallery by choosing crop or resize in view field, it did not show any preview underneath. If I choose just "image" in there, preview works fine but the images are too big. How can I make imagecahe works?
Thanks;
Sam
ImageAPI error
Enjoyed this screencast, however when trying to recreate it i get the following error.
warning: Parameter 1 to imageapi_imagemagick_image_resize() expected to be a reference..
appreceate any help you can provide.
Thanks
Image Magick Error
It sounds like you don't have the ImageMagik toolkit installed. Go to /admin/settings/image-toolkit and select the GD2 image manipulation toolkit.
Showing the gallery
When i edit the view gallery, i dont see the images in the preview like in the tutorial. I startet 3 times everything from the beginning, but it dont works.
The images are uplodet, but i dont see a gallery.
PS sorry for my poor english
Preview Images
When you say, "i dont see the images in the preview," I assume you mean in the Views window. It's hard to say what it is. If you link to a screenshot of the view settings I might be able to help a bit more.
Goodness, what happened to my
Goodness, what happened to my english there (it was late)? Let me rewrite:
"Is it possible to only use imagecache if a node for a gallery does not specify a custom thumbnail? For example, in create content, I want a user to be able to upload an image, and then also attach a thumbnail in a different image field. If the thumbnail image field is empty, then imagecache should make a thumbnail, but if a thumbnail image fie is specified then the gallery should use the image the user uploaded."
Hopefully this will make more sense. :)
ImageCache Thumbnail
I'm sure that you could do it with the right php code. I don't know how to make the appearance of one form field conditional upon another though. My best suggestion would be to pose this question in the ImageCache issue queue on Drupal.org.
importing images in gallery problem creating new album
I have all modules installed and working, so I created a image album that works, so later I want another image album so I import the images butt I want a new album, butt the images where going to be placed at the existing album so I cannot created a new album.
I am trying to solve this for have a day.
Re: importing images in gallery problem creating new album
This shows you how to create single gallery. If you want to learn how to create multiple galleries when you want see the following comment. http://learnbythedrop.com/forum/image-gallery-for-community-site#comment...
Viewing the images
I had the same problem with previewing the image that one of the other users ran into. Once I created the Image Content Type and the ImageCache UI Presets for Crop and Resize, I tested the upload feature and created a new node using the image content type.
The image uploaded correctly to the server and when I edit the node, I can see the image thumbnail, just like yours in the video but when I tried to preview to view the full image, nothing shows up. Just the node title.
Did I miss something or skip a step? Aside from setting up the permissions for the image presets, are there other permissions I need to set?
Post new comment