Sadia+Sharmin

This page contains the following:
1. Tutorial on Creating a Photo Gallery using Colorbox 2. Tutorial on Making the Thumbnails Different Images than the Actual Pictures on Colorbox 3. Tutorial on Making a "Filter by Category" navigation using tags and views

===**One of the issues I had trouble with while working on my site, was getting Colorbox working the way I wanted it to (with the thumbnails of the pictures showing different images than the actual pictures). In case anyone is facing the same issue, here are two tutorials. The first one is about creating a photo gallery with the thumbnails being scaled/cropped versions of the original, and the second one is about using completely different images as the thumbnails.**===

//Note:** If Colorbox doesn't quite match your needs, here is a handy comparison of several Lightbox-type modules, to help you pick one that is right for you: http://drupal.org/node/266126//

**Tutorial 1: Creating a Photo Gallery using Colorbox**
>> Colorbox module (http://drupal.org/project/colorbox) >> (2.1) Visit http://jacklmoore.com/colorbox/ and download the latest version by right-clicking on the link and "Save Link As..." >> >> (2.2) Log in to your site using an FTP program such as FileZilla or Fetch >> (2.3) Navigate to sites/all/libraries (If you do not have a folder named "libraries", create one in the sites/all/ directory) >> (2.3) Unzip the Colorbox plugin, and drag the whole folder into the sites/all/libraries directory of your site > > **Note: Clicking on "Colorbox" leads you to the configuration page for the Colorbox module, where you can adjust several things such as if some pages have Colorbox disabled, which image style is used when viewing images, if all the images on the page should be a gallery or considered separate, if the captions should be shortened, and so on. I did not change any of this. Leaving the settings as default is usually fine.** > > > > >
 * 1) Install and enable all the modules needed for this tutorial:
 * 1) In order for Colorbox to work, we also need to install a Colorbox plugin (http://jacklmoore.com/colorbox/).
 * 1) Go to Adminitration >> Configuration, and click on "Image Styles" under the "Media" section
 * 1) Create a custom Image Style that we'll use to display the thumbnails. This way, the thumbnails displayed in nodes will automatically be the original image in a smaller size, without us needing to manually upload different sized images. To do this, click on "Add Style", give the style a name such as "colorbox-thumb" or something of the sort, and click "Create New Style".
 * 2) On the next page, under "Effects" select "Scale". If you want the image thumbnail to be scaled and cropped, select "Scale and Crop".
 * 1) Click "Add" beside the drop-down menu, select the dimensions you want each thumbnail to be, and "Update Style".
 * 2) Now, let's create a content type for our gallery. Go to Administration >> Structure >> Content Types, "+Add Content Type". I named the content type "Gallery", put "Gallery of Images" under the Description, put "Hidden" under "Comment Settings", and unchecked "Display Author and Date Information" under "Display Settings". Then, click "Save and Add Fields".
 * 3) Add a new "Image" field. Label it as you wish (I labelled mine "Gallery_Image"). "Save".
 * 1) On the next screen, click "Save Field Settings". Then, adjust settings as necessary (make sure to check "Enable Alt Field" and "Enable Title Field"), and scroll down to the bottom of the page. Select "Unlimited" under "Number of values", so we can upload as many as we want into our gallery. Then, "Save Settings".
 * 1) Click on the "Manage Display" bar at the top. For the image, choose "Hidden" under "Label", and choose "Colorbox" under "Format". Then, click on the "Settings" button at the side.
 * 1) Under settings, make the following selections. Then, update and save.
 * 1) Now, let's go to Administration >> Content, and "+Add Content". Select "Gallery". Give it a title and body text as needed, and under the "Gallery_Image" section, upload all the pictures you want to put in your gallery. The text you put in the "Alt"/"Title" text area (based on which one was picked under the "Caption" section during the previous step) will be the caption for your image.
 * 2) "Save", and go to your home page. The gallery should be there, with all your images. Clicking on any image will bring up the colorbox with the caption, and you can navigate through the images using the arrows on the sides.



**Tutorial 2: Making the thumbnails different images than the actual pictures in Colorbox**
//**Follow steps 1 to 9 of the above tutorial. These remain the same.**// To make it so that the thumbnail can be a completely different image than the original one, I used the Insert module (http://drupal.org/project/insert). 1. Install the Insert module per usual. 2. Go to Structure >> Content Types, and click on "Manage Fields" beside your Gallery content type. 3. Click on "edit" beside the Gallery_Image field. 4. Scroll down to the new section labelled "Insert" and click on it to expand the section. Select "Enable insert button" at the top, and from the list of image styles, select "Colourbox colourbox-thumb", where "colourbox-thumb" is the image style we used for the Colourbox thumbnails. Save.

5. Go back to Structure >> Content Types, and click on "Manage Display" beside the "Gallery" content type. 6. For "Gallery_Image" set both "Label" and "Format" to . (Or else, the image will show up twice, after you insert it.) 7. Now, let's go to Administration >> Content, and "+Add Content". Select "Gallery". Give it a title and body text as needed, and under the "Gallery_Image" section, upload all the pictures you want to put in your gallery, as well as the thumbnail pictures for each image. 8. For each image you want to use as a thumbnail, select "Colourbox colourbox-thumb" from the "Styles" drop down menu. 9. The text you put in the "Alt"/"Title" text area (based on which one was picked under the "Caption" section during the previous step) will be the caption for your image. 10. Click the "Insert" button beside each thumbnail image. This will make something like this pop up in your body text area: "" 11. Here, just change the link after "a href" to the link of your actual image instead of the thumb. To get this link, right click on the image from the list of images you've uploaded, and copy the link address. Then paste this link as the link that your thumbnail links to. 12. "Save", and go to your home page. The gallery should be there, with all your thumbnail images. Clicking on any thumbnail will bring up the colorbox with the original image that it the thumb links to, and you can navigate through the images using the arrows on the sides.



**Tutorial 3: Creating a way to "filter by category" using tags and views**
//(I mainly wrote this up for my own reference in case I need to do something similar later on. But then I decided to post this on the wiki in case anyone else finds this useful. I'm not sure if this is a good way to do this, but this is the simplest way I could come up with, so, I hope it's okay/useful.)//

//I used this to filter my portfolio pieces by category (i.e. "web", "print", etc.), but I think it could be applied to other things as well…?//

1. Create a content type (Structure >> Content Types, "Add Content Type"). Name the content type as fit (I named mine "work_sample"). Under "publishing options", select "published". Under "display settings", uncheck "display author and date information". Under "comment settings", select "closed". 1.b) Click "Save & Add Fields". Add fields as necessary (e.g. I had a title, body, and image field). Then, add another new field as follows, and "save". 2. Content >> Add Content of the type "work_sample", fill in the body/title/etc. Under the "Category" section, type the category name. e.g. "web" 3. Add all other content that fall under the "web" category in this way. 4. Go to Structure >> Views, and "Add new view". I named the view "Web Design". Choose the following options, then "Save & Exit":

5. Repeat steps 2-4 for each other category, replacing "web" with the other category names as necessary. 6. Now, you have pages for each category. For the "view all" option, just repeat step 4, but with these options instead (note the "tagged with" field is left blank). Then, "Save & Exit". That's all. =)