This tutorial will guide you through how to create a simple gallery within Drupal 6 using CCK, Views and a few more custom modules. You can see an example of what the tutorial will create by visiting http://gallery.jamestombs.co.uk/
This tutorial was written with the following versions of Drupal and modules:
- Drupal 6.10
- CCK (Content Construction Kit) 6.x-2.1 (6.x-2.2)
- Views 6.x-2.3 (6.x-2.5)
- Filefield 6.x-3.0-beta1 (6.x-3.0-rc1)
- Imagefield 6.x-3.0-beta1 (6.x-3.0-rc1)
- ImageAPI 6.x-1.5 (6.x-1.6)
- Imagecache 6.x-2.0-beta8 (6.x-2.0-beta9)
- Lightbox2 6.x-1.9
Update: Modules have been updated to the latest versions as of 20 April 2009, version numbers are in brackets after the links above.
Installation
Install Drupal as you normally would and extract each of the modules to the /sites/all/modules directory. You should have a directory structure like the following:
When logged in go to /admin/build/modules and enable the following modules:
- Content
- Filefield
- Imagefield
- ImageAPI
- ImageAPI GD2 (unless your server is configured for Imagemagick, then enable the ImageMagick module instead)
- ImageCache
- ImageCache UI
- Lightbox
- Views
- Views UI
Once you have ticked the modules, press Save configuration.
Imagecache
We need to create 2 presets for our images, one will be a thumbnail to show in the gallery and a second to show within the lightbox.
Navigate to /admin/build/imagecache and click Add new preset.
Set the preset Namespace to thumbnail. Click Add Scale and Crop, set the width to 180 and the height to 120.
Then create a new imagecache preset with the name lightbox. This time select Add Scale and set the width to 800 and the height to 600.
CCK Imagefield
First we will set up a new content type for our images which we will call Image. Navigate to /admin/content/types and click Add content type.
Set the name to Image and the type to image. You may enter a description if you wish.
Under Submission form settings, delete the text from the Body field.
Depending on how you want to set up the gallery, you can change the Workflow settings so that images aren’t automatically added but are added to an approval list, for this tutorial we will make all images published, so untick Promoted to frontpage and leave Published ticked.
Under Comment settings, set comments to disabled.
Save the content type.
Next to the Image content type click manage fields. In the Add New field area, set the label to Image and the field name to image (to make it field_image), for the Type of data to store, select File then for Form element select Image. Press Save.
Under Global settings, tick the Required box and set the Number of values to 1. Leave the List field and Description field to Disabled.
Then press the Save field settings button.
Now click the Display fields tab at the top of the page.
Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox.
Now under /node/add/image we can add an image to go in to our gallery.
For now create 3 or 4 images.
Under /admin/content/node you should now have some nodes.
Now we will set up a view to display these nodes in a gallery.
Views
Navigate to /admin/build/views and click the Add tab at the top of the page. Set the view name to something like gallery. Leave View type set to Node.
Set the title to Gallery. For Style set to Grid then chose 4 columns and set Alignment to Horizontal.
For Use pager set to Full pager. Then for Items per page, set to a multiple of 4, I am going to use 16 to give us a 4×4 grid of images. If you wish, you can set Use AJAX to Yes to stop the whole page being loaded on the pager.
Add the following Filters:
- Node: Published = On
- Node: Type = Image
Under Fields select Content: Image (field_image). Set Label to None and change Format to Lightbox2: thumbnail->lightbox.
Under Sort criteria you can set this to what you want. I am going to set them to newest first. Select Node: Post date and set to Descending.
On the left select Page from the drop down and click Add display.
Under Path set to gallery.
Press Save.
Now if you navigate to /gallery you can see your gallery in action.
Once you upload more than 16 images which we set our Items per page to, a pager will appear.
You can see a working example of the gallery in action at http://gallery.jamestombs.co.uk/gallery
Update: There may be cases where the image isn’t uploaded to the image type when a user submits the node add form without uploading the image. This will show up as an empty section within the gallery and the node will be submitted with no image, but Imagefield will not tell the user that this is a problem even if it is a required field.
To stop these empty image types showing in the gallery, you will need to add a relationship for the image and set it to a required relationship. This way the image node will not appear in the gallery unless there is an image attached. You could then set up an additional view to find out which image nodes don’t have an image attached.
222 Responses to “Create a simple image gallery in Drupal 6 using CCK and Views”
Thanks, nice tutorial!
Do you by chance know a fairly straightforward way to automate this? If I have a directory with 2,000 images, is it possible to do it with a script? Thanks!
To do a bulk upload of images, the best way is to probably create a node type for gallery rather than image. Then if you wanted to group the images, you could create a new gallery node type. You would obviously need to change the image CCK values from 1 to unlimited, then use a module like http://drupal.org/project/image_fupload to upload multiple images at once to the gallery.
The only other alternative, is uploading the images to the server and creating a custom script to create a new node for each image, which could be done if the image title was the filename of the image.
Dear
I apply these settings but there is no image show in the view “gallary”
can you plz tell me whats the problem
regards
If you look in the source code, is the HTML present for the images?
If not, are you sure you uploaded the image? I find alot of people browse to the image then click submit rather than clicking upload then submit, which will result in empty results in the gallery.
What you may want to do is change the view. Add a relationship of the Content: Image – (field_image) and set it as a required relationship.
I ran into one issue following your tutorial (not complaining) I don’t know where I would have ended up with out it. My problem was that the images don’t show up for unauthenticated users. Any additional help would be appreciated. If not, thanks for getting me this far.
Hi…….Thanks for a good tutorial.I have uploaded the images in gallery and it is working great.But i unable to view the image in search results page when i did search.can u give the solution pls.
@Shashank, see the update at the bottom. This might help.
@Kyle, you will need to go in to permissions and make sure that anonymous users have the box ticked to view the imagecache thumbnail and lightbox.
This is a very thorough tut, and is very close to what I have done. The difference is I created a photo_gallery content type and added a single Image field with Number of values: set to Unlimited. I also used Lightbox2: slideshow as well. I am using Drupal 6 and the latest versions of the plugins.
I created new content and added a few images to it. I created a view with a single field – my new Image filed from the new photo_gallery content type – and filtered to my photo_gallery content. I created a display and a path and everything worked perfectly.
But I also want the Body text from my new content to show up in the view. This is where the problem came in: I went back to the view and added in a new field – Node: Body – which contains the text. But the body text then displays multiple times, under every thumbnail image in the gallery, instead of once at the top of the page.
I’m pretty new to Drupal, so I am probably overlooking the obvious… any ideas?
Thanks.
What sort of view layout are you going for? Is it a gallery using grid view?
If you are setting up a view to override the node view, then you would want to have the header text of the view as the body text, but don’t think you can do that.
I am going for a simple layout and the view style is Grid.
I could display the new content page directly and not use a view at all. This displays the page body text and title correctly, but also displays the photo thumbnails in a single column, instead of a grid.
Thanks.
I have a feeling the best way would be to use the node view and use a theme hook in a custom module or create a node-image.tpl.php template file in your theme folder to have it display the way you want.
Ok,thanks, I’ll try that.
Also having the same problem where images are not displayed in views. I’m positive I uploaded each photo prior to submitting. I’ve checked the permissions, the html is showing the img scr and the files are in the corresponding folders. But when you got to admin/content, it will not display the photo, it will show a thumbnail but not the image.
Also, should point out that for this step:
Under Fields select Content: Image – (field_image)
There is no “Image – (field_image)” option
There is a “Content: Image (field_image)” option – don’t know if this is the same thing or not. Using latest versions of modules as a Apr 15
Thanks for the tutorial, it’s very easy to follow!
If i would like to group photos in albums, what would be the simplest way to do this?
Cheers
@nickels,
Have users got access to view the lightbox images?
And I probably typed the field name wrong, yours looks correct without the ‘ -’
@fox,
Easiest way for an album based gallery would be to set up a content type called Album and create a CCK field called Images and set the amount of values to unlimited. Then you can create a view using the album content type and show only the first image from the CCK Images field. I will write a tutorial on how to do this in more detail in the coming weeks when I get a moment.
Cool, I’ll look forward to that :)
Wow! Great tutorial and is the best I’ve seen for Drupal 6. Kudos!!
I have a problem. “Under Fields select Content: Image – (field_image). Set Label to None and change Format to Lightbox2: thumbnail->lightbox.” i do this on “test server” but on “main server” i dont see “Content: Image – (field_image)”. I heve done everything the same and i dont knew what could be wrong.
@Andrew, Thank you.
@Soban, Try clearing out the cache tables in the database. Is the CCK field definitely set up in your content type?
Hello james and everyone,
I have similar problem like nickels. I have followed exactly the steps as in the tutorials, but the images dont get display in the gallery. When i go to image content under admin/content/node i get to see the thumnail of the image and also the images are uploaded in the drupal directory.
Also in the VIEW SOURCE i find the images source.Can anyone tell me what i am doing wrong? Any suggestions would be greatly appreciated.
Regards,
judef
Do you have a live link with this happening or is it on a test server?
Is it just a case of the images not showing within the view but showing on an individual node?
Hi james,
Its on my local machine. The images are not shown in individual node also. I found that the whole image is displayed in individual nodes if we select “Image” Instead of “Lightbox2: thumbnail->lightbox”. Is it a problem related to Lightbox configuration?
@judef,
Possibly. It might be worth going to the admin/build/modules unticking Lightbox2 and then making sure it is uninstalled and either try to reinstall Lightbox2 or install Thickbox.
Do you see the images logged in as admin (uid 1)? If you do, but not on any other account, you will need to go to User management -> Permissions and set the view imagecache permission for each role.
Hi,
I’m trying to do something like this, but instead of uploading photos by a form manually, i would like to show images dynamically reading their url from an Atom/RSS feed (without saving it on a database) and even without a lightbox large image, just thumbnails. Do you know if exists a module doing that or what changes i should do to here to get it?
I’ve been googling a couple days but didn’t found a solution.
Thanks
@larry,
I doubt anything will be out there that will do specifically what you want to do.
You will need to take the RSS feed and draw all the URLs out using simplexml or something similar, then download the image and create a thumbnail for it.
You would have to somehow save the data, otherwise every time the page is reloaded, it would have to do the process again, although you could check to see if the thumbnail exists.
Thanks for the answer :)
I’m actually using session vars to save the feed data, but now i need to know where pass my session array to the view. I’m debugging the module “views” but I don’t know where tell him “take my image URLs instead of the file located in imagecache” or where i should change the code.
By the way I don’t need to create thumbnails because the images are actually “thumbnailized” in the server, just take the url and show.
Thanks again!
PS. Sorry if my “engrish” is incorrect :)
Great tutorial, I am just wondering if there is any way of adding caption to the image. Both thumbnail and lightbox enlarged image. Thank you very much for help
You can go to Admin -> Content Types -> Manage fields for the image content type and click Configure, then enable the Description field. I am pretty sure this is used automatically if it is available by Views and Lightbox2.
Any suggestions on steps to create multiple galleries? Let’s say I wanted to create a “Vacation” gallery and a “Nature” gallery. I would like to click on “Galleries” and it show those two gallery links, then clicking on them would show the photos for the gallery. Would I use taxonomy to group them or would I create a Content Type “Galleries” then link images to that particular gallery using node refer or something like that?
I am actually working on another tutorial for creating multiple albums. I have tried doing it the same way as this tutorial and using taxonomy but was unable to get Views to do exactly what I wanted. Ultimately you will need to create a content type called Album or Gallery and have an image field which allows for multiple images then upload all the images for each album in to one node. Or set up the image content type as well as a new album/gallery content type and have each image with a node reference to an album/gallery, but I am unsure how this would work in Views, I imagine it will be a struggle like taxonomy was.
Very good tutorial. Look forward to what you figure out for multiple galleries.
I don’t know if you’ve used the Shadowbox module instead of Lightbox2, but I’m having trouble getting that to work. Just wondering if you know of any incompatibilities.
After some testing 6.x-2.1 does not work. But the 6.x-2.x-dev does work. Under views set the image field to Content: Image Shadowbox Gallery (field): thumbnail to lightbox. You can see a shadowbox example by visiting http://gallery.jamestombs.co.uk/shadowbox
But it doesn’t seem to work with the AJAX pager, so you will have to set AJAX to Off.
Thanks! I got it to work easily with Lightbox2. I’ll try with Shadowbox 6.x-2.x-dev just to play with it. I’ll probably stick with Lightbox2 though, since I like the AJAX pager.
Thank you very much for the great tutorial! I followed all steps and created gallery that you can see at http://school49.net/_vzroslye/NVPR/logos_Lightbox2
The only problem I have right now is alignment of thumbnails in the grid. I am using three fields (caption, Lightbox2 thumbnail and description). Description might be empty, one long line or two shorter lines and the system considers all these together as a single block and aligns center of blocks, not top edges as I want it to be. I want all captions of a row to be on the same horizontal line, but elements with one or two description lines are shifted up to align centers. Also, if there is a relatively ling one line description the system reserves too wide column so columns are not located at the same distance one from another/
Can anyone suggest what I should do to align these three-field elements in the grid so that their top edges placed on the same horizontal line and also distance between columns are the same?
Thank you in advance!
You will need to play around with the HTML and CSS for that.
Awesome tutorial. Especially after banging my head on the desk working through the original one.
I’m trying to set up an album based gallery (just like the one you keep mentioning the forthcoming tutorial on) and am very curious how to get views to display only the first image record in the grid for each album. Any hints would be appreciates.
@Jeff,
Still working on the albums tutorial. Got a lot of other paid work on at the moment so the tutorial is on the backburner for the time being.
Hi,
nice tutorial! thanks a lot.
But i am actually facing a little problem. If i go to /gallery, i can see the thumbnails, but when i click on it, instead of having the picture in the lightbox window, it opens the image in a new page. (like a normal link in html). So my lightbox dont work, but it seems to be activate, i dont know from where is the problem. I think i followed every step of the tutorial.
thanks for all in advance :-)
@Anne,
If you go in to the source code of the page, is the lightbox javascript loaded? If not, it may be worth turning the module off, uninstalling and installing again. Or possibly using Shadowbox, jLightbox or Thickbox to achieve the same affect.
Great Job! After reading so many different tutorials (video/text), I believe yours is one of the best one. As people have already mentioned, you tutorial will be much better with adding multi-gallery solution. We will be tuned for your next post on this!
The albums tutorial is now up and available at http://jamestombs.co.uk/2009-05-12/create-an-album-based-image-gallery-in-drupal-6-using-cck-and-views/1045
Hi,
I’m working with Drupal for 6 months now, and achieved a lot, but still feel left in the cold a lot. Especially the lack of proper documentation, and more proper guidance or structured follow-up of problems(as modules are updated) really drive me crazy sometimes.
Anyway, as I wanted to publish family pictures on my website, I was looking for a simple but good (and nice) gallery. So thanks for this tutorial (and the additional follow-up article) because it’s really what I need, and it is very well written.
Still things didn’t work out correctly from the beginning, and it took me a while to find the exact cause.
- Starting from the Image page, I could not get an image displayed. Last night (yes, sitting behind a PC on Saturday night is pretty cool :) I came across this link, and it contains the solution: http://drupal.org/node/224913#comment-1202646
Switching from public to private did the job. At least for me, same as others who commented on that article. So I hope it will help out a few others here as well.
- second problem is that my gallery does not show thumbs, but full-blown pictures. In Edit Views, they are shown as thumbs, but when I go to the gallery page itself, they are not. Any ideas?
Maybe I should also mention that I have some differences compared to the article: I don’t have the “Lightbox2: thumbnail->lightbox” format selection but “Content: Image Lightbox2: Thumb->Display ” (I created Thumb and Display in ImageCache). No clue where this difference comes from…
Thanks for any help, and keep up the good work! :)
You will want to select the one that says Thumb->Display. Is it in the view edit screen preview that the thumbs appear?
Have you got caching enabled under the performance page? If so, try taking it all off and refreshing the page.
Thanks, that did it.
In the Edit View, the Live preview gave a correct result. But the page itself not.
I disabled caching, cleared cached data, and refreshed the browser, still the same. Than I changed the page name, and on this new page everything is correct.
Thanks a lot!
i have done the above setting but after saving i am unable to view the images
Thank you for this great tutorial James. New to drupal, creating a decent image gallery was the first real trouble I ran into. It seemed every solution was either way too complicated or it was explained in a way that a noob like me didn’t really get it. Until I reached this page that is.
I ran into two problems during the tut (might be interesting for other visitors).
First problem: image cache dit not create the subfolders and uploaded the files to the wrong folder. From the many solutions for this issue that can be found, only commenting out the lines in the .htaccess file did the trick for me.
Second problem: the pics were only visible when logged in as admin, although I checked my permissions page several times. At the end, deactivating the Content Permissions Module worked for me.
This is such a great tutorial, it helped me out heaps.
However…
I seem to have done everything correctly but when I choose under views to format the field to display the thumbnails (linked to anything) they won’t display. However all the other formats work. The gallery works fine for example if I have it set to Content: Image Lightbox2: lightbox->original
The images are uploaded correctly and they appear in the source code but they just won’t display when set to thumbnails. They also don’t display in the node.
Ugh, I can’t work it out, any help will be greatly appreciated.
Ok, worked out why it wasn’t working, thumbnails weren’t being loaded into the imagecache directory. Not sure how to fix that (apart from manually loading them in).
Nevermind me, all fixed, thanks for the excellent tutorial.
I have seen more than twenty tutorials since last week because i am looking for the gallery solution for my site I don’t want to use the gallery modules because most module are still in development phase and some good modules has no support or frozen. anyway this is another good example expalining HOW TO CREATE SIMPLE (single image upload) GALLERY. Looks to me that everyone keen to explain simple way which is most of the time easy too (so don’t think we need too many tutorials) but not necessarily effective, but they try to explain multi upload issue in the comment because so many like me want to know. I don’t understand why someone is not trying to write a tutorial on multiupaload image gallery. Is it really too complicated? correct me if I am wrong. Thanks
@kaay, Not complicated in the sense that it is near impossible, but complicated enough that a fair few people can’t do it easily. When I get some time I will try and write up a multiupload image gallery.
Hi,
I have one question regarding a distance between an images in the gallery. In your example http://gallery.jamestombs.co.uk/gallery I see that images have more space surround.
Could you tell me how to do this?
Thanks,
Lukasz
@muzzik, the spacing is down to the theme and browser. The bigger the screen, the wider the theme gets, the bigger the space around the images.
[...] Category: Development This tutorial is an addition to my previous tutorial on creating a simple gallery in Drupal 6 using CCK and views. This tutorial will enable users to create galleries containing multiple images per node with [...]
I’m still having issues with displaying the gallery to anonymous users
I’ve checked the permissions and all seems to be fine
I can see it logged in as admin
Disabling the Content Permissions Module worked for me too but It would be great to limit the content based upon permissions
Anyone have a fix for this?
Regardless, great job on the tutorial
Thanks!
It may be worth posting an issue on the d.o for the Content Permissions Module to see if there are any issues with compatibility with the View modules.
Good tutorial.
I can’t get my site to display the images. In the source code it pulls from “sites/default/files/imagecache/lightbox/” which is right (I think) but there is no image there.
When uploading it saves the image to “sites/default/files”
Have I missed a setting somewhere?
Cheers
Rob
Is the imagecache directory writable by the server? Have you looked through the watchdog logs to see if any errors are thrown up?
Yes I had all the directories set right – didn’t hurt to double check though.
Thanks for the info on the logs, Drupal noobie here so hadn’t realised they existed.
Turns out the issue was with the file names (and spaces in them) but it was the logs that pointed me in the right direction.
Cheers for a great tutorial
I followed this tutorial two times, but the images upload but don’t show up after i press save. They upload to the sites/default/files folder. What am i missing here.
Firstly, thanks for the tutorial.
Secondly, I followed the tutorial and also experienced the problem with the thumbnails and images not showing up.
After looking at the html that was outputted, I realised that the thumbnail should have been created under sites/default/files/imagecache/thumbnail and the image should have appeared under sites/default/files/imagecache/lightbox – but they weren’t – but then, neither were the two folders.
I checked permissions – they were fine.
I manually created the folders, tried again, and once again, the images weren’t created.
The one thing that did work for me, was switching to the Private download method under admin/settings/file-system.
After adding new images, the new images were now being created in the appropriate folders, and now appearing in the gallery.
I’m not entirely sure why the Download method needs to be set to Private, but it now works.
Hopefully, this will help someone else.
Thanx that worked with me. I had the same case as yours but after enabling the private setting the way you did it worked
Thanks for the tutorial.
I have two question regarding this image gallery making process.
1. Can you make the tagging feature? I know there is image_annotate as well as footnotes but they use the image module for tagging?
2. How can I make number of comments appear beneath the thumbnails?
thanks a lot.
I am very new to Drupal and the only reason I want to use Drupal is to create image galleries. I found your tutorial and followed it step by step, but didn’t get a gallery. Let me be more specific.
I installed Drupal under my domain name, thetranly.com/Drupal
I created a folder named Gallery under Drupal, thetranly.com/Drupal/Gallery
but when I check the result by typing that address into the address input I got the following,
“Forbidden
You don’t have permission to access /Drupal/Gallery/ on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
…”
Did I do something wrong?
Also, would please be more detailed on how to add images under under /node/add/image. I simply put the images title (of course those images are in the Gallery folder).
Please help!
Thanks,
Duc Tran
@Duc Tran, I think you may need to read up on Drupal a bit more to see how it works.
@tim, See the tutorial on Creating an album based image gallery in Drupal 6.
Same problem as the others. Love the lightbox feature, but the gallery is not visible to anonymous users, which is absolutely essential for my site. How do I create multiple galleries. For example, in my site I need to have a different gallery for each performance.
I really appreciate all of the hard work that went into creating this module and the time to create the tutorial.
Alright, I realized that I didn’t need to create the folder named Gallery and instead of going to …Drupal/Gallery I should go to …Drupal/gallery
There I can see my gallery even though with nothing shown.
Now, I need to learn how to add image. Can anyone help please?
@Duc Tran, Have you followed all the steps previously? If so, delete the node/add/image folders if you have created them, then navigate to that path in the browser. You can also follow a video tutorial that gets you the same result at learnbythedrop.
Yes, I did follow all the steps mentioned. However, I am still not sure if I did it correctly when I tried to add images. I simply put the image titles in the Title field (those images are located in the folder “Drupal/sites/default/files/imagecache/lightbox”.
@Duc Tran, I take it you are uploading the images through Drupal and not manually placing them in the folder.
If you have followed the tutorial the images should be displayed on the gallery page.
I did both (uploading & manually placing) but still seeing no image shown.
I just went back and checked step by step from the beginning and I didn’t miss any step. I even did what the tutorial mentions in the update.
Thanks for your help!
@Duc Tran, It may be worth trying what others have suggested and setting your File system within Drupal from public to private.
Are you setting this up on a local machine or a web server?
Thanks for your help, admin!
I am on a web server. I just changed the File system within Drupal from public to private, however the gallery is still blank.
@Duc Tran, do you have a link for the site?
It is thetranly.com/Drupal
@Duc Tran, When you go to Administer => Content Management => Content (admin/content/node) are your images set to Published?
Yes, their status is published at the beginning.
@Duc Tran, I guess it is probably just one erraneous setting which is stopping the images from appearing or possibly a content access module if you have one installed. If you want to set up another user with admin rights to views and content and email the username and password to jtombs@tombscomputers.co.uk I will happily have a look over it for you.
Thanks, James! I just deleted everything and plan to start from scratch. If it won’t work, I’ll let you know. Have a great day!
Ha, ha! After starting from scratch, I followed the tutorial, “Create an album based image gallery …” and I got it. I created 2 albums each has 2 images in it. You can see the result here,
“thetranly.com/DDrup/albums”
Thanks a lot for your help!
By the way, I have a question. When we create the preset named “lightbox” we “select Add Scale and set the width to 800 and the height to 600″. This works well with landscape (horizontal) images. What if we have some portrait (vertical) ones?
@Duc Tran, Try this tutorial for creating a grid of images for each album.
As for the vertical images, you can change it to 800×800 if you want to, but you have to remember that some users may have small screen resolutions so you may not want to make it too big. You can play around with those settings until you get it how you want it.
Also, I noticed that when I opened an album its content images were arranged in 1 column only. How can I make it look like the page /DDrup/albums (rows of 3 or 4 images)?
N.B. I just added another album with more than 2 images and some of them are vertical (just to test).
Thanks, James! I’ll play with the suggested tutorial soon.
Finally, I can the albums displayed in rows of 3 images (check this link “http://thetranly.com/DDrup/content/bbsp-april-2009″).
However, I would like to change the background from white to black. Would you please help?
Thanks,
Duc Tran
@Duc Tran, Look in to different themes on drupal.org or Google for some. Alternatively, you can enable the colour module, then go to Themes and configure the colours of the Garland theme.
I’ve tried 2 different themes and none displayed my albums :-(
I’ve colour module enabled, but whatever I tried to reconfig the Garland the colour didn’t change.
I am reading some docs to see what needs to be done.
Thanks!
First off, thanks for the great tutorial. Second, I couldn’t get it to load right at first, the same issue some others were having. The images were going to the wrong place. I started over and found my problem was that I loaded my modules in the original modules folder, I had not created on in sites/all. Once I did that, it worked fins. Thanks again!
Excellent Tutorial…
But as usual, one problem.. :P
When I tried uploading new Images after the procedure (It worked great ..) , the new images are not being displayed in the lightbox, I can see their thumbnails but when I click on them to open in lightbox, I get an image of a camera with a cross on it …!! Any suggestions ??
@Sandeep, that will mean that the link to the lightbox image doesn’t work. Try changing the view to thumbnail -> Original and see if that works.
Hi James, you kindly pointed me at another one of your tutorials for me to look at how to display a set of images associated with nodes. I’m making progress using this tutorial and have run into a problem that @Sandeep posted. I changed the view to thumbnail -> Original and got that to work. However, I don’t see the thumbnails on the page, only the titles as links (which is all I got when I had it set to thumbnail -> lightbox. Any ideas as I don’t think it’s a memory problem that @Sandeep later posted.
Another great tutorial and very easy to follow :-)
I assume you have enabled Clean URLs?
Hi James,
Yep, clean URLs are enabled. Have flushed the cache too, so not quite sure what’s going on here as even with changing it to thumbnail -> thumbnail, I’m getting the lightbox effect! Will have another go this evening
Have you looked at the HTML source to see if the thumbnail image URLs are correct? I assume there is nothing in your report log in Drupal? I remember having this problem ages ago on a test site where it had worked before and ended up using Thickbox rather than Lightbox.
Hi James, yes the URLs look as if they’re right and I’ll check the logs to see if I can pin it down further. With the thumbnail > lightbox set up, the imagecache path was shown but the images aren’t being added so might be a permission thing going on preventing them from being saved there. Thanks for the tip about swapping to Thickbox.
I found the problem James… humble apols I hadn’t enabled Imagemagick … now have everything working ;-)
thnx for this greet tutorial ,
the problem was when i upload the image i didn’t c it ,after search i notice the imagecache doesn’t create sub-folder on it when create new preset i dont know why , i was using troubleshooting document on drupal website but doesn’t work with me too , finally i found solution that is change the file system and under ‘ download method ‘ change from public to private and the imagecache will work and image will show fine
hi again , i have 2 question
1.how can i change space between the images ?what code needed to add to css file ?
2.if i create new contant type called it album and upload the images using it , how to create more than one gallery and each gallery contain different images that belong to album type
tnx
@hamzah, #1 the spacing between the images will depend on your theme. I suggest you read up on CSS and find out how to do it on your theme. #2 I wrote another tutorial about Creating an album based image gallery in Drupal 6 using CCK and Views which does exactly what you need.
Thanks for the great tutorial! I learned a lot.
I also experienced the problem with the thumbnails and images not showing up.
I found that I enabled the ImageMagick module, but it was not configured on the server. When I changed to ImageAPI GD2 it worked.
@admin: Apparently the problem was of memory ..when i increased the memory in php.ini , “It works ” :)
it’s a great tutorial…i followed the steps and i got the gallery…it’s great…
but i have one problem here…how to create a menu for the gallery so everyone can access the gallery through that menu…please help me as soon as possible…thx:)
@lestari, In the Views editing screen, where you set the Page url, you can also set the menu item. Or you can do it on admin/build/menu
hi
very nice explanation exactly get the result.
thx for the reply…;)
hi
very nice explanation exactly get the result.Thx
Awesome, saved me a ton of time. Thanks for writing this up!
Hello,
First all all I would like to thank you for putting this tutorial together because it has really helped me (a beginner to drupal) to get my gallery site up and running without problems !
Ok now I would like to have my images filtered by category. I had a look online regarding using the Taxonomy module to filter my images, but got lost on the way. I setup taxonomy module but couldn’t get the dropdown menu(to filter my images by category) to appear on my Gallery page. I set the Filters prop. of the Gallery view to NodeType=Image..Please help !!!
thanks
Hi,
Thanks for the tutorial, I searched a lot of them and your gallery looked the best and the instructions the easiest. I made this gallery and it almost works, but when I click on the thumbnail the lightbox doesn’t come up; instead a huge dark box appears at the bottom of the page and then the photo shows up underneath! All the modules are up to date, any idea what could cause a problem like that?
Paul
http://www.kinlayhousecork.ie/gallery
@Paul, it looks like there is a problem with your custom theme somewhere. The lightbox stuff is loading up OK, so I assume it will be something in your CSS.
efyuze,
when you’re in Views you need to add your relevant taxonomy vocab in ‘filters’ and expose it. Once that’s done you need to change your ‘Exposed form in block:’ option form ‘no’ to ‘yes’ under the ‘basic’ settings’ menu.
I hope that helps.
Hey.
thanks for the great tutorial, it helped me alot
but,,,,I have a problem in the thumbnails display
as you can see in the link below
http://www.ironi-alef55.org/gallery
the thumbnail are too close to each other.
how can I fix that ?
@Shelly, It will be down to your theme, alternatively you can use less images per row to spread them out a bit.
@Kingfisher, Did you definately save the view after setting the path?
I have set the path name to /gallery but after saving this when i go to url, browser display this message “Page not found”…
At the time of saving the view browser display this message “Display Page uses a path but the path is undefined.”
Plz help me.
Thanks … nice tutorial
Excellent information, thank you.
This was the first tutorial that worked for me as far as Drupal was concerned. But it seems pretty painful to upload a plethora of images. Is there a way to facilitate more images at one time? I’ve got a lot I need to get up but just uploading the 4 for this demonstration took minutes individually.
Awesome job though.
@Justin, Yes you can upload multiple images at one. You will need to use the Image FUpload module and use that rather than the CCK Imagefield.
Thank you very much for this useful tutorial!!
Paolo
you rock dude. I have been looking for this solution way too hard. node gallery… views attach… gallery2… acidfree… blah. This is the simplest way. I will now use panels 3 to create the style i want. awesome.
Veri good tut for me!
Thank you!
Hi. Having a problem. Under the CCK Imagefield area I was successful until this line: Now under /node/add/image we can add an image to go in to our gallery.
I cannot make that Create Image page appear! Everything else to that point worked fine. Anyone else have that problem?
What did you call your image node? Alternatively, rather than using that URL use the Create content menu item in the navigation menu.
Thanks for giving that kind of clear demo.
:)
Hi – I hear all the great compliments, and so it makes me think I’ve done something wrong. When I try to display my gallery I get a Fatal error: Call to undefined method views_plugin_cache_none::post_render() in /ftp/pub/skygal/drupal/sites/all/modules/views/includes/view.inc on line 855. In going to line 854-856, I find this:
if ($cache) {
$cache->post_render($this->display_handler->output);
}
Can you point me in the right direction?
Thank you!
@Linda, That will be a problem with your installation. Try downloading and updaing views.
Huh. Would never have thought of that! Thanks – I’ll give it a try.
This is a great tutorial. I’m looking for this and a bit more though. I would like to have multiple galleries and a page that lists a thumbnail and a description to access each gallery. Is that possible?
@Brian, Have a look at my Create an album based image gallery in Drupal 6 using CCK and views tutorial on how to do that.
@nexus74, No, it doesn’t take 8 modules to get a simple gallery in Drupal. It takes 8 modules to create a simple gallery using this method which allows a lot of customisation. There are modules that do galleries in Drupal with one module, but this allows flexibility and can be changed to work in many different ways.
Why are there sooo much complexities to adding a simple gallery in Drupal??
It takes eight modules to do this?
Thanks! – found it, and will give it a whirl this evening. Is there a link to the result? Is the section after – http://jamestombs.co.uk/2009-06-25/creating-a-grid-of-images-for-an-album-in-drupal/1046 necessary, or can the grid view be modified via the view?
Thanks for your well documented tutorials and quick responses!
@Brian, I think you can do it through the view, but you would have to look for some sort of node override within Views. The grid using PHP is a way to do it, but like with most things Drupal there are many ways to most things. Sorry, no link to a demo, it should look very similar to the simple gallery except with the description/gallery title under/above the image.
@admin, thank you for your response. I thought there would be one module as well. However, when I tried this before I knew about this tutorial, It seems like I still had to download one module after another…
I’ll look into it more.
Nice tutorial…. easy to learn basic concept
So I finally did my upgrade and the gallery magically appeared! Still needs work, but at least I have something to work on, now. Thanks so much for the help!
Excellent Tutorial, Easy to follow!
Few follow up queries about added functionality..
How hard is it to create multiple galleries? Rather than having just 1 big Gallery i would like it that my user could create a gallery and then stipulate which gallery they can upload the files to.
Another query is, what is involved in having a comment box, much like this one, where users can comment on single images?
Whoops. noticed my first question is answered in another tutorial on this site! How silly of me.
hey, why there is a broken link of images appeared in my page..I cant see the imgae I have uploaded.
@sam, make sure you have write permissions to your files directory.
Great, great, great…
Tks a lot!!!
Thanks so much for this tutorial, I’m going to look into the album based one now!
I have one problem though, I don’t get the previous/next links in the Lightbox popup.
Thanks for the tutorial – the output is exactly what I was looking for, and easy to theme for my website.
BUT, I have a problem – the images I uploaded when into /default/files and /default/files/imagefield_thumbs instead of under imagecache. The thumbnails, etc are generated correctly but put into the wrong directory. I’ve been through the tutorial twice. Any thoughts?
@Jeff, I have looked at your site and your images are being created in the imagecache directory. When you upload an image using CCK Imagefield it is placed in your files directory unless you specifiy another directory within the CCK field settings. Copies of the image are created in the Imagecache folder with the settings applied to the image.
Any ideas on how to get captions to show up, either in the main gallery or in the Lightbox popup?
check out the instructions on post 12 on this forum post.
once you do follow those steps, you need to have the field in your view use “Lightbox2 iframe: thumbnail->node page”. then, copy the page-node-lightbox.tpl.php into your theme and take out all the wrapper stuff.
@admin – regarding the path problem: my fault, I didn’t see there were older pages of comments. The changing of the file system to “private” fixed it on my test system. Thanks!
I got everything to work correctly; however, there is no paging going on. Pager is set to full, ajax enabled and 9 items per page.
There are around 45 images total and all are viewable in admin/content and all show up if I set total number per page to 45.
It just seems page 2-5 (with my current 9 img per page setting) won’t load.
Any thoughts? Oh, and thanks for the outstanding tutorial!
@bstrange, I can only assume it is down to your theme. Try setting it to Garland and see if the pager shows up properly.
the theme *IS* actually garland with heavily modified graphics to give the appearance of a custom theme. No significant changes to css or additional files added.
Lol, boy are you the smart one :) It *was* the theme…well sortof. I modded all the graphics to give Garland a black background….
(cough) pager numbering is black (cough)
Boy do I feel stupid :P
Thanks again for the GREAT tutorial and help figuring this out!
Sir i want to help, while using this image gallery i encountered with the some problem .I m anable to create new preset.while on clicking add new preset it showing the following warning
“warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘imagecache_ui_preset_add_form’ not found or invalid function name in D:\Apache\xampp\htdocs\drupal-6.15\includes\form.inc on line 372.”
please help me out
@sheta gusain, looks to be an issue with Imagecache. Make sure the correct version is installed for your Drupal installation.
Ok this is probably a stupid question, but do you have any idea how I would place a very thin border w/padding around the thumbnails? I am pretty sure it would be done through css, but I’m not sure where to start.
@bstrange, depends on what you called your view etc, but the following css should work:
.view-gallery .views-field-field-image-fid img { border: 1px solid #c00; padding: 5px; }
That will add a 1px red border with 5 pixels of padding between the thumbnail and the border.
When I klick on an Image in the example gallery, two different interactive (Javascript?) galleries pop up. Rather strange.
@Tuttle, sorry about that had 2 lightbox packages installed when doing some testing.
Hi ! This tutorial is really useful, I was able to set up a little gallery.
Now, when I open the lightboxes, under the pictures there are 3 rows of text : View image details / Download original and Image x of n. How can I remove those 3 lines and just put the title instead ?
Af for the the border around the thumbnails, I read below that it has to be done through CSS, no other way at all ?
Thanks a lot !
@DADAMO, Yes the borders have to be done in CSS. As for the text in the lightbox, normal users won’t see the View image details / Download original image if they haven’t got permissions. With Drupal it is a good idea to have 2 seperate browsers with one of them acting as an anonymous user so you can see how most people will see the site. You may want to try Shadowbox rather than Lightbox2 as it has less information and would fit with your theme a bit better.
Alright, I’ll try that ! Thanks a lot for yur help !
The lightbox just shows the images of the current page, not the whole gallery. Any was around this?
@Tuttle, Not unless you change the view to allow all the images to show.
I was refering to your example page. Is there a way to use a pager on the page, but show all images in the lightbox slideshow?
@Tuttle, that is what I meant, I don’t think you can have all the images appear in the lightbox slideshow without the images being on the page to start off with which means the pager would have to disappear. I am sure there probably is a way around it, but not easily within Views.
Hello and thanks you a million for posting a tutorial to help people.
Sorry to say though, but it’s two thumbs down from me.
Followed the tutorial step by step and it doesn’t work. Nothing displayed in gallery or even individual content pages after file uploaded. Seems others have the same problem (after reading comments)
If so many people have the problem, please remove and/or update your tutorial until it’s sorted out and it doesn’t keep happening to so many people.
It could possibly be more unhelpful than helpful at the moment.
Many thanks
Gary – fellow drupal user
@Gary, The tutorial works for the vast majority of people. The reason it doesn’t work for you and some of the others will be down to your webserver/drupal configuration. The fact the images don’t show even on the individual pages then it is likely imagecache isn’t working properly. I imagine your files folder isn’t fully writable. Are the images created?
I followed the information here to customize CCK for a header Image rotator.
This is great stuff
keep doing the great work
Great tutorial. Thanks for sharing you info and technique. Got it up and running in no time. Thanks James.
For people who can’t see an image thumbnail. Most likely cause is that Imagecache is not working. Most common reason for Imagecache not working is that ‘Clean URLs’ are not enabled. IMPORTANT: for this technique to work, ‘Clean URLs’ needs to be on (or imagecache won’t work, and the gallery won’t work). Brillaint!
@Glenn, thanks for that, didn’t realise Imagecache required Clean URLs. I imagine that will sort out a few people.
Hi
The tutorial was good……..
But dint work for me… I did all the settings as per the tutorial… But there are no images on the page.. even in the source code there is no html for images… :-(
I have clean urls enabled…
Files folder is writable… I did upload the image before submit…
I dont know why doesnt it work then…….
Please help….
Thanks Gary, followed your instructions and it works great!
I’m stuck a little early on.
When I attempt to add the field type of image and from the data type drop down menu I select file and widget type just says “file upload” not image.
Any ideas ?
@bradleyh10, Have you enabled the imagefield module?
Hi,
firstly let me thank you for the great tutorial. Everything works out perfectly. However, when I log out and try to view my gallery as non registered viewer, no pictures appear (The Gallery, called Berlin, appears, just the pictures are not shown).
Do you know what could be the problem?
Cheers and thanks again,
Peter
@peter, make sure that anonymous users have permission to view the different imagecache presets.
thanks a lot, of course that worked ;)
[...] followed the instructions at this blog post here which was real [...]
DO you have a quick fix for the gallery..
ooops, I have installed Gallery everything works fine, only that I also have the “wibiya toolbar” and the lightbox stops working.
I know that both modules work on lightbox.. not sure if #1 or #2 .. I have turned of the social connection module (wibiya) and it works perfect!
Thank You
Norman Flecha
hi, i have followed all the steps and added 2 images.
The problem i have on the add image page is that there are 2 browse for image boxes
Also when i view the gallery, thumbnails are not shown but the links are and if clicked they show the images on a new page.
see my gallery here :
http://www.i-newmedia.com/drupal/?q=gallery
Please help – thanks!
@samdcruz, You will need to set up your view properly. I would suggest you read through the tutorial again and follow it step by step. You also need to enable Clean URLs for ImageCache to work.
thanks, however it will not allow me to enable clean urls.
The message i get in drupal admin area is
“Your system configuration does not currently support this feature. The handbook page on Clean URLs has additional troubleshooting information.”
I have read the drupal help and have modified the .htaccess file but it still does not allow me. any idea what to do or what code will work in the .htaccess ?
I made all the steps, but shows my 6 images in 1 column, and I choosed horizontal in grid :( Why this?
@Kirari, I don’t know I never chose horizontal in grid selection. Is there any reason you have?
Really nice tutorial. I see you have made two tutorials, Gallery and Albums. What is the difference between Gallery and Album?
I’m trying to add images to my blog entries. So, is my blog items = album?
On my main pag, I would like to have a link to my highest rated images. = Gallery?
Neither would be suitable for what you want by the sounds of it. All you need is the imagefield on your blog content type and set up a view pulling out the images. Not sure how you would do rating of an image within a blog post though.
Those struggling with getting the images to appear need to go to the permissions page and look for content_permissions module. Tick the boxes for view field_image (or whatever you named it) and the images will appear. Make sure the other permissions for Lightbox and Imagecache are ticked as well.
Great Tutorial!
I have follow it your procedure, but it is doesn’t show it for the picture , just show it about node published ,why?? is there anyone can help me to do that?
Make sure you have clean URLs enabled and that the permissions are set up correctly to allow users to view images.
thanks sir it is work now ,but now I have a problem with the lightbox 2, after I enabled the module in drupal, it cann’t show for the lightbox, I confused it , and the format I have changed it, to lightbox 2–>thumbnail–>lightbox, but it cann’t show the picture and the lightbox, and If I changed the format to image links to node, it can show the picture,now what must I do?
You will have to check to make sure the lightbox is being included in the HTML and that all users have permission to view imagecache images.
ic ,thanks sir for the explanation ^^, I want to ask something sir about how to make drop down menus ,because in my themes is cann’t show the drop down menu, and it is my file in page.tpl.php : http://pastebin.org/163734,
and this is my CSS : http://pastebin.org/163739
How to makes drop down menus sir to snippet into my page.tpl, I am really need your help sir ^^
Best to ask the creator of the theme if they have allowed any implementations. You could use the nice menus module.
yes sir for the menus nice_module is can work on it ^^, but there is something bug in the primary links sir, after I enabled the module nice menus in drupal there are LETTER PRIMARY links in my menus, how to delete the letter PRIMARY Links in my menus sir? this is the nice_module files :
http://pastebin.org/167037
can delete the LETTER PRIMARY LINKS in my menus sir?
I don’t use nice_menu module, put an issue in with the author.
ok sir I will try on it
I also followed this and did not get any images on my page. I checked the source code and when hovering over the in firebug, it would not load so I checked the path and the folder for “thumbnail” that we created in the Imagecache step was not there. I’m wondering if it was created somewhere else? I’m on a localhost and it won’t let me enable clean URLs. Is this the problem? Once I created the folder myself and added the picture, the image loaded on the page, but it was not cropped and scaled.
You must have Clean URLs enabled for the imagecache module to work.
I also followed this and did not get any images on my page. At the time of attaching a image to the node itself, the image was not shown. It only had shown a thumbnail, but when i tried to preview it or save it, the node was blank. it had no images and so the view also could not retrieve the image. What is the problem admin??? My cleanurl is enabled and i’m working on a localhost.
Moreover, i noticed that the images are coded to be retrieved from sites\default\files\imagecache\thumbnails and lightbox but there are no images there.
Instead the lightbox images are saved, to “sites\default\files” and the thumbnails to “sites\default\files\imagefield_thumbs”
I have done things right but i don’t know about the problem. Please help sir.
Make sure the files directory is writable.
I’m noticing the tage Image: infront of all my pictures when I browse to http://www.thunderpunch.net/gallery but when I edit the view the preview does not show these labels. If I go under fields and change the label to widgit default: image then it shows up under the preview. Any ideas?
I don’t see the label. Have you sorted it? If not, it may be some debug or cached view you are seeing.
I think it is necessery to correct an error in this bundle of modules.
installation on native drupal runs without problems, the path to the images-thumbnails created, but on fact such images on the server like the folder structure does not exist. when resized thumbnails, even if the folder structure was created, it is removed. rights to “files” were exhibited and 775 and 777. Sorry for my English.
Hi, James;
An excellent and clear tutorial. I’ve followed it to the letter up to the adding of a View (as a node).
The following page in Views will not permit me to
“Set the title to Gallery. For Style set to Grid then chose 4 columns and set Alignment to Horizontal.”
The Views page offers only the one choice given for each of these options, and no means or method to change them. Nor can I change Filter as you tutorial goes on to suggest.
This is what is installed in Sites/all/modules:
Drupal 6.17
Views 6.x-2.10
CCK 6.x-2..6
FileField 6.x-3.3
Imagefield 6.x-3.3
ImageAPI 6.x-1.8
Imagecache 6.x-2.0
Lightbox 2-6.x-1.9
Is this a modules version issue?
Or is there some setting in Views I am overlooking?
Thanks,
sst
James -
First of all, thanks for a great tutorial. It has really helped me move forward immeasurably.
Second, in my gallery, I have set up Views exactly as you did and have gone back to re-check about ten times. The images in the gallery are appearing in duplicate and in a vertical column even though I have set everything to horizontal as you have in the tutorial.
Your help would be greatly appreciated.
Thanks.
I read many tutorials on gallery’s and they always seem so overly complicated with views and cck fields. I found the best way is to use just the TinyMCE, IMCE and Lightbox2 modules.
I just create a standard page, insert a table, set it to 100% width and give it a background or what-not then simply click the insert image icon and browse to the image on your harddrive to generate the image (which it automatically crops and creates thumbnails to the users specifications), highlight the thumbnail and click ‘insert’. Select the lightbox2 class (which you would have created when installing lightbox2) then click the ‘link’ icon and link it to the original image. Two minutes later I have a gallery which is fully editable and easily manipulated by anyone I allow…
But requires knowledge of HTML when the gallery gets complicated, doesn’t allow pagination and is using a table for non-tabular data.
One prb i feel..only admin can watch that image gallery..but a register user or authenticated user can`t watch this gallery…any one help me?
You will need to look at your access permissions for imagecache or any other module that deals with access.
Nice tuturial, se my gallery made with this modules at
http://www.duartstudio.com/home/?q=galeria
DC
Hai sir , I have some question about this section about Create a simple image gallery in Drupal 6 using CCK and Views, and now after I try it is work on it, but the trouble sir is like this :
in the basic settings in items per page =16, and now after I try on it, it is appear 16 pictures on this page, but the trouble sir, is in lightbox after I click on the picture 16, there is cann’t navigation right on to going in picture number 17, only just I must to click navigation paging 2, so it is can start again for the navigation right on the picture, how to solve this problem sir??,
thanks for the advance
I’m sure it can be done, but I am not sure how.
i done all this but when i upload a file there is no image. when i see the fire bug i read the src and when i see there is no folder of lightbox and thumbnail also. i manually create these folder. whats happend. please tell me. and 2nd thing is the images upload here sites/default/files and the thumbnail upload here sites/default/files/imagefield_thumbs. i cant understand what is this happened. please tell me where the problem is
Thanks in Advance
Abu bakar
Enable clean urls.
I am having an issue creating separate links to other image galleries from the original gallery. Basically I want to create an album. I did try your album tutorial, but it didn’t turn out very well for me. If I could do this, it would be perfect.
The following images help describe my mission:
http://i8.photobucket.com/albums/a18/Nioin3k/Untitled-1.gif
http://i8.photobucket.com/albums/a18/Nioin3k/Untitled-2.gif
All help is appreciated. For your help I will reward you with a hug or a kiss, your choice.
P.S. If there is a module out there that will give me similar results, that would be helpful too! I looked all over and I haven’t found one that met my needs.
The album tutorial is the one you want to follow.
It’s a good tutorial, i can followed this without any difficulties. But i have problem with the result. The images are shown in actual size instead of in thumbnail size. I wonder where’s the problem. Could you please help me with this problem?? Cause i can’t find the problem.
Thanks in advance
Fifi
Problem solved. There’s a mistake when choosing fields content:image. But, why the thumbnail got cut? How to make it is not cut but only resize.
Chose the scale option not scale and crop.
You will need to look at your view again and change the image display settings to thumbnail.
It’s work for me, just switching to the Private download method under admin/settings/file-system.
Thanks in advance
This procedure very good i am also used it . Thanks