Making the Galleria Feature

Feb
17

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.

AttachmentSize
galleria_feature.tar_.gz6.01 KB

6 Comments

Good stuff. I was especially

Good stuff. I was especially interested to see your use of the Node Relationship module. We are using it in a very similar way (just a much different finished product for the gallery). I thought you might be interested in checking out a module that I submitted to drupal.org to display small thumbnails of the images that are referenced as part of the nodereference autocomplete widget: http://drupal.org/node/1045052. Check out the screenshot to see it in action: http://drupal.org/files/issues/nref_widget_thumb_screenshot.png.

By the way, if you would like to check it out, make sure to get the version from comment #4 (http://drupal.org/node/1045052#comment-4106962).

Hi Kurt, Thank you for your

Hi Kurt,

Thank you for your comment. Noderef_widget_thumb module works perfect. Dependence to it will be included to the feature as soon as this module will be published on Drupal.org. Hope you will get access to Drupal repository soon.

Good luck

Thanks for checking it out.

Thanks for checking it out. Also, if you have a minute, I would appreciate you taking the time to comment on my issue on drupal.org.

Thanks again.

Not a problem. This module

Not a problem. This module perfectly suits for Galleria Feature.

Just curious what versions of

Just curious what versions of views + views slideshow + views slideshow galleria you guys are using on this feature. things don't seem to align for me here.

It looks like this feature is built using views 3.x

But, views_slideshow_galleria-6.x-1.0-beta3 requires views_slideshow-6.x-2.3 and views_slideshow-6.x-2.3 has a dependency on views-6.x-2.x

I haven't been successful in getting this feature integrated into a bare drupal site using only the modules required to make this work.

Think it has to do with the views block not properly getting the node id from URL.

ok, so i got it working. the

ok, so i got it working. the problem was with the context "galleria_feature_gallery" that shipped with the feature.

Node Type condition was set to:

Galleria Feature Image.
Should be Galleria Feature Gallery.

Thanks for sharing!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options