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

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

bootstrap_project_1 bootstrap-3-preview




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
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.


Bootstrap 3 on Drupal 7 Issue with AccuWeather Widget

Bootstrap 3 on Drupal 7 Issue with AccuWeather Widget

Spent hours trying to find out what was causing the CSS to break on my AccuWeather widget. I have Bootstrap on Drupal. This is really a full task to get right.

You’ll need to replace ‘box-sizing:border-box’ with ‘box-sizing:content-box’ and if you have more nested elements that require the ‘content-box’ for whatever reason here is my solution. For example, AccuWeather’s widget does break CSS flow when accommodating Twitter Bootstrap version 3. Try wrapping the AccuWeather widget with a ‘.widget’ class like I did.

.widget * {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

This style will replace all ‘box-sizing:border-box’ from the widget class on down the tree.

Thread tells you: http://stackoverflow.com/questions/18854259/why-did-bootstrap-3-switch-to-box-sizing-border-box

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

How To Create a Form Callback with Drupal 7 – Part 1

FeaturedHow To Create a Form Callback with Drupal 7 – Part 1



Working with Drupal for a couple years, I wanted to create a form with a callback. I admit there are one or two methods to create a Drupal 7 form. I created the form in the module location in the sites/all/modules/custom/{modname}. In this series, will step though a process to create this form. The form submits data into the database and return a message all on the same page without a page reload.

Required Knowledge: Drupal 7, PHP, MySQL, Coding Knowledge, etc…

If you are a new comer to Drupal Module Creation, I will try to cover as much as possible in my series. I will try not to make this too boring for the more advanced people.


Modules created are self-recognized by two files that must be in the folder of your newly created custom module.
1. The .module file. Example: signup.module
2. The .info file Example: signup.info

The .module file is where all the custom code is written and can be left empty for this example.

The .info file needs a couple of things to become visible on the Drupal Module Page in the admin area.

The most basic .info file needs some variables assigned, the basic variables are name, description, dependencies array, core and package.

  1. Create the folder named sample all lower case in this location. sites/all/modules/custom/sample
  2. Create the files below.


// Intentionally left blank for sample module
// However the file needs to exist in the folder.


name = Sample Module
description = this is a newly created sample module
dependencies[] = mods,views
core = 7.x
package = Sample Module For Example Purposes

After typing or copy/pasting all this into the sample.info file and creating a sample.module file you will have this module listed on Drupal Module page.

Before we dive to far into the nuts and bolts of the form creation, beginners will need to understand the basics of Drupal 7 module creation. This watered down version hopefully will help. Use Google to find additional help if needed. I’ll try recording a video soon. The next part of this series will be basics of form creation.