Creating a grid of images for an album in Drupal 6

Hi, good day.

I wanna thank you and congratulate you for making such an incredibly easy tutorial. It was very easy to follow and the results are really impressive.

I was wondering, Is it possible to add pages to an album? I mean, in the case I had more than 9 images in an album I want to show just 9 images in Page 1, 9 images in Page 2 and so on.

If possible, How can I achieve it?

First part of this, where it says go to your content type I'm assuming this is the Album content type we created in the album based image gallery tutorial.. however when I go to Display Fields all I see is Images, no Node field? Am I missing something here?

Great tutorial though, wish I'd seen this a week ago!

@Jason, yes, that should be hide Images for full node and teaser if you wish.

@Makoto, It should be possible, but not easily using Drupal's pager function as it requires an SQL query. I will write a tutorial in the next few days on adding pagination to the grid.

@Makoto, I have written an updated tutorial on creating a grid of images for an album in Drupal 6 with pagination. If you followed the tutorial by the letter originally, then you should be able to use the code as is without modifying table names etc.

@admin Yes, I'm reading it right now. Thanks a lot for your help and tutorials!

Hah sorry, my bad - totally missed that... was nearing the end of a long day! Thanks for the perfect tutorials on this!

[...] I have now written a tutorial on creating a grid of images within an album using the node-album.tpl.php method. « Fatal error: Unsupported operand types in email_registration.module on line 61 Creating [...]

Thank you very much for your tutorials. I have been using them for the last few days and feel like i've learned a lot. (seriously)

Have you dealt with the lightbox2 arrow key navigation issue in firefox? http://drupal.org/node/349843

i was wondering how you have dealt with it. (if at all)
My site that has this issue is http://www.crmw.net/edwight/node/4
(made this site before finding your tutorials)

Thanks for your time.

I hadn't used the arrow keys before but I see the issue. This will be an issue with the Lightbox2 module and will have to wait for the maintainer to fix the problem.

First, let me thank you for a wonderful series of tutorials.

For about a month I have been experimenting with several online photo album tutorials which either failed to meet my requirements or failed to deliver as promised. Your tutorial is by far the most comprehensive, as it takes one all the way to pagination. Also lightbox was a novel and slick way to page through the images in a gallery.

Second, while your solution appears to be the best I have seen so far, I still have not been able to get it to work.

1) After adding and saving the descriptions for each successfully uploaded image NO descriptions get stored. When I upload a new album it gives me the option of adding a description to each image once uploaded. However, Going back to view the album content shows that all the description fields are empty. A var_dump confirms that both my description and title fields are empty.

2) My field_image CCK appears to be okay. I reviewed the field_image CCK imagefield several times against your previous tutorial.

3) I do not know why the descriptions are not being saved. Your tutorial is the first I have seen/attempted which allows for the addition of an unlimited number of image files to the album content type. Are each of the files saved as a separate node? Or are there several image files attached to each album node? Would you happen to have an idea why my descriptions are not being saved?

