HOW TO: Get Lightbox2, Ubercart and Views to group separate Nodes as a gallery

I have written up my experiences of using the above modules to create a series of galleries in the hope that it will help others. This is just how I did it; I have not written it up as a tutorial, because it is more of a workaround, and I am not sure that this is how everyone else would do it.

Also, I am not an expert in ANYTHING - I just experiment until I am satisfied with the results. So, some of this could be wrong or inefficient. I hope someone will help out with corrections if that is the case.

I noticed that there were several people having a similar problem in getting Lightbox2 to create galleries that link to content that IS NOT PART OF THE NODE. This seems to come up more as an issue for Ubercart, where the product images are handled differently to how they are with Image node types, Gallery2 galleries and so on. If you are not using Ubercart, the concept could easily be adapted to pretty much any other system.

You can see the end results of my efforts on my site: www.euchrid.co.uk. Flick around the different galleries and on some individual pictures to get the idea of how the galleries work. (This is not a cheap attempt at advertising my site, I just don't have another working example!)

This explanation may seem a bit involved, but at heart it's fairly simple. In short, we use Views to create 'hidden' galleries that are embedded within a node.

Modules that NEED to be enabled for this to work:
CCK: Content, FileField, Imagefield
Views: Views UI, Views Attach, View Slideshow
Ubercart: Attribute, Ubercart Views
Imagecache (including Image APIs and UI)
Lightbox2

To be sure, I would just enable all Ubercart, Views and Imagecache modules that relate to one another and as many CCK ones as are relevant. Obviously, Lightbox2 is essential.

The following advice WILL NOT work without the above modules, but could, potentially, be adapted.

On the Lightbox2 settings page under Automatic Image Handling (/admin/settings/lightbox2/automatic), I have everything selected as 'lightbox grouped'. I am not sure if this is necessary, but I'm superstitious about turning it off. I'm PRETTY sure, though, that the settings on this page don't make any difference for this particular procedure.

If the Lightbox2 Automatic Image Handling is not working for you (due to your setup), or, as with Ubercart, you just can't use it, then this procedure should help somewhat.

As I understand it, Lightbox2 grouping seems to work by reading the HTML of a page and finding all the link tags that have a common rel="lightbox[your_groupname]" tag. However, all groupnames must be the same in order for them to show up together. Ubercart, CCK and the Imagefield modules do not allow (as far as I could work out) any way to control this 'rel' tag. To get around this, we need Views and a little sleight-of-hand.

This procedure assumes you have a product image that you want to connect, through a Lightbox gallery, to images that do NOT appear within the same node, but are related in some other way (content type, vocabulary, etc.) I am sure that the technique can be applied to other, similar situations, though.

An important note:
------------------

It looks like Taxonomy vocabularies that are attached to deleted node/content types might be partly responsible for keeping old content types/product classes 'alive'/resurrecting them when they seem to be otherwise deleted. For example, you create a vocabulary called "muffins" and attach it to node type "cakes". You delete the node type "cakes", and then, some time later, you decide you actually needed that content type, and create a new content type, again called "cakes". Aspects of the old content type, such as the fields associated with it, 'magically' reappear, instead of there being a completely new type. Solution: create new content types with unique names OR delete the associated vocabulary/terms along with the node type. Both seemed to work for me.
-------------------------

If you already have products uploaded, and just want to link the images in different nodes together, then skip to step 6.

Right. (Ensuring all the above modules are enabled first) HERE WE GO:

1. Set up the required imagecache presets (/admin/build/imagecache) if you need to change the default Ubercart ones, or if you need extra ones. For now, at least make sure you have one imagecache preset that is 1px x 1px, either scaled or cropped - I guess that cropping is quicker and uses less server power. (This 1px image is for the lightbox gallery - we will come to the reasons for that).

2. Set up the content types, and then the product classes. For Ubercart to send its product details to CCK content types, the product class MUST have the same (machine readable) name as the content type.

***** VERY IMPORTANT *****
When you create new product types, you MUST create them under 'Content Types' (admin/content/types) first, NOT as a product class. Yes, creating a product class will create a content type, BUT it can lead to complications (or so I found). This is especially the case if you decide not to use the Ubercart product settings to display the image, etc; then they will not always display correctly or in the same the way. (You will see why you might want to change the Ubercart settings for displaying products below; read on).
***** ***** ***** ***** *****

Therefore, it really pays to have your basic product content organised beforehand. You don't want to, say, add "bicycles", then delete the content type, change it to "vehicles", then decide you were wrong and need to change it back to "bicycles". Adding new content types later is NOT a problem; changing content types and putting old ones back in CAN cause problems. Better to get things at least basically organised in the beginning.

3. Go to /admin/content/types. Make sure the 'Display fields' (for Imagecache) are correctly set up for each content type AFTER the product classes have been attached in the above step. (The Display Fields tab is usually the last tab on the right when you click on 'Manage Fields' next to the content type.)

Ultimately, I found that having 'uc_category image linked to node' under Teaser and 'Lightbox2: product -> product_full' under Full node was best for my site. It is worth experimenting with these settings, as there are a LOT of them - however these settings CAN be changed later on. At the moment, it is simply important that SOMETHING shows up.

4. For EACH product content type, go to Manage Fields, and click on Configure next to Image (field_image_cache). Go to FileField Path Settings, and under File Path, make sure you put a unique directory for each content type. I found it easiest to name the directory and the content type the same. The reason for doing this is: it avoids some duplicate entries cropping up later on. Reminder: MAKE SURE YOU DO ALL OF THIS BEFORE ADDING CONTENT to the content types.

5. Now, if you are using Taxonomies/vocabularies, you should add in your vocabularies and a few terms. Attach them to the relevant content types if that's part of your set-up. Remember what I said above; if you delete a content type, the vocabulary MIGHT resurrect its fields if you add the content type back in again later on. For testing purposes, I would keep the vocabularies and terms as short and simple as possible. For example, "Vehicles" vocabulary with "cars" and "bicycles" is enough for now; you can add "JCBs", "aeroplanes" etc later on.

6. NOW you can add some content. Upload your image and some basic information into one of your new product content types and see how it looks. Anything wrong? Probably, if you followed all the above steps, you will have two identical images, which looks rubbish. To get rid of this, go to /admin/store/settings/products/edit. Make sure the Lightbox2 radio button is selected. Now go to 'Product Fields' (admin/store/settings/products/edit/fields). UNCHECK the 'Image' box. On my site, the only boxes I have ticked here are 'Sell Price' and 'Add to Cart'. Click 'Save Configuration'.

Now you can go to the image/product you just uploaded. You should be down to one image.

This illustrates an important point: the default Ubercart product image and the Lightbox display in the Image field are SEPARATE and work differently. I think this relates to why it is so hard to get disparate Ubercart product nodes grouped together in Lightbox.

7. If you upload another product, you will find that clicking on the product image and the previous product you uploaded will produce the lightbox, but the images will not link to each other. This is what we are about to fix.

HERE IS WHERE THE VIEWS MODULE COME IN.

8. By now, you should have product types set up by having your product classes linked to your content types, any vocabularies linked to the content types (if you are doing that, anyway), and at least 2 test products uploaded to the site.

Go to /admin/build/views/add, and you will add a new view type.

If you're not used to Views, don't worry, it's not as complicated as it looks!

Give the View a sensible name (sensible to you, at least), and ensure the view type is 'Node'.

In your new View, under 'View settings' give your View a Description/Tag. I named mine the same as the name I gave it in the above step.

Go to 'Basic Settings' and ensure 'Row Style' is marked as 'Fields'.

Now click on plus sign on the 'Fields' section in the middle of the View and leave everything unticked except for Group multiple values. You'll want the Label as 'none'. Now, in the Format box, you need Lightbox2: 1x1 -> product full. Replace "1x1" with whatever you called your 1px imagecache preset. Click 'Update'.

Go to the 'Filters' section and choose an appropriate filter. This will determine what will be presented in the View; in our case, that means whatever product content types you want to link together in a gallery. The easiest choices are likely to be Taxonomy: Vocabulary or Node: Type - what you choose here will depend on your content types and vocabulary names. Click 'Update' again.

If you mess up your choices, you can always change just about ANYTHING in the View, so don't worry about making mistakes here.

Next, you might want to Sort the content. Mine is arranged in date order, except in my Random Images block, which is obvious enough. Choose something under 'Sort Criteria' or leave it blank for now.

You can forget about Relationships and Arguments, unless you really know what you're doing with them.

On my system, I needed 'Distinct' set to 'Yes' under the 'Basic Settings'. I suggest leaving that unticked unless you keep seeing duplicate content in your View. (To test if you're getting duplicate content, you can change the 'Fields' entry to something bigger than the 1px image so that you can see what's going on, then change it back again later. Obviously, you will need more than one or two items to test if you're getting duplicates or not).

On the left hand side of your View, select 'Node' from the drop-down list, and then click 'Add display'. Click on the new tab just above the drop-down list, marked 'Node content'. Go to the new section in the bottom left: 'Node content settings'. Under 'Node Types' select whichever are appropriate for you. Under 'Build Modes' choose 'Full Node'.

It is important that you add a 'Node' display rather than a 'Block', because a block WILL NOT work for this gallery trick. (Unless, perhaps, the content you want as part of the gallery is in the same block).

Make sure you SAVE your View.

What you should have is a View that displays EVERY IMAGE connected to a node type or taxonomy vocabulary or term (or whatever other criteria you chose in the 'Filters' section). So, if you have a content types "underwear" and "jackets", and vocabularies of "colours" and "sizes", you could set the View up to display ANY "underwear" or "jackets" that use the vocabulary "colours", or ONLY "underwear" that uses "colours" and "sizes". You get the idea.

9. Right, so your view is set up with the 1px image set to display. In every content type/vocabulary type that relates to what you selected in the View, you should now have a 1px dot for every image that is part of a node. Needless to say, this doesn't look very good. You will need to edit the CSS.

I simply viewed the source of the page, and found the CSS class that Views pre-assigns to the View I created. It seems to me that Views is not consistent with the names it gives these classes, but I might be missing something. In my case, the CSS class was in the format of "view-" followed by whatever name I gave the View under 'View settings'.

In my CSS file, I made sure that this View was not going to show up, no matter what else I was likely to do with CSS on the page. I added the following:

.view-name-of-your-view, .view-name-of-your-view a, .view-name-of-your-view img {
display: none;
padding: 0px;
border: 0px;
margin: 0px;
}

.view-name-of-your-view a:link, .view-name-of-your-view a:visited, .view-name-of-your-view a:hover, .view-name-of-your-view a:active {
outline: none;
}

I'm sure there's better and more elegant ways of doing the above (like using positions), but it worked for me.

10. So now, your view should be invisible. If not, double check your CSS and the class name for the View. Either way, now is a good time to test your View. Go to one of your products (one that is linked to the content type/vocabulary of your View), and click the image. (If you set up the View Filter to show only content types of "vehicles", then pick a node with "vehicles" content type).

You should now have right and/or left arrows to scroll to other images in your gallery. One of the beauties of this is that, even when you update your content, the product image maintains its place in the gallery in relation to the other images, depending on how your View is sorted. Clicking on the right or left arrows in Lightbox will always take you to the next image in your View, regardless of how your nodes are organised elsewhere on your site.

11. Adapting this method, it is possible to create all kinds of galleries. Changing the 1px image to a normal sized one (like 'product') will result in a straightforward gallery (as long as you're not using one that has been hidden with CSS!) A random image block is created in the same way, except you choose 'Global: Random' in the Sort Criteria of the View.

HERE IS A BONUS TIP ABOUT UBERCART ATTRIBUTES:

I found I wanted to change the attributes of a product class that was already set up. But how? After changing the options of an attribute, any new product I created still had the old attribute's options. Huh? I eventually realised that what I had to do was to REMOVE the attribute, and then add it back again (in /admin/store/products/classes/your_product_class_here/attributes). Now, the new options show up.

I hope all this helps, and that I haven't left anything out. Please point out any errors/corrections/frustrations, and I will edit this post if necessary. I've had children screaming in my ear all day, so I've probably done something wrong, but I hope not.

If somebody wants me to, I can copy this to a tutorial (but for Ubercart or Views or Lightbox2?)