• warning: Parameter 1 to theme_link_node_thumbnail() expected to be a reference, value given in /home/diysite/public_html/includes/theme.inc on line 617.
  • warning: Parameter 1 to theme_link_node_thumbnail() expected to be a reference, value given in /home/diysite/public_html/includes/theme.inc on line 617.

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:

  1. 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
  2. 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
  3. 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:

  1. Set up ‎ImageCache‎ to generate our thumbnails
  2. Set up an ‎ImageField‎ to display thumbnails with a lightbox display
  3. 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.

  1. Download ‎ImageCache‎ and enable imagecache and imagecache_ui.
  2. Go to: Site building > ImagaCache
  3. Click 'Add new preset'
  4. Enter a name e.g. thumbnail
  5. Click on 'Add Scale And Crop' (I almost always use this action because it allows all images to conform to the same dimensions)
  6. 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:

  1. Download and enable ‎ImageField‎ and ‎FileField‎
  2. Go to: Content types > Edit Page > Manage fields (Or another content type you wish to an an image field to)
  3. Enter a Label and Field name for your image
  4. Select the 'File' type and the 'Image' form element
  5. Under 'Global settings' you can select the number of images to allow
  6. Click 'Save field settings'

If you have set up you can choose how the image should appear:

  1. Click on the 'Display fields' tab
  2. 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.

  1. Download and install the ‎CSS Injector‎ module
  2. Go to: Site configuration > CSS injector
  3. Create a new rule
  4. 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;}
  5. 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;}
  6. 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:

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'
You will also need to edit any existing galleries to un-check 'Promoted to front page' under 'Publishing options'.

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:

  1. Go to: Content management > Content types > Edit Gallery > Manage fields
  2. Under existing fields select 'File: field_gallery_image (Image)' and save
  3. Scroll down and Save field settings

Next we need to create a view to gather our cover images:

  1. Go to: Site building > Views
  2. 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:

  1. Go to: Content management > Create content > Page
  2. Call it something like: Galleries
  3. Under URL path settigs set the url to: galleries
  4. Save

Now let's add our block to our page:

  1. Go to: Site building > Blocks
  2. Scroll to the bottom and find 'gallery: Gallery block' ######
  3. Change its Region to 'Content'
  4. Click configure next to 'gallery: Gallery block'
  5. Under 'Page specific visibility settings' select 'Show on only the listed pages.'
  6. Enter 'galleries' in 'Pages' and save