Making the Galleria Feature

Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.

The Features module allows you to create and manage Drupal features, sets of components that can be exported and imported: content types, views, contexts, etc. Using Features allows you to group your favorite Drupal components together in a coherent feature and recreate it on another Drupal website. You can read more about the Features module here.

In this post we are going to talk about how to make a Drupal feature. As an example, we will review the Galleria Feature recently created by Trellon. This specific feature is not yet available on the Trellon public repository, but for now you can download it from this page.


Galleries on Earth Day Network

We have been working on the Earth Day Network project, which has photo-galleries in different sections:

  • Administrator-edited galleries on Earth Day Network's organizational web site
  • Blog posts, which can have any gallery from the organizational web site embedded
  • Act of Green galleries updated by users
  • Events galleries updated by users






Once we had built these galleries out, we were eager to use them in our other projects. The answer was to build it out as a feature.

Originally, Earth Day Network used the modalframe module to show individual images in a box when a user clicked on them. This allowed us to show node content for the image: Title, image, body, authoring information, date, and a "flag as inappropriate" link for user-updated galleries. In the feature, however, we used the shadowbox module instead of modal frame, since most galleries just needed to render a large image without all of the node content.


Preparations for making the Galleria Feature

Views Sideshow: Galleria

We named it the Galleria Feature, because it uses the Views Slideshow: Galleria module. Galleria is an awesome gallery jquery library that can be extended with new themes and behaviors. We built a custom theme called Media, which was included into our version of Galleria on GitHub: https://github.com/dealancer/galleria. In the Media theme we solved a serious issue regarding Views Slideshow: Galleria and Galleria integration.

Content types

The next step in creating the feature was content type configuration. We created a new pair of content types: Gallery and Gallery Image. The Gallery content type has multiple Node Reference fields to Gallery Images. This structure allows users to include the same image in different galleries and the Node Relationship module provides a gallery editor with a nice administrative interface. Note: This structure was only used for administrator edited gallery. For the user updated galleries, we used Node Reference in the reverse way, programmatically referencing the Gallery from uploaded images.

Views, Context and Imagecache

Next, we created two views: one for the galleries page and a second one for the gallery block. The gallery node id is passed to this block as an argument and images are displayed by the Views Slideshow: Galleria formatter. The gallery block was bound to the gallery node using Context module. For these views and content types we used Imagecache presets.

Theming

We wanted to style the galleries view for the Galleria Feature, so we did some css work. Also in this feature, we wanted to show the title and body as overlays on the image. For this, we used a different method than was used for our original Earth Day galleries: we manually initialized alt and title properties for the image field in its template using following template code:

<?php
  $node
= node_load($row->node_node_data_field_galleria_feature_image_ref_nid);
 
$out = preg_replace(array('!alt=(?:\'.*?\'|".*?")!', '!title=(?:\'.*?\'|".*?")!'),
                      array(
'alt="'. strip_tags($node->body) .'"', 'title="'. $node->title .'"'), $output);
  print
$out;
?>

Shadowbox integration

Galleria allows you to programmatically extend its behavior and can provide callback functions for different kind of events. The main problem was the broken extension functionality in Views Slideshow: Galleria (http://drupal.org/node/1055198). So, we did Shadowbox integration in an external JS file (Note: It only works for the first galleria on a page):


(function ($) {
  Drupal.behaviors.galleria_feature_code = function (context) {
        var gallery = Galleria.get(0);
        gallery.bind(Galleria.IMAGE, function(e) {
            // lets make galleria open a shadowbox when clicking the main image:
            $(e.imageTarget).css({
                    cursor: 'pointer'
                }).click(this.proxy(function() {
                    Shadowbox.open({
                      content:    this._data[this._active].image,
                      player:     "img",
                      title:      this._data[this._active].title,
                      options:    {
                        modal: false, // <-- this is actually the default!
                        handleOversize: "resize",
                      }
                    });
            }));
         });
  };
})(jQuery);

We must place this script after galleria is loaded (in a footer). We did it in hook_init() using the following command:

<?php
  drupal_add_js
($path_to_module  . '/galleria_feature_code.js','module','footer');
?>


Making a feature

This is easiest part of the job. Enable the Features module and go to /admin/build/features/create. You should enable the necessary components for your feature. It could be content types, views, imagecache presets, context, etc. The Features module automatically finds dependents and will make suggestions for you. Then, click the Download feature button to get your feature! You will get a tarred file with a module, which is your feature.

Later, you can use this feature in another site. To do so, simply unpack the feature to your site modules directory, then enable the module and feature inside of it on the Features settings page. An enabled feature looks like this.

If a feature is changed, you could recreate it or restore it to its initial state. Remember one thing: Since you have created a feature, all components of that feature have become dependent, so if you delete this feature you could lose those components.

If you need to use additional code, you can include it directly into your feature module. The next time you recreate the feature, you will download it complete with your custom code. You could also use hook_install if you want to add some additional components that aren't handled by the Features module. Create a README file if your feature needs special tuning. Our feature does:

Before enabling Galleria Feature you need to:

1. Download galleria from http://github.com/dealancer/galleria and unpuck it to /sites/all/libraries
2. Download shadowbox from http://www.shadowbox-js.com/ and unpuck it to /sites/all/libraries
3. Update jquery library in jquery_update module
4. Use jquery_ui 1.7 library in jquery_ui module
5. Copy views-view-field--field-galleria-feature-image-fid.tpl to your theme path


Alternative uses for Features

Some developers use Features in site development by splitting a site up into non-overlapping parts and saving components of those parts into features. Then, these features are pushed to the code repository. After committing, the features are restored on the development site. For this use, Features needs the ability to write features directly into file system. Best practice calls for using Drush to recreate features, since the Features module extends Drush functionality.