Drupal 7 – How to create a page specific banner?

Recently I was building a project using Drupal 7 and there was need to have a page specific banner. I know there are multiple ways it can be done, but I was interested in building this feature using  Views 3 module and Image field. I wanted to keep the things simple and clean for non-technical person who will be maintaining the site. So here how I did it (no rocket science :) )

Assumptions

  • You have regions for banner. If not,  please check out this quick tutorial on how to create custom regions.
  • Views 3 module is installed and running.
  • All banner images are of same size. If not, you will probably need to define a image style

Scenario

You have a content type called ‘Product’ and you want a specific banner to appear on each product page.

Implementation Details

  1. Add a Image field to content type Product
    Home » Administration » Structure » Content types » Product
  2. Input ‘Banner Image’ as  label value for field
  3. Create a new View. Let’s call it ‘Banner Image’
  4. As we don’t need a Page for this view we will  only select the ‘Create Block’ option
  5. Give appropriate value for the ‘Block Name’. Let’s call it ‘Product Banner
  6. Under Format for select Fields for the Show option. And keep Format option as Unformatted  list
  7. For the Field filter choose the Image field that we created in step 3 i.e Banner Image
  8. Under Filter Criteria choose Content as Published (Yes)  and Content Type as Product
  9. Under Advanced choose Content:Nid as Contextual value
  10. And For Relationships choose Banner Image:fid;
  11. Save the View and head towards the Block Overview page
  12. You should see the new created Block named Product Banner  (Step 5)
  13. Push that block  into the banner region and save the block settings.
  14. Now create a page using Product Content type and upload a image for Banner Image field
  15. Publish the page and VOILA!!!!. If you did everything correctly you should see the uploaded the image for node as a Banner.
  16. Make sure the block appears only on the Pages built using Product Content type and don’t forget to hide the Banner Image for content. You can do that by visiting  Home » Administration » Structure » Content types » Product » Manage Display

Check out the screen shot of Views Settings

Drupal 7 – How to create a page specific banner?

For full image please  Click Here