Drupal - Intermediate: Flex Intermediate B - People List, Features and more

Flexible Content Items

In our first article about Flexible Content Items, we discussed a general overview of what Flexible Content Items are, how to use them and where to find them. 

In this article we discuss how to create the following Flexible Content Items:  

• People: List
• Social Media: Connect
• Feature: Large
• Feature: Medium
• Feature: Quote
• Image Detail: Large

People: List

This Flexible Content Item allows you to curate a list of people to make a department or lab people page. It works similarly to how you can select News Items where you can only make selections on one page, embed them and then select more from a different page of the people picker pop-up

You can search for people by their name, or department

Just remember to hit Apply once you have put in your search criteria in the filters at the top

Once you have embedded people from one page of the picker, you will have to click Embed and then reapply the filters to find more folks on the next page of the picker for your search criteria

You can also drag and drop your selections to reorder folks

You can also use the Remove button to remove that person from the list you are creating. Note: This will only delete them from the listing. They will still appear on other departments’ listings if applicable.

You can also add multiple People Lists so that you could have a list of Faculty and then a list of Staff on the same page

Back to Top ^

Social Media: Connect

This Flexible Content Item allows you to hand curate posts from various social media accounts. 

The Handle is required so it can display on the image. 

The background color is required if there is no image uploaded in the form to use as a background (used most often with Tweets). 

You can select from Instagram, Twitter and YouTube. 

We used only three items in our example. As you can see fewer items take up less of the page width

Back to Top ^

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.

This is the Feature Large without any Child Features

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.

Feature Child: Quote 

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

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

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

This is what it looks like with a Special Caption

Feature Child: Statistic 

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

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

Feature Child: Video

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

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

Back to Top ^

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.

This is the Feature Medium without any Feature Child

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.  

Feature Child: Quote

This is how the medium feature looks with a quote

Feature Child: Special Caption

This is how it looks with the Feature Child Special Caption

Feature Child: Statistic

This is how it looks with a Feature Child Statistic

Feature Child: Video

This is how it looks with a Feature Child Video

Back to Top ^

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.

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

Back to Top ^

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.

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.  

Feature Child: Quote

This is how it looks with a quote

Feature Child: Special Caption

This is how it looks with the Feature Child Special Caption

Feature Child: Statistic

This is how it looks with a Feature Child Statistic

Feature Child: Video

This is how it looks with a Feature Child Video

Back to Top ^

More Flex Articles

Please see the following Articles for how to use the following Flexible Content Items. 

• FLEX: Basic -   WYSIWYG (basic, links, tables, blockquotes and images & videos from library)
• FLEX:  Basic 2 - Accordion, Callout, Carousel, Contact, Embed, Social Media: Callout, Special List: Large,  Special List: Small 
• FLEX: Intermediate A - WYSIWYG (Video), Columns, Feature: Grid, Image Gallery, Image List
• FLEX: Intermediate B -  People: List, Social Media: Connect, Feature: Large, Feature: Medium, Feature: Quote, Image Detail: Large
• FLEX: Advanced - Event 3-up, News 3-up, News & Contact, Story 1-up, Story 3-up, Announcement 4-up
• FLEX: Special - Slide: Homepage Hero, Homepage Feature: Large, Homepage Feature: Medium, Homepage Feature: Story, Course Code, Description Code, Donor List

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.

Please note, there are corresponding training videos available that cover some of the items in these articles. Some items may require increased permission levels and special training. Please reach out to Communications for guidance at communications@brynmawr.edu.

Back to Top ^