Integrating Views and Image Gallery Modules

Views is a fantastically powerful module! For those of you who haven't played with it in the past, you definitely should. Now I'm a big proponent of doing things the same way as much as possible (technically speaking). If you don't have to hunt and peck all over creation for what you're looking for, I deem it a good thing. With that said, the image_gallery.module leaves some to be desired. It does some great work for us, true, but the way it goes about it is entirely different from they way that one might like it to be done. What follows is a method that will allow you to control your image galleries via views, and still retain the nice feature set of image gallery.

The setup:

You're going to need the following modules installed and working on your site:

At the bottom of the page I'll provide the view so that you can import it w/o having to do the setup, but what follows is the logic involved.

In this lesson:

  • You'll get a good, quick, easy introduction to what arguments are and how to use them.
  • You'll learn how to execute functions else where in the system from a view (under certain circumstances)
  • You'll be introduced to the arg() function
  • AND you'll get a good intro to what views are if you haven't played with them before

Things you should already know:

  • As with any tutorial I do, a solid understanding of html/css is a good thing to have
  • You should be able to download/install your own modules
  • And if you haven't at least played with image_gallery.module a little to know how it works currently, then this entire tutorial will be largely lost on you.

So let's get started already!

We're going to make the assumption that you've followed what I've outlined thus far and have a working copy of views, image, and image_gallery installed. So let's create a new view. (As I've said the import for the view is on the bottom of the page, but the logic for the view follows)

I've named my view gallery_view, I've check marked Provide page view, and we've set the url to image/tid/$arg. We selected a list view and we've turned on the pager. Choose how many images you'd like on your page (I chose 10).

Let's discuss that url that I skipped over so quickly. This is the first part of setting up an argument (as you may have guessed). What it denotes is where the argument will show up in our url. In this case, image_gallery.module formats its galleries via taxonomy. Taxonomy urls are usually denoted as "taxonomy/tid/1" or something similar. What we want is the "1" out of that url, which is exactly what we've told the view to gather for us, and that is our first step into working with arguments. Following our example here, the "1" is now an argument we'll use to help choose the specific set of results we want to display.

Now, before we leave the page area, we have a little work left to do. One of our options towards the bottom is Empty Text. Empty Text is an option provided to us so that we can tell the view what we want it to do if the results of our view are empty. In this case we're going to tell it to fall back to image_gallery.module's typical way of displaying. If you open up the Empty Text area you'll see an Input Format. This is no different from the input format that you might find anywhere else in drupal. Opening this up will allow you to select the php code filter. Once that's complete paste the following code into the Empty Text area.

<?php
return image_gallery_page($type = NULL, $tid = arg(2));
?>

Just trust me when I tell you that this is indeed the function you want to fire off. The image_gallery_page() function does all the heavy lifting to give us the proper image gallery page (who'da thunk?). The only thing we need to do to make it work correctly is pass the proper gallery id to it. This is done through the arg() function. The arg() function is a fantastic function that allows you access to the actual drupal url that the page is on. This doesn't work for aliases it only works for the real url. If for example we had a url example.com/node/1 and it had been aliased to example.com/about, arg(0) will still return "node" not "about". The arg() function begins "counting" at 0, so if in the previous example we wanted to return the node id that we're on, we'd do so with arg(1). In the above code we're passing in arg(2) from "image/tid/$arg" which will line up with $arg. I know that might be a little confusing, however it's important to note that this step is necessary only because we are linking image_gallery and views together. It actually has NOTHING to do with the argument work we've done thus far. These two thing are related only because they're looking at the same argument in the url, no other reason.

Skip now down to Fields. In fields we need only add one field (fields are required for list and table views), in this case we'll need Image: Display Image. Make sure that the Handler: is set to Image with link, and that Option: is set to Thumbnail.

Next is the Arguments area. This is where we'll actually define what is taking our argument and how it's being used. Add an argument of Taxonomy: Term ID and set Title to %1, Option to 0, and Wildcard to %1. The significance of %1 is that it's the first argument we've defined. There are ways of defining more than one argument for a single view, so %2 would denote the second argument.

Filters is just Node: Type of Image, and Node: Published equals yes.

Our Sort Criteria is Node: Created Ascending.

And that's our view.

Polishing our results:

Other tutorials on this site can teach you to theme your results however you might like. This tutorial strives to do no such thing, so as a final touch we'll be adding a little bit of css to our style sheet.

.view-gallery-view .item-list ul li {
  float:left;
  width:150px;
  height:150px;
  background-image:none;
  text-align:center;
  margin-bottom:20px;
}

.view-gallery-view .item-list img {
  border:2px solid #000000;
}

This css should finish up the details we need to make our view look like a real live gallery. Now any gallery page controlled by image_gallery will now use our view, and it will indeed look like a gallery. Additionally any page that doesn't yield results will be pushed to image_gallery to handle. It's important to note that this solution does NOT handle image_gallery pages that contain images AND galleries. I'm sure it could be modified to do so, but I've not tried thus far as I don't use the image_gallery module that way.

The View import code as promised:

  $view = new stdClass();
  $view->name = 'gallery_view';
  $view->description = '';
  $view->access = array (
);
  $view->view_args_php = '';
  $view->page = TRUE;
  $view->page_title = '';
  $view->page_header = '';
  $view->page_header_format = '1';
  $view->page_footer = '';
  $view->page_footer_format = '1';
  $view->page_empty = '<?php
return image_gallery_page($type = NULL, $tid = arg(2));
?>
';
  $view->page_empty_format = '2';
  $view->page_type = 'list';
  $view->url = 'image/tid/$arg';
  $view->use_pager = TRUE;
  $view->nodes_per_page = '10';
  $view->sort = array (
    array (
      'tablename' => 'node',
      'field' => 'created',
      'sortorder' => 'ASC',
      'options' => 'normal',
    ),
  );
  $view->argument = array (
    array (
      'type' => 'taxid',
      'argdefault' => '2',
      'title' => '%1',
      'options' => '0',
      'wildcard' => '%1',
      'wildcard_substitution' => '',
    ),
  );
  $view->field = array (
    array (
      'tablename' => 'image',
      'field' => 'nid',
      'label' => '',
      'handler' => 'image_views_handler_image_img_link',
      'options' => 'thumbnail',
    ),
  );
  $view->filter = array (
    array (
      'tablename' => 'node',
      'field' => 'type',
      'operator' => 'OR',
      'options' => '',
      'value' => array (
  0 => 'image',
),
    ),
    array (
      'tablename' => 'node',
      'field' => 'status',
      'operator' => '=',
      'options' => '',
      'value' => '1',
    ),
  );
  $view->exposed_filter = array (
  );
  $view->requires = array(node, image);
  $views[$view->name] = $view;