Ajax Image Gallery module for Drupal

objective : A nice and flexible gallery module for Drupal

Modules Depedency

• Imagefield
• ImageCache
• CCK

Standard Features

• Multi-upload
• Multi-Edit
• Admin options
• Ajax Interface
• Arranging options
• CCK flexibility
• thumbnail generation
• Gallery Themes
• Organic Group Integration
• Views Integration

1
 Ajax Image Gallery module for Drupal

Functionalities
The AJAX IMAGE GALLERY module gives a selected content type the ability to display the content of other
content types containing an imagefield with no multiple value. Here is how it would work :

photo
I created a new content type called ‘Photo Gallery’ : gallery

I created a new content type called ‘Photo’, with an imagefield in it : photo

photo
I set the ‘Photo Gallery’ content type as an ‘AJAX IMAGE GALLERY’ content type : gallery

photo
I set the ‘Photo’ content type to be used by the ‘Photo Gallery’ content type : gallery
photo

2
 Ajax Image Gallery module for Drupal
Once it is configure, when the user create a new ‘Photo Gallery’, it will create several ‘Photo’ nodes, that will all
be attached to the ‘Photo Gallery’ node.

photo
photo photo
gallery

photo photo
photo

The galleries can have 2 settings for the content : Display the ‘Photo Gallery’ content, or the ‘Photo’ content. If
the gallery displays the ‘Photo Gallery’ content, the body and comments will be the same for all viewed images,
as it will use the fields of the ‘Photo Gallery’ content type. If the gallery displays the ‘Photo’ content, the body and
comments will be different for each viewed images, as it will use the fields of the ‘Photo’ content type.
photo photo

photo gallery
photo photo gallery photo
content content

comments photo comments

photo photo
content
photo photo
content
content content
photo photo

comments comments

comments
comments

3
 Ajax Image Gallery module for Drupal

Integrations

Views : Gallery should expose its fields to views, and should also expose the related images fields.

Organic Group : Groups should be able to have there private galleries.

4
Ajax Image Gallery module for Drupal

Admin Section

5
 Here the user can choose which content
type should be the ‘gallery container’. Any
kind of content type is allowed

6
Here the admin can choose which content type should be
used as the ‘Image’ content type. Only the content type
with an image field (imagefield) are listed here (no multiple
value allowed).

7
8
Ajax Image Gallery module for Drupal

Creating the gallery

9
This is the form to create a new gallery.
All is done on this one and only page

10
When clicking on “Add New’ the user can choose a
FOLDER of image, or one single image

11
After selecting the folder, the images should be uploaded and
added to the gallery. A progress bar should indicate that the
user should wait until all the images are uploaded

12
 When the upload is done, the user can choose to edit the fields of
each image. These fields reflect the fields of the image content type.
By default, the title should be filled with the file name.

13
After editing the images fields, the images should appear in
the images fieldset as icons. The user can select one or
more images by clicking on it, and then can use the menu
to apply some modifications to all selected images

14
 The user can modify the infos of
each selected image by clicking on
the edit menu item

15
The modifications are updated on
the list. Here the image has now a
new title.

16
The user can also re-arrange the order of the images. When
overing an image, you can see an area at the bottom of the
image that the user can use to drag and drop

17
The order of the image is dynamically
updated

18
The modification can be previewed live, but the user will need to
click on ‘Update’ to make the modification effective. A message
should warn the user about that, and the modified image should
have a different background (here blue)

19
 As images are nodes, the user can also re-use
images that he already uploaded previously. By
clicking on ‘Add existing’ the user can browse older
images he or she previously uploaded.

20
Like before, just click on an image to select it.

21
 The user should be able to select multiple
images. Click on the ‘Add’ input to add all the
selected images.

22
Now the images are added to the gallery.

23
 The user can REMOVE FROM THE GALLERY any image by just
clicking on ‘Remove’ after selecting images. Another section should
be dedicated to DELETE the images from the server.

24
After clicking on ‘Remove’, the user can either UPDATE
the modifications, or CANCEL in case of an error by
clicking on ‘CANCEL’

25
26
The user can also change the thumbnail of the gallery that will be
displayed when the gallery is viewed as a teaser.
First select the image.

27
Then click on ‘Thumbnail’ to make the selected image the
thumbnail of the gallery. A little Star icon should indicate
which image is the thumbnail of the gallery.

28
Ajax Image Gallery module for Drupal

Viewing the gallery

29
The two diferences between this module and Image gallery
module, is that other images are represented by icons, and
the content is updated with AJAX.

30
When overing the image, if settings allow it, the user can view
the original image in a new window.

31