Create an album based image gallery in Drupal 6 using CCK and views

Brilliant!
Thanks this is more than helpfull!

Great tutorial! I am using this system on an art website I run. Now working on another one for a client which is based on individual image nodes grouped by node reference to a gallery content type. I was worried about bulk uploading, I think a question about this came up on the other comment thread - in case anyone wasn't aware (I wasn't), image fupload supports bulk uploads where a node is created for every image.

Hello,

I was just using your tutorial for building a gallery using cck and views in drupal 6. When I built my gallery the way you did, I can only get it to display the images in a list. I would like the images to go 3 across (or maybe more, and then go to the next line. I think I may be missing something simple, but I am a little confused if I need panels to do this. I see in your example, your view shows the albums as 3x3 layout and not in a list. I have checked out panels but I still can't seem to get it to display the way I would like. Any help would be greatly appreciated.

Cheers,
Wes

Sounds like you have missed setting the view style to Grid. It is on the left of the options below the view title.

sorry i did all what u said before but unfortunately the album images appear test only not thumbnail and when i click on it open a lightbox with no image sign to display pls help

Make sure the images are on the server and that the lightbox images are created in your imagecache folder. You may also need to give access to users to view the imagecache files.

I seriously love you!!!!!! you have saved me a lot of time and hair pulling!! Thanks a lot. I have one question and that is can you get the single album image on the albums page to link directly to that respective album in lightbox w/o going to the interim display for that album? Any suggestions are helpful. Thanks again. Nice Aston....

I would say no, as the lightbox code looks for multiple a tags with rel="lightbox[albumname]" so if you only had 1 image, it would only show 1, unless you had all the images with links shown and hid the rest using CSS, but that is a bit of an ugly way of doing it.

Hello. Your website is most excellent.
I have followed both your image gallery and album based gallery tutorials.

This may be a stupid question but, how to I add more images to the galleries created in this tutorial?
Everything works fine. I go to /albums and it shows me my album categories, then I click on one of the categories and it takes me to the next page with the images using lighbox. My question is, how do i add more images to the page my albums link to?

Thanks again.

Not 100% sure what you mean. Do you want to add more albums or more images within existing albums?

To create more albums you go to node/add/album. To add more images to existing albums, you can either click the Edit tab when in the album itself, or go to admin/content/node then click edit next to the album that you wish to add the images to.

This is a wonderful tutorial, but am having a lil problem, everything displays just fine but when i go in the albums, i want to edit the way they display but for some reason i cannot seem to know how or what to do about it. They display one after the other using only 1 column. Pls any assistance will be appreciated.. Thanks..

Like I said at the end of the article, there are multiple ways of achieving what you want to do.

Modify your node-album.tpl.php, use panels, use CCK layout, use a node override on in views

Ok then what about using panels? i got this tester running here http://1.willieandrenee.info/content/test-file
see the block on the right and it loads the respective gallery in the middle content section. AND ITS GLORIOUS i might add, what about getting it to do this ...
http://www.mybrightestdiamond.com/photographs/ except that on the side its one album image that reps the gallery like as we have done.
of course us newbies want to keep asking for more thats the way we are..... thanks for bearing with us..
i feel like it can be done somehow,

This was extremely helpful and easy to follow. Thank you.

It is a nice tutorial, but I am having problem with the images. When I uploaded the images in the albums. I can see the thumbnails. When I open the albums I can not see any thumbnails. I checked the photos with original size are upload in the /files folder. The thumbnails are generated in the imagefiled_thumbs. The settings are the same like in the turorial. Do you have any idea what could be the problem? Thanks.

Great tutorial. I'm familiar with Views 1, but this helped me with some of the ins and outs of Views 2 for a CCK photo gallery.

Using your method, how would you create a "latest photos" block or page to display let's say the 10 latest photos uploaded into any of the albums? I'm looking to create a flickr-style grid of thumbnails (which I can theme easily) but because each album node has multiple images attached, the "items to display" setting in views effects the number of _albums_ to display, not the number of images in those albums.

Setting "Show (x) values" of course only displays x number of photos from those albums, which could give me the most recent photos from the "items to display" number of albums.

But that doesn't get me the latest photos uploaded in _any_ album.

Does that make sense? Is that even possible with views or would I need a custom query?

Thanks!

@Josh, I think that it would have to be a custom query, but not 100%.

@David, Try changing the download method from public to private and make sure all the permissions are OK, as well as the imagecache thumbnails are being generated.

So when I add this album type. The promote to frontpage is enabled, but the 3*3 grid view is displayed and not like at "/albums". How would I display it like this (at frontpage), 1 picture title and body, like /albums displays but just 1 album ofcours...

To my own question above in case anyone else wants to do some sort of "latest images" block, see http://drupal.org/node/485266

Totally possible with Views 2!

I'm freakin' out! The first time I did this it worked fine, I did it with an alternative theme. Now I want to use the garland theme and the grid style just wont work! It now always shows the thumbnails in 1 single column. Is there some overritten css file or explaination to this fenomonon? This is really unlogic.

Great tutorial James.

Looks great, just need to figure out the best way to order the images in a grid when an album is selected, think CSS/node-album.tpl.php is probably best, panels feels a bit too heavy for doing that, or is it?

Also would like to be able to display/set a 'front' image for each album (ie, the image thats displayed on the album page, rather than random), and be able to organise them into catagories, maybe multiple views for different catagories and filtered with taxonomy for each album?

@chessboxing, for the images in a single column you will need to create a new file in the template folder called node-album.tpl.php and modify it to suite your needs.

@Kelly, Using panels, would require you do override the node and create a block in Views using Grid view and then set the block in the panel. If you are OK with HTML and PHP, I would go with the node-album.tpl.php method as you have more control over it, but not as easy to modify if you don't have the skill. With Drupal6 you can move the images about once uploaded, so you simply have to move the image you want to be displayed on the gallery to the top of the list and make sure Views is pulling out the first image.

To organise in to categories you can close the View, then set the URL to taxonomy/term/%, set the title to %1 (I think, possible %2 or %3, try it and see), then set an argument in the View to pull out the taxonomy term.

admin
I don't understand why the hell grid 3*3 for instance doesn't work, like it is intended, right? It works for you without node-album.tpl.php in this tutorial. I redid it with a clean install. Still no 3*3.
2nd, about node-album.tpl.php, should that be blank? or what the hocus pocus should I insert? I really want to get this because it makes no sense to me...
thanks in advance

@chessboxing, the 3x3 grid is only on the gallery page which displays all the albums. Once you click on the link it goes in to the album where you get the images one after another, that is where you will need to create a node-album.tpl.php file to set up the actual album display you want. If you had set up the view like I had in the tutorial, going to http://www.domain.com/albums which show your view, whereas clicking on any of those albums would result in seeing the individual node.

That makes sense :)
However the first time, I swear to god, my album node showed up with the grid style and that is not logical. This was with the addari theme. That's why I was so confused (freakin' out stuff). Anyway. Thanks!

