Throbber gif drupal hosting

Submitted by Drupion Support on 25 September 2012 12:44

Modal windows are excellent design features because it allows you to easily display more information on a page without causing the inconvenience to the audience by making them load an entirely different page. I use modals where I want to display more information that isn't voluminous enough to merit a separate full page load.

Figure 1: These are links of titles, generated by a view that when clicked trigger a modal window with additional content.

Throbber gif drupal hosting in Drupal

Figure 2: After clicking on a link as shown in figure 1, a modal window appears with additional information.

There are two general ways to easily create modals in Drupal. The first, and common method is to use the ColorBox or the Lightbox2 modules. Both modules have some built-in functionality and can be configured at the site builder level.

For more control over theming and content of the modal, and gain knowledge of how modal windows work, I took the plunge into Earl Miles' (aka Merlin of Chaos ) Chaos Tools, or CTools method of modal creation. Here is how I did it.

This tutorial requires an intermediate to advanced level of understanding of Drupal 7. You will need to build a module to do this.

1. We'll name our module "Happy," so create a directory inside your Drupal install named, sites/all/modules/happy.

Inside the 'happy' directory, create two blank files, 'happy.module' and 'happy.info.' Also, download and enable the CTools module and the Views module. as CTools a dependency for the modal, and Views is a dependency for this example.

In addition, add the following for the modal customizations inside the module directory:

  • A "js" folder with "happy.js" within, eg 'sites/all/modules/happy/js/happy.js').
  • A "css" directory with "happy.css" within, e.g. 'sites/all/modules/css/happy.css').
  • An images directory for the custom AJAXs throbber gifs (if desired), e.g. 'sites/all/modules/happy/images/[image-name].jpg'
  • A theme directory for our custom Views template in 'sites/all/modules/happy/theme', and inside that directory a views template will be placed further along in this tutorial.

2. Configure the module with the 'happy.info' file.

Open, paste the below into the file, and save:

name = Happy
description = An example module for creating modal windows using the CTools framework.
core = 7.x
package = User interface
php = 5.2.4
dependencies[] = ctools
dependencies[] = views

Side note: For this example's purposes, we are using Views to generat a list of links to nodes that, when clicked, open the node content inside the modal window. Therefore, for this example, Views is a dependency.

Throbber gif drupal hosting Configure the module with the

3. Open the 'happy.module' and place the standard Drupal module scaffolding at the top, then save.

4. The first step is to define the menu path the modal link will open when the modal window appears.

Here are a couple of advanced points: The CTools module identifies "%ctools_js" as a placeholder in the request path. CTools will replace that placeholder argument with "js" or "nojs," depending upon the user's browser's Javascript capabilities. The "page callback" is a function that we will define next. This is where most of the heavy lifting takes place. Finally, there are no access restrictions in this example. That is, anonymous users can access the content of the modal since the 'page callback' is set to TRUE.

5. Define the 'page callback' function:

Although it appears complicated, the function above is straight-forward. If the user's browser does not support Javascript, as determined for us by CTools, then we will give them non-Javascript content. Otherwise, we fire off the CTools modal and give them the Teaser view mode of a node.

6. Next, we need to inject the settings for the modal window into the parent's page load.

You can do this is a number of hook functions where Drupal renders content for the page. Example hooks where the following code will work include hook_node_view (modify the $node->content object piece), hook_block_view, hook_field_load, and etc.

For the purposes of this example, I am generating a View of node titles that when clicked, display the node's teaser inside the modal. For that, I used the Views hook, hook_views_pre_render():

This is a lot to write when creating a modal. In summary, we have to load all of the CTools JS files. Then, we define the size and features of the modal using the CTools configuration array (in this example, the $happy_style). And finally, we inject the required settings, Javascript file, and CSS file for theming the modal contents.

7. Define the links that will trigger the modal window to appear.

So far we have defined the page and content that will display inside the modal, and we have defined the initial styles of the modal. Now, we must define the trigger that will open the modal window. All that is really required are links with particular CTools classes. Since I am using Views, I am going to define a views template for my list of linkable titles. That way, I can modify the links inside the view to be CTools trigger aware.

Alternatively, you may define the links that trigger the modal on the theme layer using the hook_preprocess hooks, or inside a views template inside the site's theme directory.

I prefer to have all functionality of a custom module inside the same module directory. It's cleaner. Therefore, I opted to create a views template inside the Happy module directory.

Here's the best way. First register the theme and views template:

After declaring this, you will need to create a [module_dir]/theme directory and place the 'views-view-fields--happy.tpl.php' file inside. For initial content, use the contents of the Views module's default "views-view-fields.tpl.php" template, located inside the Views module's theme directory.

Because I have registered a hook_theme and inside the hook_theme, declared a Views template, I can use Views' hook_preprocess_view() to wrangle with the eventual display of the title links I created:

At this point, the variable $ctools_link will be available to me in the views-view-fields--happy.tpl.php file. Inside that template, simply add the line:

9. The Javascript file.

We have accomplished all of the PHP tass for creating a CTools modal. Now we turn our attention to the Javascript.

You can start with the default CTools modal js file inside the ctools_ajax_example module, but I have simplified that file for you, declaring all you need to get started.

Here's the sites/all/modules/happy/js/happy.js file's contents:

10. Now you're ready to style the modal.

Using 'sites/all/modules/happy/css/happy.css', style the modal window to your tastes.

At this point, you have created a CTools modal in Drupal 7. For more information, avoid Google until you have consumed the extensive help html files inside the CTools module at 'sites/all/modules/ctools/help/modal.html.'

Happy Modaling with Drupal 7!

Watch this video!

Related articles

Multi sites drupal hostingIf you are running more than one Drupal site, you can simplify the management and can upgrade your sites by using the multi-site feature. Multi-site allows you to share a single Drupal...
Webfm module drupal hostingI am creating a website archive that will allow users to upload various different types of media content including video, audio, images, documents and text. I want to make it easy for users to...
Drupal hosting with sslHTTPS is a protocol which encrypts HTTP requests and their responses. This ensures that if someone were able to compromise the network between your computer and the server you are requesting...
Faceted search apache solr drupal hostingNote: Extra special thanks to Doug Vann for providing motivation to finally post this blog post! Early in 2016, when the Search API and Solr-related modules for Drupal 8 were in early alpha...
Hosting multiple sites drupalThere are many reasons why a systems administrator or developer may choose to host multiple sites on the same server in a multisite configuration. For example, such a configuration could:...