Image Galleries in Drupal 7 - my experience

I recently needed to create a gallery - reliable, user-friendly, and without spending much time on a very low budget project. I outlined below the steps and pitfalls. Based on this project, I presented a tutorial at the 2013 BADcamp. A copy of the slides is attached. These slides are a bit more comprehensive, with cut-and-paste commands for module and library installations. At times, the order of installations is not ideal - for the tutorial, this was intended to show error messages for missing dependencies. The fix is then described on later slides.


I initially used http://drupal.org/project/media_gallery, which uses colorbox as the lightbox of choice. My issues with media_gallery were:

• The media gallery module uses colorbox as lightbox. The colorbox would frequently open only the top border of the image. The second image would be fine, but that's already a deal breaker. Additionally, colorbox doesn't handle varying screen sizes very well - on smaller screens (mobile devices), the image doesn't resize, and the visitor has to scroll down on the image to see the title.
  
  
• media_gallery displays the main gallery in rows and columns. For strange reasons, once I added the title of the image below the image, empty fields would show up in some of the rows, with some browsers. I'd adjust margins and width, and the problem would move to other browsers.
  
  
• Responsive behavior isn't really built-in.
  
  
• Nothing to do with media_gallery, but annoying anyway: The colorbox jquery has a conflict with tb_megamenu. I filed an issue with tb_megamenu. Since then, I have changed from tb_megamenu to superfish, which is much more flexible and more reliably maintained, so this is not a problem anymore.
  
  
  After checking out a number of other gallery modules, I settle for just creating my own with views, which is what I should have done from the beginning, because it's really not that difficult. Other media galleries have more options, fancy jquery effects, etc. However, the gallery described below does exactly what is required for the site, is easy to configure and maintain, and performs reliably.
  
  

Here are the steps:


1. Installed and enabled modules: lightbox2, views, field_collection, field_collection_views, epsacrop
   
   
2. create thumbnail style "thumbnail_epsacrop" as epsacrop style - square 200x200 or so.
   
   
3. Created content type: Image gallery
   Fields: Title, Gallery Image (field collection item)
   
   
4. Added fields to the field collection item (http://example.com/admin/structure/field-collections):
   Field: Image -> select "thumbnail_epsacrop" in "Epsacrop Settings", select "thumbnail_epsacrop" as Preview Style (This ensures that the user (who will add the images), can see the cropping when editing a page. ).
   Field: Image Title
   Field: Taxonomy reference (for sorting the images into different galleries)
   Enable "Title" and "Alt" for the image"
   
   
   The two titles are somewhat confusing, but they both have a purpose:
   The Title for the image will be displayed by the lightbox.
   The Title field from the field collection will be displayed underneath each image in the larger gallery view.
   
   
   Display: Select "thumbnail_epsacrop" for the image display here as well.
   
   
5. Create content of Image gallery content type. Enter several images, enter content into both title fields.
   The content type can be used to create content in different groups, so that the user/editor can group images logically.
   The taxonomy field adds another level of organization.
   
   
6. Create View ImageGallery (content - fields - content type, you know what I mean, if not, leave a comment and I'll elaborate).
   Add relationship (on the right side of the views configuration menu): Add the field of the field collection, for me: field_gallery_image
   (see Post on StackExchange for this).
   
   
   Now, the field collection fields are exposed to views, and I can add the image field and the title field of the field collection item to the view
   Image: Formatter: Choose Lightbox2:lightbox: your_epsacrop_thumbnail->large (this will show the thumbnail in the large gallery view, the large image in the lightbox).
   Title: uncheck "link to content".
   
   
   Add Filter: Content: Gallery Image not empty
   Add another Filter for your desired taxonomy term
   Add a path for your view (needed below)
   
   
   Format: Unformatted list (will show each image in one row)
   Save View
   
   
7. Enable lightbox2 for this view
   In http://example.com/admin/config/user-interface/lightbox2:
   Open section "Page specific lightbox2 settings"
   Click "load only on the listed pages"
   Enter the path for the new gallery into the "Pages" field
   Save
   
   
8. CSS - make a gallery
     .view-gallery .views-row {
                  position: relative;
                  float: left;
                  width: 250px;
                  height: 300px;
                  overflow: hidden;
                  margin: 10px;
                }
               .view-galleria img{
                  border: double 3px #ccc;
                  margin: 0;
              }

The beauty? It's responsive out of the box! The user/editor can organize the entries and crop the images.

Disadvantage: To create a new gallery requires creation of an additional view - site-builder intervention.

A demo will get added when the client site goes public.