bootstrap 3

Drupal views exposed form in a bootstrap modal

I am currently working on a site with the Bootstrap theme which has a fullscreen views map ( Goomap ) with exposed filters. As the map is full screen I want to have the exposed filters inside a bootstrap modal. Luckily it is quite easy to theme the views exposed filters form.

To do this you have to override the views exposed filters form theme file. Copy the views theme file (sites/all/modules/views/theme/views-exposed-form.tpl.php) and place the copy in your own theme folder. To get this to work you may have to click on "Rescan template files" under "theme" in the view. Your site should now be using the new template file and you can edit it as you please. You can get more specific with the naming of the template file to target a single exposed form, (views-exposed-form--VIEWNAME.tpl.php for example).

Below is the code that I am using in my views-exposed-form.tpl.php

 <a data-toggle="tooltip" title="<?php print t('Filter Results'); ?>"> 
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#filterModal">
<i class="glyphicon glyphicon-cog"></i>
Filter
</button>
</a>

<div class="views-exposed-form">
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="filterLabel">Filter</h4>
</div>
<div class="modal-body">

<div class="views-exposed-widgets clearfix">
<?php foreach ($widgets as $id => $widget): ?>
<div id="<?php print $widget->id; ?>-wrapper" class="views-exposed-widget views-widget-<?php print $id; ?>">
<?php if (!empty($widget->label)): ?>
<label for="<?php print $widget->id; ?>">
<?php print $widget->label; ?>
</label>
<?php endif; ?>
<?php if (!empty($widget->operator)): ?>
<div class="views-operator">
<?php print $widget->operator; ?>
...

Drupal 7 Bootstrap image field upload widget

When using the Bootstrap theme in Drupal 7, the image upload widget leaves a lot to be desired. I looks pretty crappy
Below is how I overcame this.
It should probably work with file fields too but instead of overriding THEME_image_widget, you would override THEME_file_widget, though I haven't tried it yet.

First, add this to your css

 .btn-file { 
position: relative;
overflow: hidden;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity = 0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

Then override the theme_image_widget in your template.php
A note on admin theme
If your upload widget is on a node edit page (or any admin page) the active theme will be your admin theme. This means the code will need to go into your admin themes template.php and the css in your admin themes css.

 function MYTHEME_image_widget($variables) { 
$element = $variables['element'];
$output = '';
$output .= '<div class="image-widget form-managed-file clearfix">';

if (isset($element['preview'])) {
$output .= '<div class="image-preview">';
$output .= drupal_render($element['preview']);
$output .= '</div>';
}

$output .= '<div class="image-widget-data">';
if ($element['fid']['#value'] != 0) {
$element['filename']['#markup'] = '<div class="form-group">' . $element['filename']['#markup'] . ' <span class="file-size badge">' . format_size($element['#file']->filesize) . '</span></div>';
}
else {
$element['upload']['#prefix'] = '<div class="input-group"><span class="input-group-btn"><span class="btn
...

Drupal Bootstrap 3 theme media queries javascript event (like Omega 3)

Having used the Omega 3 Drupal theme for a few years now I got quite use to writing javascript functions that would react to the 'reponsivelayout' event that was supplied by the theme. This event would fire after the responsive classes were applied to the body tag when the page loaded or when the media queries changed the site layout.
I often used this event to create things like mobile menus and such.
Now on the latest site I am building I am trying out the Bootstrap theme which does not fire such an event, so I thought I would add one that basically uses javascript similar to the Omega 3 theme.
If you would like the same, just add a js file to your Bootstrap sub theme with the js below:

 (function($) { 

var setCurrentLayout = function (oldLayout, newLayout) {
$('body').removeClass('responsive-layout-'+oldLayout).addClass('responsive-layout-'+newLayout);
$.event.trigger('responsivelayout', {from: oldLayout, to: newLayout});
};

var checkCurrentLayout = function () {
var current = 'xs';
var dummy = $('<div id="bootstrap-media-query-dummy" class="container"></div>').prependTo('body');
var width = dummy.outerWidth();

if (width > 750 - 1) {
current = 'sm';
}
if (width > 970 - 1) {
current = 'md';
}
if (width > 1170 - 1) {
current = 'lg';
}
dummy.remove();
if (typeof Drupal.settings.currentLayout == 'undefined') {
Drupal.settings.currentLayout = current;
setCurrentLayout('', current);
} else if (Drupal.settings.currentLayout != current) {
var old = Drupal.settings.currentLayout;
Drupal.settings.currentLayout = current;
setCurrentLayout(old, current);
}
...