Add a unique Banner Image to each page

Question

I've been teaching myself Drupal 7 for the past 2 weeks. So far, I've gotten the general idea, and figured out how to use Views (i think) but it's the most difficult CMS I've ever had to learn and I've pulled out lots of hair.

The problem I'm stuck on now is that I want to be able to let the site administrators attach a unique banner image that will appear at the top of every page in my theme. There is a 'banner' region in the theme that was intended to hold this image. I've added a banner image field to the Basic Page content type. But now I can't figure out how to get that image to show up in the banner region and not in the flow of the rest of the page content (body).

I've tried a few things with views and blocks, but nothing works. Please Help!

Answer 1

This method is pretty similar to what Shoaid Nawaz has said above. For Drupal 7, you can use the Views module. Coupled with a custom theme region, you can create a block using the views module which will show an image for each node from a custom image field specified for the content type. You need to have a basic working knowledge of the Views module.

Here is how:

• Create a custom theme region, name it something like "Banner Region"
• In your content type, add an image field, name it something like "Banner image". If you need description, enable Alt tags for the image field. If you do not need slideshow, restrict the number of image to 1. For slideshow, you can use the views_slideshow module.
• To create similar sized banner images, you can create a new image style.
• Create a new View. Name it something like "Banner". Choose "block" display and not "page".
• In the filter criteria, choose your content type.
• Add a contextual filter for "Content: Nid" and save the view.
• Now go to the your blocks administration page and add the newly created views block to your new banner region.

In short:

• Banner image is a new image field in an existing content type.
• Views module understands which image is attached with which node using the contextual filter.

Tip: You might want to disable this block on the frontpage if your frontpage is not a node.

Further tip: You might consider adding other content types to the filter criteria if you banners for multiple content types. Alternatively, you can create a block for each content type and block control visibility using "No results behaviour" in the views' settings.

Answer 2

There is Header Image, a module but unfortunately not for Drupal 7. I do not think if you can port it yourself.

Here is another guide for alternate purpose.

Answer 3

I managed it in a different way in an experiment using Views and content type.

A Content type (Banner) with two additional (Content) fields.

1. Image field
2. Visibility Location (URL) field

Then I created a view with block display type.

Fields:

 - Image field (Imagecache output)

Filter:

 - Node type: Banner
 - Published: True

Contextual filter:

- Content: Visibility Location

I then edited the options under this contextual filer as:

1. Select "Provide default value" 
2. then select type as "PHP code"  

I then added PHP contextual filter code as under

if(drupal_is_front_page()){
  return '<front>';
}else{
  return drupal_lookup_path('alias',$_GET['q']);
}

TEST: I put the views block in header region and created two nodes of banner types

• For node 1 I selected Visibility Location as <front>
• For node 2 I selected Visibility Location as contact-us

And it worked!

Answer 4

Not sure if it's too late to answer this question but I think it will come in handy when upgrading from Drupal 7 to 8 or 9.

You could give this module a try: Dynamic Banner

It has been around for a while (since 2010), and seems like the maintainer is committed to make it compatible with Drupal 8 and 9.