You have some references to start with node-album.tpl.php? Google can't help me at the moment...

Great tutorial James - Thanks.

I agree with chessboxing, a reference or small tutorial to help customise an albums images would be great i.e. node-album.tpl.php

Thanks all the same!!!

James
Super tutorial! Absolutely great!

Thanks for sharing it with us.

Hello> please, post snippet of code, which should be placed in "node-album.tpl.php" to show pictures in grid 3x3...I am Php newbie, so it will save me 5 years of my mental health :-)

@zdeno, jj, chessboxing, I will do a tutorial on setting up a grid on node-album.tpl.php

hello
I have an issue uploading the image.
when i upload the image it suppose to show up, but it's not showing while uploading. there's a lot of issue i found on the internet. I think you don't have that issue, i don't know what it cause this to happen?
when i upload the picture i suppose to have a little thumbnail beside the file. but it's not showing up

@Lewis, I assume that you have some permission errors in your folder structure that is stopping the admin preview being generated. Go to the Watchdog and see if there are any errors, also look at the status report to see if the files directory is writeable.

That would be terrific!

[...] 06. 25. 2009  –  Category: Development Following on from the tutorial of creating an album based gallery in Drupal 6. This tutorial will teach you how to create a basic grid of the images in the [...]

I have posted up some code on how to do the grid in node-album.tpl.php.

Creating a grid of images for an album in Drupal 6

