Drupal 7 & Bootstrap – Photo Gallery adding Link Grouping to module and Creating multiple galleries on one page tutorial

 

 

 

The other day I was creating a Drupal 7 Bootstrap photo image gallery when I discovered Bootstrap – Photo Gallery module and the developers forgot to include Link Grouping. What is Link Grouping you ask? When you have multiple Photo Galleries on one page you can group each gallery together with Link Grouping. It’s not terribly difficult to make a few changes in the Drupal 7 contributed Bootstrap – Photo Gallery.

After reading the documentation about the BlueImp Gallery project, let’s get down to business. We are going to create multiple groups with gallery views all on one page. This is going to require creating a template page, editing to the Bootstrap – Photo Gallery module, creating a content type and setting up multiple views. This may seem like a lot, well that’s because it is. I’m going to have section the entire process. The gallery will cycle through the entire page of galleries, if you do not have link grouping.

First thing’s first. I’m assuming you have Drupal 7 and Bootstrap JS installed already. Install Bootstrap – Photo Gallery and Views. Also image styles are helpful to know about, we can create a new image size for the thumbnails.

Add new content type: admin/structure/types/add
name: Photo Gallery

Manage Fields: 

• image
• body
• category

Image Field Settings:  

• required
• file directory= image_gallery
• preview Image size= medium
• number of value: 1

Category Field Settings:

• field type=List(text)
• widget type=Select list
• Default=none
• number of values=1
• allow value list= key|value pairs

Manage Display: Photo Gallery

• Image, Above, Image – original
• Category, hidden, Default
• Body, hidden, hidden

Now add some photos. After you added some photos, we are going to create the view blocks.

Add new views: admin/structure/views/add

• name: photo gallery view 1
• Create a Block
• Display format: bootstrap gallery of fields

Continue & Edit

Fields: Add image field

Filter Criteria:
Content: Type (= Photo Gallery)
Content: Category (= key)

Repeat these steps until you created multiple Gallery Blocks.

Now it’s time to decide where you really want to put these Gallery Blocks. You can put them in a sidebar Region or create a custom page template. What do you want to do? What ever your decision, we’ll need to group them if you have multiple sections per page and you have more than one gallery on a page. Categories does help to separate galleries in the thumbnail display, but not inside the slideshows. The gallery will cycle through the entire page of multiple galleries without link grouping.

We’ll need to hack the Bootstrap – Photo Gallery. Unfortunately the developers for this module did not include the Link Grouping option in Views.  That means next update to this module will more than likely not have Link Grouping, so we’ll need to make a backup after the hack is complete. I’ll try to contact the developer of Bootstrap – Photo Gallery to get them to publish my proposal.

Here we go hacking code.Use your favorite notepad++ editor.

Go to your module directory bootstrap_gallery.

Navigate you way into the bootstrap_gallery/theme folder. Open bootstrap-gallery-item.tpl.php and add this value to the data-gallery attribute on the link. data-gallery="<?php print $link_grouping ?>"
Save and close

Navigate the folder to bootstrap_gallery. Open views_bootstrap_gallery_plugin_style_bootstrap_gallery.inc and find options_form to add this code near the bottom of this function.
$form['bootstrap_gallery']['link_grouping'] = array(
'#type' => 'textfield',
'#title' => t('Container ids and link grouping.'),
'#default_value' => $options['link_grouping'],
'#size' => 60,
'#description' => t('If the data-gallery attribute value is a valid id string (e.g. "#blueimp-gallery"), it is used as container option.'),
);

Save and close

Next we open the file bootstrap_gallery.module  and find the function bootstrap_gallery_preprocess_views_view_field. Near the bottom of this function you will find the code that looks like this.

$vars['output'] = theme('bootstrap_gallery_item', array(
'original_image' => $original_image,
'thumbnail' => $thumbnail,
'title' => $title,
));

We will need to edit the code to save Link Grouping to this code below.
$link_grouping = $options['link_grouping'];
$vars['output'] = theme('bootstrap_gallery_item', array(
'original_image' => $original_image,
'thumbnail' => $thumbnail,
'title' => $title,
'link_grouping' => $link_grouping,
));

  Save and Close

 Clear ALL Drupal Cache.

We’ll now see that we’ve added a text field in the Views Bootstrap Gallery Settings. Let me know if you find this useful.