Contact Form 7 Multi-Step Slider Form

Multi Step Sliding Form

BootStrap, CSS, Frank Thoeny, JavaScript, jQuery, PHP, PHP Frameworks, Website Developing, WordPress
Contact Form 7 Multi-Step Slider Form

Contact Form 7 Multi-Step Slider Form

It’s been 5 years since my attempt to find a solution for a multi step sliding forms with 3 separate WordPress plugins. I had something that worked as long as the plugins were never updated. Sadly enough, my hack became outdated and useless as plugins were updated. I had a couple of people contact me recently about using my multi step sliding form. My hack works on the same page without page reloads. They did not understand when the code hack did not work. The main reason because it’s outdated.

Nobody wants a hack. They want clean, reusable and supported WordPress plugins. Well now, that is what I look for as a WordPress developer. Amazingly enough, I am developing a clean, reusable and supported WordPress plugin. I promise it will be out soon.

My experience with custom designing themes and custom plugin development has given me a toolbox of awesomeness. I have 17 years of knowledge as a web developer. In those years, I have learned modern web development and best practices.

 

 

 

Advertisements
Drupal

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

BootStrap, Drupal 7, Website Developing

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

Drupal

Bootstrap 3 on Drupal 7 Issue with AccuWeather Widget

BootStrap, Drupal 7

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.