hi. I followed "node-album.tpl.php issue tutorial". It is perfect...I have few questions. After click on Galeria itemin primary menu, I have problems...when I move mouse cursor over body block with list of albums (generated view), scrollbars are apearing...Have you any Idea how to resolve it? thanks a lot

Drupal is great, but if you're not a coder it can be a nightmare.
I followed the above tutorial and ran a series of test albums on my testsite (local), and everything worked fine.
Than I followed the same procedure (as far as I could tell) on my production site, and the thickbox or lightbox just would not show any picture. For reference, I could create albums, upload pictures, the thumbnails would show, lightbox works on other pages, all rights were assigned correctly, etc.
I didn't really know which module could cause the problem, nor did I have sufficient knowledge on all the modules to even start debugging.
After a month of searching and testing, suddenly something would work: a pictured being displayed in Lightbox.
The cause turns out to be very simple, and the problem strange: I posted some weddingpictures of my parents, and used their names in the jpg files, something like "Jack & Jane - 001.jpg". Now, it turns out I cannot use the "&", when I use "Jack and Jane", everything works fine...
Well, again, this may help someone. I'm still not sure which module to blame. Maybe it's a rule I'm not familiar with?

@zdeno, Try it logged out, I think this is to do with the admin links that come up in views.

@rik, You may want to try out something like the Transliteration module which converts filenames of uploaded files in to good names that won't cause problems like yours.

I loved this tutorial it made everything so easy. I went ahead with your next tutorial "creating a grid of images within an album using the node-album.tpl.php method" and I loved it too.

Everything worked fine. I was wondering though why the images in the grid do not display a title or description. At the end of this tutorial they displayed but after the "creating a grid of images" tutorial it only displays the image with no title or description.

Thank you very much.

Great tutorial.
Loved it.

indeed, nice tutorial. a couple of questions though..
what is the relation good for? in my case the option "Content: Images (field_images) – fid" doesn't show up (only without " - fid, and there's no such thing as a "delta"). if i leave the relations it works actually just fine.
any idea, why the proper option for relations doesn't show up?
another question regarding the node-album.tpl.php-method-tutorial. you wrote "In your content type, go to Display fields and set the Full node to ." set to what? i couldn't find any empty entry or something between the options.
thanks in advance and cheers

The relation was to make sure the node had at least 1 image. There were cases (at least in previous module revisions), where nodes with imagefields that were required could be saved and published without any images being uploaded. Looking for the images in this case would prevent empty albums appearing.

Set the full node to <Hidden>. It will be the bottom most option. It was stripped out of the last tutorial due to a syntax error.

Thanks, great post and easy to follow. Everything worked fine the first try. When I added the node-album.tlp.php method, I noticed the captions where removed from the lightbox display. I realized that the lightbox [][] notation for grouping and caption was missing the second [] within node-album.tpl.php.

Another way to achieve the desired layout is to simply style with CSS.
Something like:

.field-field-image .field-item{
float:left;
width:300px;
height:200px
margin:0 10px 10px 0; }

@Rgazmik, that will work although you have to be careful about putting the margin and width/height in to the same CSS rule as browsers interpret the box model differently.

Hey Rgazmik,

I too have no captions after implementing the node-album.tpl.php method.
Where exactly did you put that second []? I am just not seeing it!

I would also like to try to figure out how to insert a pager into this node-album.tpl.php method. Maybe showing 8 pics per page with a more button at the bottom... Any ideas?

@Walton. The CSS method I used to obtain the grid layout allows me to NOT use the node-album.tpl.php method. So lightbox works fine. I have not, as yet, looked further into getting the second [] to display the caption.

@Rgazmik

It seems the following CSS in my theme's local.css accomplishes the same result:

.field-field-image .field-item{
float:left;
}

Any CSS magic that can put some space between these images? Nothing I change on this particular style does anything. I don't really want to edit the whole site's img style.

Nevermind. I got it. We were missing a semicolon. Now I just need to figure out how to make a custom pager.

THANK! YOU! great tutorial

Hi,
Thank you for the tutorial!

My friend and I both got stumped on this:
When making the gallery, everything works perfectly when you are logged in as an admin. However, when we try to view the page unauthenticated newly created fields dont display.

It might be worth noting that this is due to a permission setting under User management -> Roles -> anonymous user -> content_permissions module

Setting the view field* boxes to checked made everything work as expected... This step doesn't seem to be documented anywhere...