Loading a ctools modal on the home page

Question

I have a front page that consists mostly of context rules to load various blocks, and for some users, a requirement to render a Ctools modal with a call to action. We aren't displaying much on the homepage besides a few views, and static blocks. I'm using this guide to build out the actual modal (which itself, will display a view with Contextual rules based on the user's settings) to show content tailored to them. Is there any in-code hooks I can use to activate this modal only on the home page, or should I look into the option of using a custom developed block (using hook_block_info() and hook_block_view()) to activate the modal on that page?

Answer 1

Using ctools modal framework instead of those [insert-fancy-word-here]box JS library. Kudos.

Ctools module uses js/modal.js inside ctools module folder to attach Drupal Ajax events to links with ctools-use-modal class. That is all.

I can think about a few approaches.

1. Do not make them modal-enabled in first place.

If you are calling the ctools_modal_text_button() or the function that adds modal-compatible markup, you can wrap it with an if statement.

<?php
if (drupal_is_front_page()) {
  print ctools_modal_text_button(t('Open the modal'), 'my/path/nojs', '');
}
else {
  print l(t('Open the modal'), 'my/path/nojs');
}
?>

If you are using a block, cache modes DRUPAL_CACHE_PER_ROLE and DRUPAL_CACHE_GLOBAL won't be compatible with this. DRUPAL_CACHE_PER_PAGE would work, but I doubt caching this block would improve performance. It can rather have a negative effect. DRUPAL_NO_CACHE would be best.

If you are hardcoding block contents, you can create two blocks, with different visibility settings based on the path.

2. Change the JS or CSS.

If you can't change the PHP, you still can change the JS and/or CSS. A CSS solution would be the easiest. Print both modal and non-modal links, and if the body tag has not-front class, you can hide the modal links.

.not-front .ctools-use-modal {
  display: none;
}

You can un-ajax links as well. Here is a sample code:

(function($){ 

    Drupal.behaviors.zzzzzz = {
        attach: function (context) {
           $('.not-front area.ctools-use-modal, .not-front a.ctools-use-modal', context).once('ctools-use-modal', function() {
        var $this = $(this);
        $this.click(Drupal.CTools.Modal.clickAjaxLink);
        // Create a drupal ajax object
        var element_settings = {};
        if ($this.attr('href')) {
          var base = $this.attr('href');
          Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
          delete Drupal.ajax[base]
        }
      }); 
    }}
})(jQuery);

There are other questions about Drupal behaviors and using jQuery with Drupal 7. Basically, above code finds modal links from non-front pages, and removes the Ajax properties defined in Drupal.ajax, so clicking the item does not trigger the modal.