Drupal Short Session: Image-based Features in Flex Content

WATCH THE VIDEO! If you are a visual learner, or simply prefer learning from a video, please watch the video on our Drupal Training Videos page

What are these Image-based Features and why do I care?

Image-based Features refer to Four different Flex Content Items that highlight content, provide in-page navigation and add visual interest to a page

Our Feature Medium, Feature Large, Feature Quote and Image Detail Large all help visitors to briefly learn about a topic as well as explore it in-depth.  By using CTAs that are built into most of these Flex Content Items, we can provide direct links to the topic pages that the visitor may take longer to find on their own.

These Image-based Features make content easy to consume, scan and explore.

How can these Help My Page?

Our Feature Medium, Feature Large and Image Detail Large all can spotlight a specific topic in a brief way. They all use optional embellishments of either a quote, statistic or a caption to enhance the required image. These types of flex content items encourage the visitor to explore more on the topic with the use of up to three optional CTAs. The Feature Large has an additional area of CTAs in a Dropdown where you can choose to add up to five additional links on the topic you are spotlighting. 

The Image Detail Large is the only that has an extra WYSIWYG body field to add additional information, whereas the Feature Large is the only one that has the extra Dropdown area where you can add up to 5 additional links.

Our simplest one is the Feature Quote, which is a simple, non-syndicated quote. It consists of an image, a quote and its source.

Simply put, These Image-based Features all can be used to elevate your page’s content in the following ways:

  • Add visual interest

  • Split up sections of a page

  • Bring focus to important information

To see how These Image-based Features or any flex item looks, please visit /node/53216 which is our All Content page. Our All Content page is useful to see how any item we showcase in these videos will look on your typical department page.

Image-Based Features and their elements

All the Image-based Features we mention here are listed in Column One of the chart below. They all share certain fields in common, which are listed on Row One of the chart below. The "x" in each column represents which Image-based Feature uses what field.  As you can see, they are all pretty similar.  The Dropdown field allows you to add up to five (5) additional CTAs. The Item Block field allows you to choose to add one enhancement from the following list: Quote, Statistic, Caption or Video (which is part of our Remote Video library. Find more info on that in our Video article.) The Image Align field is important only if you are using the Feature Medium on the Marketing theme. It can stay as the default for any Inside theme page.


Heading (or Name)ImageImage AlignIntro (or Quote)BodyCTADropdownItem Block
Feature LargeXX
X
XXX
Feature MediumXXXX
X
X
Image Detail LargeXX
XXX
X
Feature QuoteXX
X




Feature: Large

This Flexible Content Item is a great way to draw attention to an important program or feature. This Feature Large has all the pieces overlaid on the image. It has an image, heading, intro field and space for up to three links as well as an additional dropdown of links (Feature Child: Dropdown)

You can also have a quote (Feature Child: Quote), statistic (Feature Child: Statistic), caption (Feature Child: Special Caption) or link to a video (Feature Child: Video) displayed prominently.

screenshot feature large edit screen

 

screenshot feature large edit screen


This is the Feature Large without any Child Features


screenshot feature large display

Feature Child: Dropdown 

If you choose to add Feature Child Dropdown, you will get these fields to fill out. Note that you can add up to 5 items maximum.

screenshot feature child dropdown edit screen

Feature Child: Quote 

If you choose a Feature Child Quote, you will get these fields to fill in

screenshot feature child quote edit screen

 

Here is how it looks with a dropdown and a child quote


screenshot feature large with quote and dropdown display


If you want to change the Block Item for a different one, simply edit the page, expand this Flexible Content Item and the scroll down to the Item Block, click the dots and select “Remove”


screenshot feature child item block


Then you can use the Item Block dropdown to select a different Add Feature Child


Feature Child: Special Caption 

If you choose Feature Child Special Caption you will get these fields to fill in

screenshot feature child caption


This is what it looks like with a Special Caption


screenshot feature large with caption display


Feature Child: Statistic 

If you choose to add a Feature Child Statistic you will get these fields to fill in

screenshot feature large statistic edit screen


This is what it looks like when you add a Feature Child Statistic


screenshot feature large with statistic display


Feature Child: Video

If you choose to add a Feature Child Video you will get these fields to fill in


screenshot feature child video edit screen

screenshot feature child video edit screen


This is what it looks like to add a Feature Child Video


screenshot feature large with video display

 

Feature: Medium

What is the difference between Feature: Large and Feature Medium?

  • Feature: Medium is a more subtle way to feature content than the Feature: Large as it isn’t a full-width display.
  • Feature: Medium presents the image as smaller than in the Feature: Large
  • Feature: Medium arranges the text and extras around that image differently than in Feature: Large.

This Flexible Content Item is a great way to draw attention to an important program or feature. This Feature Medium has only the quote, statistic, caption or link to a video overlaid on the image, if you choose to add one.  It has a heading, image, image alignment option, intro field and space for up to three links.

screenshot feature medium edit screen


This is the Feature Medium without any Feature Child


screenshot feature medium display

You can also have a quote (Feature Child: Quote), statistic (Feature Child: Statistic), caption (Feature Child: Special Caption) or link to a video (Feature Child: Video) displayed prominently.  

Please see Feature: Large for how the entry forms look for each of these Feature Child Items by following the link for each item below.

Feature Child: Quote

This is how the medium feature looks with a quote


screenshot feature medium display with quote

Feature Child: Special Caption

This is how it looks with the Feature Child Special Caption


screenshot feature medium display with caption

Feature Child: Statistic

This is how it looks with a Feature Child Statistic


screenshot feature medium display with statistic

Feature Child: Video

This is how it looks with a Feature Child Video


screenshot feature medium display with video

 


Feature: Quote

This Flexible Content Item is a nice way to feature a photo, quote, and attribute (Name) to highlight something. No need to put quote marks around the quote.

screenshot feature quote edit screen

 

Fill in the required fields and then press Save to see the Feature Quote on your page


screenshot feature quote display

 


Image Detail: Large

This Flexible Content Item is a great way to draw attention to an important program or feature. This Image Detail Large has the top of the text block slightly overlapping the bottom of the image.  It has an image, title, intro field and space for up to three links.

screenshot image detail large edit screen

screenshot image detail large edit screen


You can also have a quote (Feature Child: Quote), statistic (Feature Child: Statistic), caption (Feature Child: Special Caption) or link to a video (Feature Child: Video) displayed prominently.  

Please see Feature: Large for how the entry forms look for each of these Feature Child Items by following the link for each item below.


screenshot image detail large item block options


Feature Child: Quote

This is how it looks with a quote

screenshot image detail large display with quote


Feature Child: Special Caption

This is how it looks with the Feature Child Special Caption

screenshot image detail large display with caption


Feature Child: Statistic

This is how it looks with a Feature Child Statistic

screenshot image detail large display with statistic


Feature Child: Video

This is how it looks with a Feature Child Video

screenshot image detail large display with video



As with anything on the site, if you are unsure what the item is, how it looks or how to best utilize it, please see our sample pages Basic Page with all content and News article with all content or reach out to Communications for guidance at communications@brynmawr.edu.


Still need Drupal help? Have more Drupal questions?

If after reading this article or watching the training videos you still have questions, we can help!

Sign-up for any of our Drupal Drop-ins throughout the year. 

Schedule a Drupal training session for you or your whole department with our Drupal Trainer.

Questions?

If you have any additional questions or problems, don't hesitate to reach out to the Help Desk!

Phone: 610-526-7440 | Library and Help Desk hours
Email: help@brynmawr.edu | Service catalog
Location: Canaday Library 1st floor