The Knowledge Supply Chain » Websites http://www.ipov.net/apps/blog Fri, 17 Jun 2011 21:52:57 +0000 en hourly 1 Drupal 6 Ajax Screenshot Gallery http://www.ipov.net/apps/blog/2009/09/drupal-6-ajax-screenshot-gallery/ http://www.ipov.net/apps/blog/2009/09/drupal-6-ajax-screenshot-gallery/#comments Wed, 16 Sep 2009 15:06:24 +0000 robert.sanders http://www.ipov.net/blog/?p=112 We recently wanted to put up a carousel-style image gallery of product screenshots in our Drupal based website. After a good bit of research, I wound up with several “solutions”, but none of them did quite what I wanted; luckily I hit upon a solution by a bit of good luck simply by noticing some settings that had been enabled in the course of trying out some of the existing plugins.

Before getting into my solution, I’ll mention the two modules that are closest to what I want to achieve:

  1. Galleria – this module produces a carousel-style listing of image thumbnails, when a thumbnail is clicked on the full-size image is shown. However, this module has the following problems for my use case:
    1. The thumbnails are simply the original image file with an explicit width and height set; this means that if you have a lot of them, it can take quite a while for them all to load.
    2. Loading is not actually asynchronous, but there is a significant delay while the javascript initializes during which the content is hidden. There is no progress indicator during this time.
    3. The admin panel for the module has very limited options – the worst is that it doesn’t let you set the size of the carousel (which can be overridden in CSS), but does ask you to specify how many images to display – the images are scaled (using CSS) to fit in the carousel’s default size (you can hack the JS code to fix this, but then have to reset a number of other CSS properties).
  2. Fancy Slide - this module seems to be very new and as such has pretty much no documentation. If its development continues it could become a viable alternative to my needs. The biggest problem with this module currently is lack of control over the presentation.

The following solution uses existing modules. It seems logical that this technique is already out there, but as I can’t find it documented, I’m doing that here. The main modules you’ll need:

After installing the modules listed above here’s what you do:

Admin > Site Building > ImageCache

Add a preset, in my case “medium_thumbnail” which is a simple Scale to 128×128 pixels.

Admin > Content Management > Content types

Add a new node content type, I called mine “Screenshot.” There is no need for the “Body.” Once the basic node type is added go to “Manage Fields” and add the following:

An Image field for the screen shot. When configuring it enable the “Title text settings” set its input type to textarea (no default value). Disable the “Description field.”

  • Label: Screenshot
  • Name: field_screen (doesn’t really mater)
  • Type: File
  • Form Element: Image

The “Screen Gallery” field is my way of organizing multiple galleries. It may be more correct to use Taxonomy, but this keeps the settings in one place which I like. You need to add at least one entry in the list of acceptable values. Please feel free to write me if you think using Taxonomy or another approach is better.

  • Label: Screen Gallery
  • Name: field_gallery
  • Type: Text
  • Form Element Select

Finally, the Sort Order. If I have time I may experiment with the Nodequeue module in an attempt to replace this, but for now this provides a way to order the screenshots. If we use a decimal , and then enter “Integers” (1.0, 2.0) this will leave us room to insert new screenshots between existing ones.

  • Label: Sort Order
  • Name: field_order
  • Type: Decimal, precision = 12 , scale = 2
  • Form Element: Text

At this point you probably want to create one or two Screenshot nodes so that you have something to look at while building the view. Go to “Create content” > Screenshot. Enter the Node Title. Scroll down to the “Screenshot” field and upload an image file; once it has uploaded you should get a “Title” field next to the file where you can enter a description (note that entering HTML here probably won’t work too well as the contents of this field are output as an attribute).

Now for the final part: creating a View. Go to Admin > Site building > Views and “Add.” Use the settings:

  • Type: Grid – you could probably also use table, etc., but Grid works for me. Size the width to whatever size is going to work for your content. You may need to create a CSS entry to add some padding to the grid cells e.g.
    .views-view-grid td {
    padding: 0.8em;
    }
  • Row Style: Fields
  • Since I have a limited number of images, I set, Use Pager: No, Items to display: Unlimited.
  • Filters:
    • Node: Published = Yes
    • Node: Type = Screenshot
    • Content: Screen Gallery (field_gallery) and then set the “name” of the gallery from one of the allowed values you entered in the CCK list.
  • Sort criteria:
    • Content: Sort Order asc
  • Fields:
    • Content: Screenshot = Thickbox: medium_thumbnail image – this option is only available if you’ve installed Thickbox and set at least one ImageCache setting.
    • Node: Title – this will display the title of the Node (not the image title) directly under the thumbnail.

Now save the View. Mine is called “ccs_screens”, so I can embed it into a Page Node using

<?php
$view = views_get_view(‘ccs_screens’);
print $view->execute_display(‘default’, $args);
?>

That’s it. You can see our screenshots page at http://www.ipov.net/content/cosolvent-screenshots-0

If I have time I’ll also setup a quick screencast and update this post with a link to it.

Print Friendly

Share

]]> http://www.ipov.net/apps/blog/2009/09/drupal-6-ajax-screenshot-gallery/feed/ 0