When creating Drupal websites I like to try to empower my content managers to easily create content. I don’t want them to have to know how to center images using CSS, or be familiar with HTML to link an image to an external URL. In researching usability for end users I discovered this wonderful module called Field Group Link. The field group link module is an addon module for the Field Group module. By using the field group link module I’ll show you how you can make a page with images and text and URLs that requires next to zero advanced web knowledge for your clients.
I wanted to create a page in Drupal that has the following layout for a listing of Sponsors or Supporters for a community driven project. The page should show an Image which links to a URL if the sponsor funded the project. Or else the listing should provide special thanks to the Sponsor if they provided no funding to the project. For this blog post we will focus on creating an image linked to a url and placing it on the page as in the following mockup:
Example mockup of Sponsors page we want to achieve with minimal HTML knowledge
How can we do this?
- We can create a Drupal content type that encapsulates all the fields of our page for each sponsor. This could be: a Title, logo, optional description, status of whether or not the sponsor funded the project.
- We can use Display Suite to create 2 custom view modes of the content type:
- layout a single instance of a Sponsor to appear as an image linked, this display mode will use Field Group Link and the link destination of the image will be the URL provided by the link field of the content type.
- A special thanks message to the Title of the sponsor, linking to the sponsor website.
- We can use Views to create a page at a url and then show a page which consists of 2 views, the funded sponsors showing images and then following that listing a view of thanked sponsors.
As example(s) here are some screenshots completing this construction that allows the site manager to not need to know nearly any HTML.
Sponsors content type (I called it Supporters in my live site):
Drupal field(s) for the sponsor content type.
Display Suite view mode for fancy fund providing sponsor. Note, that this view mode uses field group link to link the image to the link field of the content type.
Full view mode of a sponsor which links the Logo to the company URL.
A much simpler view mode for Sponsors that simply links their website url.
And finally, a View page which places 2 view attachments onto a single page. Note, there is also some further magic on this page regarding the Sorting fields. But, I will discuss this in the future (hint, how can you re-order or position items within this View).
Drupal View that creates a Supporters page at a particular URL for the website.
I hope this blog post helped to show you how flexible Drupal can be when properly configured. Want to change how a Sponsor looks?! Make a new view mode — your options are nearly limitless with this combination of modules.
Lastly, just to emphasis my point. What does the content editor enter to fill out entries of this page? Simply this simple form per Sponsor, what could be easier (Oh Yea, a mental brain hookup where they think it and Drupal does it — let me get right on that! :D):
Create/Edit Supporter form.
Looking for quality web hosting? Look no further than Arvixe Web Hosting!
