5

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!

  • Just in case the above is unclear.... I want to set a unique banner on each page. An 'about' banner for the About page. A 'Contact' banner for the 'Contact' page, etc. – Ben Oct 14 '11 at 16:29
6

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.

  • This looks promising. I'll give it a try and update how it turned out. Thanks. – Ben Oct 14 '11 at 15:47
  • Doing this, I realized I tried this early yesterday morning, but I couldn't figure out how to connect the individual content items to the page (Nid) it needs to display on. Also, in my Filter Criteria I have the following options from the Content type I created: field_banner_image:alt, field_banner_image:fid, field_banner_image:title. I'm not sure which to pick or exactly what's happening by picking this. – Ben Oct 14 '11 at 16:08
  • @Ben I agree connecting the nodes to their respective images is the trick here. Try keeping the filter criteria simple. Add only Content: Published (Yes) and Content: Type (= Page). Then add the contextual filter: Content: Nid. The thing should not be more complex than this. – kaustavdm Oct 14 '11 at 16:35
  • Have a look at this screenshot. This is the view I had created. Note that the view preview won't show any result. You won't get any result until you put the block on a page. – kaustavdm Oct 14 '11 at 16:37
  • this sort of worked. it's showing the default image that I told the content type to use, and has a pager that maxes out at 26 pages for some reason. I still don't see how it makes the connection that one particular banner should be shown on one particular page. – Ben Oct 14 '11 at 17:27
1

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.

  • I've actually seen that page. It makes sense, but it's not really manageable on a site that has more than a few pages. There must be a "Drupal" way to get this done that doesn't require placing potentially hundreds of individual blocks in the right regions. – Ben Oct 14 '11 at 14:26
  • Yes Header Image is right choice in this regard, as I am using it but not in your case. :( – Shoaib Nawaz Oct 14 '11 at 14:33
  • Try this module in your dev site and test it carefully. This is D7 port of Header Image. drupal.org/files/headerimage-7.x-.1.0-alpha.tar_.gz – Shoaib Nawaz Oct 14 '11 at 14:34
  • Thanks for the suggestion, but I tried to install in drupal 7 and it would not take. I'm shocked that there's not a way to do this without an additional module. It's such a common web design practice that I can't see Drupal being so successful if you can't even add a banner image to a page without jumping through hoops and installing alpha modules. – Ben Oct 14 '11 at 14:42
1

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!

  • Thanks. I had to change the Field Type of Visibility Location to Text instead of URL. Using URL as the Field Type forced the input to be a valid URL (e.g. whatever) – Allan Lykke Christensen Feb 23 '13 at 14:54

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.