Often times in website development I’ve received the request to show an image on certain types of pages, typically an image will be assigned per menu section or url path. In the past I’ve done 1 of 2 things:
- I created a custom content type and used a list field and funky custom code to store a menu item ID (mlid) for when to show an image on a certain path.
- I used the Header Image module to create a custom content type + block to show an image in a Drupal block on certain paths. In general this is a usable solution but I found since Header Image is drupal content (nodes) this becomes a hassle when building a drupal site via code.
I liked the simplicity of approach (1), which has some faults — such as Views aren’t necessarily registered at a menu path, and I disliked the complexity of the Header Image configuration settings. So I went hunting for a new solution recently.
I found the Views Menu Reference module. This module provides a field widget that allows you to select menu location(s) a piece of content is tied to.
From the module’s project page they outline the typical usage directions:
- Install and enable the module using the normal module installation procedure.
- Add a views menu reference field to the entity type you want to use. For example a “Header image” node type.
- Create a view, for example “Header slide” with the Views menu reference argument for the newly created field and select “Current path” as default value.
- Select the menu items in the node, which should appear in the view, when the menu item is active.
- That’s it!
So in my website I created a simple UCSB Highlight content type. This will be an aerial or architectural photo shot of the campus and depending on the url path a different photo will be shown on the website:
Then I created the view as described in the project page. I deviated just a tad from the provided directions. I want a default image used if no image is found on the current page path. So I provided a No Results text that shows an image from my theme folder.
My No Results text is simply a FULL_HTML snippet which contains a single pre-formatted image for use when no other image is found by the system which should have been supplied by the site moderator.
How can make this better for me the developer and the endusers:
- I use the Context module to store the site block layout (a single block is this campus highlight shot).
- I don’t want staff to have to upload a properly sized image, I use Image Styles to scale any image to the appropriate size.
- How does a staff member know if every section or what sections of the site have an image assigned, Views + Views Bulk Operations can help with this.
I hope you find the modules and topics in this blog post useful! Looking for quality web hosting? Look no further than Arvixe Web Hosting!