How to refer paths relative to the theme directory?

Question

I have a theme called Eternal with the following data in it's eternal.info file-

name = Eternal
description = A Customized Drupal 7 Theme
core = 7.x
engine = phptemplate

In the template folder lies the page.tpl.php. Under the /themes/ folder, the address becomes -

/eternal/templates/page.tpl.php

There are several lines inside the page.tpl.php that require I define a path for an image, like so-

<img src="images/facebook_icon.png" alt="image comes here">

The /images/ folder is located inside the /eternal/ folder, so to access it from /templates/ one would need to travel one level up and then access the /images/ folder. That would look like this - /../images/.

The problem is, I cannot define a link that works in Drupal. And I'm sure the images exist in that directory.

I've tried these-

<img src="../images/facebook_icon.png" alt="image comes here">

<img src="images/facebook_icon.png" alt="image comes here"> <!-- not like this would have worked anyway -->

<img src="<?php drupal_get_path('theme', 'eternal'); ?>/images/facebook_icon.png" alt="image comes here">

It just shows the alt text in every case. No image. How to accomplish this and what is the recommended and proper way to do this?

Answer 1

<?php print drupal_get_path('theme', 'eternal'); ?>

as you've already tried, is the correct way to solve your problem. Notice though that you have to print it out as well, as drupal_get_path will only return the path, not print it for you.

I can't immediately think of any reason why it would not work in your case. Some potential suggestions to try could be

1. Double-check your spelling of the theme name in the code.
2. Clear caches.
3. Try disabling the theme/module and re-enable it.

Failing everything else, you'll need to debug drupal_get_filename() directly.

Answer 2

You can get path to your theme with $directory variable which will be available in all your templates.

<img src="<?php print $base_path . $directory; ?>/images/example.png"/>

See template_preprocess()

If you have multiple img elements in your page template you can create a dedicated variable for page.tpl.php that will keep path to your images directory.

/**
 * Impelements hook_preprocess_page().
 */
function eternal_preprocess_page(&$vars) {
  $vars['images_dir'] = $vars['base_path'] . $vars['directory'] . '/images';
}

Now, it looks more clear.

<img src="<?php print $images_dir; ?>/example.png"/>

Answer 3

As mentioned by Letharion, drupal_get_path() should be your first port of call.

Returns the path to a system item (module, theme, etc.).

The only reason I have posted this as an answer, rather than just left it at Letharions answer is that I wanted to bring attention to the System Stream Wrapper module as well:

Provides stream wrappers to access module, theme, profile, and library files and directories.

Which means that theme://eternal/images/example.jpg would also work with this module enabled.

Answer 4

You have to print/echo the output of drupal_get_path() for it to actually appear in your markup. By default it simply returns a PHP string.

<img src="<?php print($base_path.'/'.drupal_get_path('theme', 'eternal')); ?>/images/facebook_icon.png" alt="image comes here">