1

I've written a custom D7 module as a companion to a theme I've contributed to drupal.org and in the module, I effect output of the logo image with some basic jQuery as such:

$("li.purple").click(function () {
$('#logo-img').attr('src', '/sites/all/themes/mytheme/images/logo-purple.png');
});

$("li.green").click(function () {
$('#logo-img').attr('src', '/sites/all/themes/mytheme/images/logo-green.png');
});

etc...

Now this works fine but ideally I'd like not to have to hard code the theme path as above, it would be great to have a variable instead.

I did some searching and found a drupal docs page, "Pass the theme path to javascript", but I can't really make heads or tails of it within the context of what I'm trying to do. There's a preprocess function on the aforementioned docs page that supposedly can tell jQuery what the path to the theme is but I don't quiet understand the usage in terms of actually creating a theme path variable. So from this:

function my_module_preprocess_page(&$vars) {
  drupal_add_js('jQuery.extend(Drupal.settings, { "pathToTheme": "' . path_to_theme() . '" });', 'inline');
}

I need to extract the path variable and put into this:

$("li.green").click(function () {
$('#logo-img').attr('src', pathToTheme + '/images/logo-purple.png');
});

... However, I get this error:

Uncaught ReferenceError: pathToTheme is not defined 

... so I'm just struggling how to get this to work or if it's even possible.

2

Use Drupal.settings.pathToTheme.

$("li.green").click(function () {
 $('#logo-img').attr('src', Drupal.settings.pathToTheme + '/images/logo-purple.png');
});

Also, theme_preprocess_page(&$vars) should be in template.php as your_theme_preprocess_page(&$vars);

Good idea to not hard code the theme path, that path structure wouldn't work for all set-ups.

  • Ah, perfect, I ended up doing $('#logo-img').attr('src', '/' + Drupal.settings.pathToTheme + '/images/logo-purple.png'); with the forward slash in front of the path. Thanks! – Danny Englander Aug 9 '13 at 19:47
  • Glad I could help. The / may cause problems on some set-ups as well, I believe (though I can't think of specific cases right now). Just keep in mind that you also have Drupal.settings.basePath – Chris Rockwell Aug 9 '13 at 19:51
  • So I should probably combine Drupal.settings.basePath with Drupal.settings.pathToTheme so I don't need to hard code the forward slash I am guessing? I'll have to test that out. Thanks. – Danny Englander Aug 9 '13 at 20:33
  • It worked, I did: $('#logo-img').attr('src', Drupal.settings.basePath + Drupal.settings.pathToTheme + '/images/logo.png'); – Danny Englander Aug 9 '13 at 20:38
2

Personally, I think that building up paths in JS should be avoided. I used to do this, but lately, run into the problem that can result.

When you glue together a path in JS, you bypass the API. In your particular example, it would mean that your image couldn't be server up from a CDN.

I would do something like

function MYTHEME_preprocess_page (&variables) {
  $path = drupal_get_path('theme', 'MYTHEME');

  drupal_add_js(array(
    'MYTHEME' => array(
      'logoSrc' => file_create_url($path . '/images/logo.png'),
    ),
  ), 'setting');
}

in your theme, and then in your JS

$("li.green").click(function () {
  $('#logo-img').attr('src', Drupal.settings.MYTHEME.logoSrc);
});

Also note that in the Drupal Javascript API, the jQuery context and settings are passed into behaviors, so you can do something like:

(function ($, Drupal, undefined) {
  Drupal.behaviors.MYTHEME = {
    attach: function (context, settings) {
      $("li.green", context).click(function () {
        $('#logo-img', context).attr('src', settings.MYTHEME.logoSrc);
      });
    }
  };

})(jQuery, Drupal);

in your theme Javascript.

  • Interesting, I'm also setting a jQuery cookie when a color is clicked so I'd presume I can possibly do this with one of your examples above. I'll check these out, I'm all for doing things the proper drupal way. Thank you! – Danny Englander Aug 10 '13 at 2:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.