Adding website section images in Drupal themes

Quite frequently I’ve been asked about putting images into site “sections”, depending on path or menu trail. Look up, that “Blog” image is what I’m talking about. It’s on all blog related pages. So, here goes – it’s nice to be able to finally offer this information here.


The first main chunk of code attempts to get a menu item and build an image link from that. The second chunk assumes failure of the first and tries again using a partial path method.


If all nodes on your site have menu entries, you can use that piece of code independently. Likewise, if all your nodes can be identified by the first bit of the path, the second chunk will stand alone.


I have got a mixture of the two on this site. A lot of the entries have menu entries, but the blog and portfolio section do not. Therefore, the image links on those sections are powered by the second chunk.


Note: this code expects to find sites/default/files of the GIF type in a directory ‘images/sections’ within my own theme directory. It also will only pick up sites/default/files that have names which are all lower case. In the case of menu entries that contain spaces, those will be replaced with hyphens, so if the menu link is “Site Map”, the image name will have to be “site-map.gif”. Path-based is really dependant on how you are using aliases (e.g. your pathauto.module setup) and isn’t really inside the scope of this article. You’ll have to figure that out yourself.


Okay; in order to not crowd up _phptemplate_variables(), I add just this one line of code in template.php inside that function (under ‘page’ – see here for details):


<?php
$vars
['section_link'] = get_section_link();
?>


Then, elsewhere in that file, this code:

<?php
function get_section_link() {
 
// MENU - attempt to make a section link from a menu item, for this page
  // get active menu trail into an array
 
$menu_items = _menu_get_active_trail();

 
// $menu_items[1] is the top parent of our menu container, e.g. primary links
  // this gets the required menu item into an array
 
$link_array = menu_item_link($menu_items[1], FALSE);

 
// whip out spaces and make the name lower case
 
$section_name = strtolower($link_array['title']);
 
$section_name = str_replace(' ', '-', $section_name);

  if (
$section_link = render_link($section_name)) {
    return
$section_link;
  }

 
// PATH - if we've not returned, we couldn't make a valid link from menu
  // let's try a path approach instead?
 
if (module_exists('path')) { // dependency for drupal_get_path_alias

   
$sections = array(); // an empty array to collect stuff in

    // get all the top level links in the primary nav (id of 2) into a array
   
$primary_nav = menu_primary_links(1, 2);

   
// iterate over the array and pull out the top level paths
   
foreach ($primary_nav as $menu) {

     
// get the first element of the aliased path for this menu item
     
$path_element = explode('/', drupal_get_path_alias($menu['href']));

     
// put the first chunk of each path onto an array
     
$sections[] = $path_element[0];
    }

   
// get the aliased path for the page we're on
   
$section = explode('/', drupal_get_path_alias($_GET['q']));
   
$section_name = $section[0];

   
// if the path matches a nav item, create a section image
   
if (in_array($section_name, $sections)) {
      if (
$section_link = render_link($section_name)) {
        return
$section_link;
      }
    }
  }
}

function
render_link($section_name) {
 
// construct the image's path (mine are GIFs stored in a subdir of my theme)
 
$image_path = path_to_theme() . '/images/sections/' . $section_name . '.gif';

 
// make some text for the image's alt & title tags (SEO, accessibility)
 
$image_alt = $section_name . t( ' section');
 
$image_title = $section_name . t( ' section link');

 
// render image html using theme_image (returns NULL if file doesn't exist)
 
$section_image = theme('image', $image_path, $image_alt, $image_title);

 
// if the image rendered ok, render link using above variables
 
return ($section_image) ? l($section_image, $link_array['href'],
      array(
'title' => $image_title), NULL, NULL, FALSE, TRUE) : NULL;
}
?>


Then finally in page.tpl.php (and any other page templates) we can use the variable in the “Drupal Way”, and print our variable where we like!

<?php if ($section_link): ?>
  <div id="sectionTitle">
    <?php print $section_link; ?>
  </div>
<?php endif; ?>

Blog Tags: DrupalThemesPHP

Comments

Could this be used for css files?

The reason i like this is that the site i am designing has about 5 sections. Each section has a different header image. The person who will be maintaining the site needs a simple way to select which section the pages they make will appear in, thus having the correct header.

A drop down would be perfect =P but just having them type a specific path in the pathauto field will work in a pinch.

Is there not a module that will allow you to create separate css files based on primary links?

I suppose i could use a block but how would the person maintaining the site be able to designate which block layout to use for a new page?

Thanks for this. Should this still be viable in drupal 6.x?

Yeah, I’m sure you could modify this to select a css file per section. It really depends on how you’re defining your sections – if you use taxonomy as a filtering mechanism for sections, you can try out the taxonomy_theme.module, which implements similar functionality. It’s only available for Drupal 5 currently.

I would suggest having a taxonomy for section is a relatively simple way of implementing this.

Drupal 6’s menu system is completely rewritten since v5, so there are definite differences between this code and a version that would work under the new core menu.module. I’ve not as yet had time to learn that, so this article remains for D5 legacy purposes for now! :)

This is very interesting. I'm a newbie in drupal, so it can be very helpful to me.

Yeah, or through the Drupal admin (using the blocks module) you could set your headline images for each section by adding blocks to the content area and specifying "show only on these page" "/blog*" or whatever. That's how I did it on my portfolio website, that I built with Drupal.

nice article. Thanks.

This is *exactly* what I'm trying to do - thanks for much for the clear walkthrough, I'm very glad to be able to grab contextual section information without resorting to a third-party module or taxonomy.

Ok.
In other words there is no easy way of defining a main banner per section ?
Steve's solution is ok, but as for me slightly to complicate workaround. It is ok and it will work, but I thin it is not the best if you ever have to explain admin user how things work.
Has anyone tried this one ?
http://drupal.org/project/themekey

You could do worse than to check out the context module and the very new context_theme module.

It is really great having opportunity for reading this great information’s. I like reading it because it is brief and step by step well explained, so everyone can understand it. It is really great tips for everyone, Thank You Drupal is really great.

You could try it… :) This is a solution to a specific problem I had, you might well need to alter the code for your own purposes.

Is there anyone who tried it out , can anyone confirm that all this works properly.

This code was written specifically for my site, and is pretty old by now. It’s entirely possible that you might be able to achieve a similar result to this using the context.module now, so I suggest unless you have a very specific requirement such as I did at the time, you check out that project on Drupal.org.

I do it the same way as Steve T but it's nice to know there are other possibilities. Thank you.

This is *exactly* what I'm trying to do - thanks for much for the clear walkthrough, I'm very glad to be able to grab contextual section information without resorting to a third-party module or taxonomy.

Add new comment