Gallery Howto [#988728]

You want a link that leads to a Colorbox gallery using images uploaded with Imagepicker.
Here is how.

This assumes you have Imagepicker and Colorbox installed.
First of all create a group in Imagepicker, we'll call it 'gallery1'.
Upload some images with Imagepicker, adding them to the group.
You will need full php rights to do the following.
Create a page or a block containing this code:

// visible image. edit this to suit, this is what you click on to activate the gallery. Does not have to be an image.
$fimg = "<img title='Photo Gallery' alt='A photo gallery' src='/sites/all/files/imagepicker/1/image-to-click-on.jpg'>";
// name of group
$gal = "gallery1";

$fpath = DIRECTORY_SEPARATOR . file_directory_path() . DIRECTORY_SEPARATOR . IMAGEPICKER_FILES_DIR . DIRECTORY_SEPARATOR;
$sql = "SELECT DISTINCT i.img_id, i.uid, i.img_name, i.img_title, img_description
FROM {imagepicker} AS i JOIN {users} AS n USING (uid),
{imagepicker_user_groups} AS u JOIN {imagepicker_group_images} AS g USING (gid)
WHERE g.img_id=i.img_id AND u.group_name = '$gal'";
$result = db_query($sql);
$ct = 0;
$out = "";
while ($row = db_fetch_array($result)) {
  $n = $row['img_name'];
  $t = $row['img_title'];
  $d = $row['img_description'];
  $full = $fpath . $row['uid'] . DIRECTORY_SEPARATOR . $n;
  $thumb = $fpath . $row['uid'] . DIRECTORY_SEPARATOR . IMAGEPICKER_THUMBS_DIR . DIRECTORY_SEPARATOR . $n;
  $out .= "<a href='$full' class='colorbox' rel='$gal' title='$d'>";
  if (! $ct) {
    $out .= $fimg;
  }
  else {
    $out .= "<img src='$thumb' alt='$t'>";
  }
  $out .= "</a>";
  if (! $ct) {
    $out .= "<div style='display:none'>";
  }
  $ct++;
}
$out .= "</div>";
echo $out;

To change the gallery just add/remove images from the group.

The code can of course be written more compactly but this shows how it works.

Hope it helps someone.

Comments

Comment #1

hutch CreditAttribution: hutch commented 20 January 2011 at 20:13

Here is the same sort of thing but for Drupal 7:

$out="";
$gal="gallery1";
$clickon = "Photo Gallery";
$fpath = base_path();
$fpath = preg_replace("/\/$/", "", $fpath);
$fpath .= DIRECTORY_SEPARATOR . file_stream_wrapper_get_instance_by_scheme('public')->getDirectoryPath() . DIRECTORY_SEPARATOR . IMAGEPICKER_FILES_DIR . DIRECTORY_SEPARATOR;
$query = db_select('users', 'u');
$query->fields('i', array('img_id', 'uid', 'img_name', 'img_title', 'img_description'));
$query->join('imagepicker', 'i');
$query->leftjoin('imagepicker_group_images', 'g', 'g.img_id = i.img_id');
$query->leftjoin('imagepicker_user_groups', 'iug', 'iug.gid = g.gid');
$query->condition('u.uid', 'iug.uid');
$query->condition('iug.group_name', $gal);
$rows = $query->execute();
$ct = 0;
$class = '';
foreach ($rows AS $row) {
  $n = $row->img_name;
  $t = $row->img_title;
  $d = $row->img_description;
  $full = $fpath . $row->uid . DIRECTORY_SEPARATOR . $n;
  if ($ct) {
    $class = "js-hide";
  }
  $out .= "<a href='$full' class='colorbox $class' rel='$gal' title='$d'>";
  $out .= ($ct ? "$n" : "$clickon") . "</a>";
  $ct++;
}
echo $out;

Comment #2

hutch CreditAttribution: hutch commented 26 January 2011 at 16:00

This functionality is now builtin and will be available in the dev versions tomorrow.

Comment #3

hutch CreditAttribution: hutch commented 11 February 2011 at 11:15

Status:

Active

» Closed (fixed)

Comment #4

JGO CreditAttribution: JGO commented 6 June 2011 at 18:32

How to use this?
All my images show one by one and never with a previous/next button. Any help on how to do this with imagepicker would be appreciated ! :)

Comment #5

hutch CreditAttribution: hutch commented 6 June 2011 at 20:49

Use the latest stable or dev version of Imagepicker.

Create a group in imagepicker and add the images you want in the gallery to the group.

Go into admin imagepicker general settings and enable gallery blocks, save and tell it how many blocks you want. You will need colorbox set up too of course.

Go to the blocks admin and configure the block to use the group you want, where you want the block, what to click on etc

Done.

Comment #6

JGO CreditAttribution: JGO commented 7 June 2011 at 07:17

Thx a lot hutch, but if I understand correctly this will only work for blocks?

I don't understand why not my images on the node with a link to colorbox have this behaviour. I think this really is a missing feature if this is not possible :(

Comment #7

hutch CreditAttribution: hutch commented 7 June 2011 at 09:03

To get images to be recognised as a gallery by colorbox give them a 'rel' attribute, eg add rel='gallery1' so you have something like

<a href="/my/path/to/myimage.jpg" class="colorbox" rel="gallery1">click here</a>

In the first one and something like

<a href="/my/path/to/myimage2.jpg" class="colorbox js-hide" rel="gallery1"></a>

In all the other images.

See the colorbox documentation for more details

Comment #8

JGO CreditAttribution: JGO commented 7 June 2011 at 12:14

Hi, This works indeed, I just added rel="gallery1" to all my links to pictures. It would be good if you could support this when inserting the image. E.g. if you select "colorbox", there should also be a button for enabling all pictures on the node in a galery. That would be very handy and would avoid fiddling with html code ;)

Comment #9

hutch CreditAttribution: hutch commented 7 June 2011 at 12:20

I will look into the possibility. Please remember that imagepicker does not and cannot know what has been inserted before, it only knows about what is being inserted now.

Comment #10

JGO CreditAttribution: JGO commented 7 June 2011 at 13:34

Thanks! You could just use an option like the insert module has:

http://www.coagula.org/content/sites/default/files/images/colorbox.jpg

There you have a global option. If you just always add the tag "All-Gallery" or something alike when a global option is set, then all images will show up in the same gallery.