Images and galleries
There are three main ways to acheive Gallery functionality in Drupal. Each has its advantages so choose the method that best meets your requirements:
- The Gallery module integrates with a standalone package called Gallery
- Initial integration of the package is difficult (Let me know if you would like a tutorial)
- Not as customisable but has a lot of features
- Organising galleries within nodes means multiple images are saved together
- Easy to set up
- Quick to upload multiple images but individual images can't be classified
- Creating your own image node type and using views to display them
- This is highly customisable but of course requires more work to set up
Gallery module
Tutorial available by request
Node galleries
Node galleries are a very quick and easy way to have a simple gallery set up but the end effect is actually very effective.
There are three main things we need to do to get this working:
- Set up ImageCache to generate our thumbnails
- Set up an ImageField to display thumbnails with a lightbox display
- Add a bit of styling with the CSS Injector module
Setting up imagecache
The imagecache module will automatically resize images and then save them for the next time they are requested. With HTML it is possible to display an original file in any dimensions. This means that a small thumbnail could actually have a large filesize and take a long time to load. Imagecache will take that large image and automatically resize it down to a small filesize with the correct dimensions.
- Download ImageCache and enable imagecache and imagecache_ui.
- Go to: Site building > ImagaCache
- Click 'Add new preset'
- Enter a name e.g. thumbnail
- Click on 'Add Scale And Crop' (I almost always use this action because it allows all images to conform to the same dimensions)
- Enter a width of 160x100 (Which will give us a golden ratio)
You can now use this image size throughout your site.
CCK Image Field
There's a module for Content Construction Kit (CCK) called ImageField which allows images to be uploaded to a field. This field can hold one or even multiple images and then display them in a pre-defined format, see:
- Download and enable ImageField and FileField
- Go to: Content types > Edit Page > Manage fields (Or another content type you wish to an an image field to)
- Enter a Label and Field name for your image
- Select the 'File' type and the 'Image' form element
- Under 'Global settings' you can select the number of images to allow
- Click 'Save field settings'
If you have set up you can choose how the image should appear:
- Click on the 'Display fields' tab
- Select the imagecache preset for your Teaser and or Full node
Note: With Lightbox2 installed you will have display options with zoom functionality.
Styling the thumbnail images
You will see now that your images are displayed on top of each other with no spacing. This I'm afraid to say requires a bit of knowledge on web development but I'm here to make things easy. That's why we'll be using the CSS Injector module.
- Download and install the CSS Injector module
- Go to: Site configuration > CSS injector
- Create a new rule
- Put any title you like and then in the CSS code put:
- div.field-field-#your-image-field-name# div.field-item {float:left;padding:4px;}
- Replace #your-image-field-name# with the name of your image field. e.g. I put:
- div.field-field-image div.field-item {float:left;padding:4px;}
- Save
float:left makes the images 'float' against eachother and padding:4px puts a bit of spacing around each image.
The way that we positioned the thumbnail was using CSS or Cascading Style Sheets. This is an entire subject by itself but if you're interested you can find out more at http://www.w3.org/Style/CSS/learning. If you require help with something small or think it would be of help to others then I'm happy to assist but I can't help with complex problems without prior arrangement.
Views galleries
You could set this up from scratch but recently the Views Gallery module was created which takes a lot of the hard work out but because it's built on views you will still be able to customise it.
You will need:
- Token
- Content Construction Kit (CCK)
- FileField
- ImageField
- Node Reference URL Widget
- Views Gallery
- Views attach
- ImageAPI
- ImageCache
Optionally you will need:
Enable:
- Views gallery
- ImageAPI GD2
And optionally (recommended):
- Views slideshow
- Lightbox2
If you want to customise your gallery you will need to also enable:
- Views UI
- Imagecache UI
When you enable Views Gallery it will ask you if you want to install required modules, Click continue. Views Gallery will automatically create your first gallery ready for you to add images. You can edit this gallery and add new ones by going to: Content management > Create content > Gallery
Galleries are set by default to be promoted to the homepage. You can change this by going to:
- Content management > Content types > Edit Gallery
- Under 'Workflow settings' uncheck 'Promoted to front page'
Displaying all galleries
We will now create a page that shows all of our galleries.
First we need to add a cover image to our gallery content type:
- Go to: Content management > Content types > Edit Gallery > Manage fields
- Under existing fields select 'File: field_gallery_image (Image)' and save
- Scroll down and Save field settings
Next we need to create a view to gather our cover images:
- Go to: Site building > Views
- Click 'edit' next to 'gallery'
Nex we'll create a page to show our galleries. We could create a page using Views but this way is more flexible and easier to edit the text on the page:
- Go to: Content management > Create content > Page
- Call it something like: Galleries
- Under URL path settigs set the url to: galleries
- Save
Now let's add our block to our page:
- Go to: Site building > Blocks
- Scroll to the bottom and find 'gallery: Gallery block' ######
- Change its Region to 'Content'
- Click configure next to 'gallery: Gallery block'
- Under 'Page specific visibility settings' select 'Show on only the listed pages.'
- Enter 'galleries' in 'Pages' and save