4) Another notable photo album solution was communicated in a quickly covered video tutorial by Jeff Eaton of Lullabot (http://www.lullabot.com/articles/photo-galleries-views-attach). While his solution fell apart in terms of pagination, it has an interesting architecture. His solution uses the node reference URL module, and the Views Attach Module and a couple of somewhat non-intuitive embedded views. There is a nice teaser post with an album overview photo, and then a nice gallery similar to yours. What is nice about his solution architecture is that each photo is a node which gets associated with an album node, which gives the admin a lot of control and flexibility in terms of creating views.

I may try to merge your paging solution with Eaton's technique, if I am unable to get the descriptions to work.

Thanks for your help.

Not sure about the descriptions. Is the database updated with your description?

This solution has all the images attached to it's relevant node.

The Lullabot solution sound like a better solution for flexibility but I am not sure what the problems are for adding pagination, I guess it depends on the queries being ran by Views.

James, thanks for the help. While I am not exactly sure how to verify that the database updated with my description, I was able to export the structure and dump the data for the album content type table. Browsing the table revealed no additional information (at least that I could find).

Exporting the table structure for table `content_type_album_fotos`, I get the following.
--

CREATE TABLE `content_type_album_fotos` (
`vid` int(10) unsigned NOT NULL DEFAULT '0',
`nid` int(10) unsigned NOT NULL DEFAULT '0',
PRIMARY KEY (`vid`),
UNIQUE KEY `vid` (`vid`),
KEY `nid` (`nid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Dumping data for table `content_type_album_fotos`, I get the following.

INSERT INTO `content_type_album_fotos` VALUES(66, 66);
INSERT INTO `content_type_album_fotos` VALUES(67, 67);

----

While I am a relative newbie to mySQL and phpMyAdmin, this table structure and data dump appear to me to be inconsistent with a setup which would record the descriptions of multiple images (files) added to a node. If so, this would explain why the database fails to take and retain the descriptions I provide. Any thoughts?

As I stated in my prior comment, after entering the descriptions for multiple images associated with the album content and then clicking save, the descriptions on the page instantly disappear, never to return.

I have setup the album content type properly (as far as I can tell) to accept multiple image files with descriptions. I must have configured something at least partially correct, since I am able to upload multiple images and to have them all for later recall, and displaying in a grid of images. Also after uploading I am given a dialog box to enter a description for the image file.

This is the result from my var_dump, which shows the uploaded jpg image, but nothing stored for either description or title.

array(12) { ["fid"]=> string(2) "95" ["list"]=> string(1) "1" ["data"]=> array(13) { ["fid"]=> string(2) "95" ["width"]=> string(4) "3968" ["height"]=> string(4) "2232" ["duration"]=> string(1) "0" ["audio_format"]=> string(0) "" ["audio_sample_rate"]=> string(1) "0" ["audio_channel_mode"]=> string(0) "" ["audio_bitrate"]=> string(1) "0" ["audio_bitrate_mode"]=> string(0) "" ["tags"]=> array(0) { } ["description"]=> string(0) "" ["alt"]=> string(0) "" ["title"]=> string(0) "" } ["uid"]=> string(1) "1" ["filename"]=> string(12) "P1040001.JPG" ["filepath"]=> string(46) "sites/multisite_name.sitename.local/files/P1040001.JPG" ["filemime"]=> string(10) "image/jpeg" ["filesize"]=> string(7) "4680336" ["status"]=> string(1) "1" ["timestamp"]=> string(10) "1278149007" ["nid"]=> string(2) "67" ["view"]=> string(638) "

Thanks again for your help.

From the var_dump, the file ID is 95, so if you search your files table in PHPMyAdmin you will be able to find out if the data is saved in to the database or not. By the looks of the var_dump, it isn't which implies there may be a problem with filefield or imagefield.

Hi, i follow your tutorial, but something is not matching, it works well without grid and pagination, but with grid and pagination, the images did not show in the content, but the pagination do, i've inserted 12 pics.

So must be on the code, can you give me a clue of what's happening?

Thanks

Make sure that you haven't given different names to your content field for your images.

yes i did, but a in the code, i replace the field_images for the name i've gave, and in the database query i did the same thing. It find the pics because the pagination works fine, just, the pics dont shows up;

ps: i did this on another site that worked fine, and i followed the same steps

thanks again

Seriously, thank you so much!!

Its awesome!!
I am new to drupal, and I was scratching my head for hours until I found this tutorial.

Thanks a lot!

Do you have clean URLs enabled?

Great tutorial. I made a mistake somewhere though, I have the images twice now, once one per row and second time two per row, as i defined in the template. Any idea where to look to fix this?
http://www.friendshostel.ro/node/24
Thank you.

You need to go in to your content type, the edit your content type for your album and chose Display fields, then set your images field to for both the teaser and full node.

Interesting tutorial; thanks.

Matt

You need to go in to your content type, the edit your content type for your album and chose Display fields, then set your images field to for both the teaser and full node.

I am having the same issue.... set your images field to for both the teaser and full node.... what is ?

ok for some reason it edited out my words there on my reply earlier, lol. I am also having the same issue where you say set your images field to...........for both the teaser and full node.

What is ...........

I figured it out... Christina both the teaser and full node should be set to hidden...

Hi, can someone please share the node-album.tpl.php with me? I did as instructed and nothing happens except now there are no images under gallery node at all. I am a newbie and strugling with image galleries and trying that galleries have the latest image. Please help!!

Thanks

it looks like some coding error as I dont see "No image found.." message but I dont know how to fix it. I am still trying...

Make sure your theme cache has been reset and any field changes you did are reflected in the code.

Thanks James, i will try that. But this is first time I am using any template. There are no other custome template for this installation. Do you still think that I need to flush it? Just asking for the sake of knowledge...

First thing to do with any problems relating to themes is to clear the theme registry/cache.

James, as per the instructions".. In your content type, go to Display fields and set the Full node to . This will take the images out of the $content variable..."

If the full node is how would the images attached to the node will appear? When i enable it by selecting LightBox2->thumbnails, it started to show the pictures but in one column. It looks like template was never applied to the node.

This might be the issue. I am using acquia-drupal stack. I created another site as "photo.localhost:8082" on my laptop. What it did is created a folder "photo.localhost" under site folder at the root. Now I put this template under "\Sites\acquia-drupal\themes\acquia\acquia_marina". But it does not look that it is reading this template.

Any suggestions?

Navnish

I even tried to add some very simple string to make sure that the template is being applied to the node...but i guess is not being read....I am stuck at this point.

Thanks for your help.

Navnish

Okay it worked....sorry user error...machine name of the album node was different from "album". It was photo_album that was whole issue. Every thing looks great now...

Now i will move to next step of my research...

Thanks James.

Good to hear you resolved it.

How do I include "Download Original" in the slideshow page using this code?

Thank you.

Changing:

title="'. htmlspecialchars($image['data']['description']) .'"

To:

title="'. htmlspecialchars($image['data']['description']) .''. htmlspecialchars('<a href="'. $image['filepath'] .'" rel="nofollow">Download Original</a>') .'"

Should work.

Thanks James. YOu have been a great help.

it should work. However I am getting page not found error. I checked the URL of the link and it has a URL alias in it that I created to play around with Pathauto module and then I uninstall it. However path to this gallery still maintained the old alias even after I uninstalled the module. Is this how it behaves? I did not know that you have to maually change/delete the aliases after you unintall the module.

Or is there any way we can remove them in one go rather than one by one? Sorry I am new to drupal.

Navnish

May need to be:
title="'. htmlspecialchars($image['data']['description']) .''. htmlspecialchars('Download Original') .'"

I am not sure what you mean about the aliases. Uninstalled what module?

Pathauto module.

I installed this module and reconfigured the URL Aliases by inserting a custom string for ALL the URLs just to test it. And then after playing around, I uninstalled this module. But some how the some of the paths for the imported images in one of the galleries still maintained that old path with custom string in the URL. For example,

default path
http://localhost/node/43

would appear as
http://localhost/customstring/gallery1

I thought that after removing the module would automatically bring the changed paths to its original form.

That is what I was talking about. I am sorry I might not be using commonly accepted terminology here as I am pretty new here.

Navnish

James,

Thanks for your help. I was able to create prototype of my image gallery.

After the image galleries, I need to make video galleries. We have over 2000+ 3rd party hosted videos on youtube, google, blip.tv etc. I am using emfield and was wondering if you have done something for video galleries like image galleries.

Thanks

Did you actually uninstall the module or just deselect it on the modules page? Either way it may just leave the URLs in place, I have never uninstalled pathauto.

I haven't but the same logic applies, although with video you will likely want to use a thumbnail which will click through to the video rather than having videos on the page.

Hi all and thanks for the tutorials.
I have everything working fine i think, but now i was trying to just show 9 images per page, and so on, instead of showing all in the same page.Iam very new to Drupal and building sites, so if you can point me in the right direction.

Thanks and keep up the good work ;)

Sry, i just saw the link the the other tuturial, gonna try it out tonight thanks again.

James,

First off, thank you for the great tutorial.

I am having the same issue as DEXVEX earlier in this thread.

I have added the node-album.tpl.php file and added the code for grid with pagination, however something is not working correctly. I get the albums themselves in the grid format, however when I go into an album, I get the pagination function, but no images appear. I know that the code is finding my photos becuase it is giving me the correct number of pages that would be required, but the images are not showing up.

Here is the site that I am working with at the moment: www.yourimagereflected.com/drupal

I have copied your code exactly, and did a find and replace to rename images to just image as that is the name of mine.

Any help or advise would be greatly appreciated. I know I am probably just overlooking something simple.

Thanks in advance.

James,

An add-on to my post above, here is what my code in node-album.tpl.php looks like:

field_image);
if ($count > 0):
$image_per_page = 9;
$sql = "SELECT f.fid, i.field_image_data, f.filepath FROM content_field_image i JOIN files f ON f.fid = i.field_image_fid WHERE nid = ". $node->nid;
$count = "SELECT COUNT(f.fid) FROM content_field_image i JOIN files f ON f.fid = i.field_image_fid WHERE nid = ". $node->nid;
$query = pager_query($sql, $image_per_page, 0, $count);
while ($data = db_fetch_object($query)) {
$image[$data->fid] = array(
'filepath' => $data->filepath,
'data' => unserialize($data->field_image_data),
);
}
$rows = array();
$image_per_row = 3;
$i = 0;
$row = 0;
foreach ($image as $image) {
$rows[$row][$i] = 'nid .']" href="'. imagecache_create_url('lightbox', $image['filepath']) .'">'. theme('imagecache', 'thumbnail', $image['filepath'], $image['data']['title'], $image['data']['title']) .(trim($image['data']['description']) != '' ? ''. $image['data']['description'] .'' : '');
$i++;
if ($i == $image_per_row) {
$row++;
$i = 0;
}
}
?>

$columns): ?>

<tr class="">
$item): ?>
<td class="">

No image in album

The problem is with your imagecache preset name for the thumbnail. In my code it is 'thumbnail', after some playing with your site it should be 'thumb'.

Change:

theme(‘imagecache’, ‘thumbnail’, $image['filepath'], $image['data']['title'], $image['data']['title'])

To:

theme(‘imagecache’, ‘thumb’, $image['filepath'], $image['data']['title'], $image['data']['title'])

That was it! Thank you so much. I knew it had to be something simple that I was just overlooking. Thank you Thank you!!

Hi again James, and thanks again for this excellent piece of work!
I have one question though, and it is related to image_fupload, which I know from the above comments that you haven't looked much into yet? But perhaps you have by now? It is really quite annoying, because when using image_fupload, I just cannot get the grid to display as a grid! It works perfectly without fupload, but with, it is simply a one-column display, and rather may I say boring...
I've tried a godzillion different things by now, and it has taken me days to get ...nowhere, really. Could I be so bold as to beg you to do a simple tutorial with image_fupload as well? Or at least point out the settings with image_fupload? It would really be very very much appreciated!!
In any case, thanks again for all the brilliant work you've already put into this! I've already learned tons about cck and views, thanks to you!

Hi There,

Your tutorials look really cool..Thank you so much.

I am looking for a tag cloud , basd on the taxonomy. I tried tagledic, 3d tag cloud. Its not looking great. In this website, you have created a superb tag cloud.

Will you be able to provide me with a set of instructions to create this tag cloud block, based on taxonomy. Thank you so much for the much.