Drupal - Basic: Flex Basic 2 - Accordion, Carousel 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:  

  • Accordion 
  • Callout 
  • Carousel 
  • Contact 
  • Embed 
  • Social Media: Callout 
  • Special List: Large  
  • Special List: Small

Accordion

Learn about the accordion

What is an Accordion and why do I care?

An accordion on a web page is a tool used to collapse content to minimize scrolling for the end user. The headings, or accordion titles, act as a way for viewers to see at-a-glance some of the content on the page. 

There are 3 general principles that should be considered when using accordions: reducing cognitive load, increasing readability, and clarity. 

On the downside, hiding content behind the accordion diminishes people’s awareness of it. Therefore, headings and titles must be descriptive and enticing enough to motivate people to click on them. When content is hidden, people might ignore information. Luckily, our accordion has an expand-all feature for people to click once and have all the accordion items expand simultaneously.

How can Accordion Help My Page?

Accordions are most appropriate when users will only need a few specific pieces of content within a page or if you have only a small space to display a lot of content. Accordions can be used on a page with more content, but since accordions are a more at-a-glance type of component, I would recommend using them closer to the beginning of the page. Of course one must also keep the flow of content in mind and make sure the accordion is in a place within the rest of the information where it makes the most sense.

Having an accordion for Questions/Answers or FAQ is a great use of accordions because you can easily see which question is of interest and only have to expand that accordion item if you desire. 

How to create an accordion

This Flexible Content Item is a typical accordion element, where you have a Title and an Item for each accordion item in the accordion list. You can add as many Accordion Items as you’d like, using the “Add Accordion Item” pill button.  The Accordion has a Heading and Introduction that will appear before the accordion list.

screenshot accordion fields

screenshot accordion item fields

It displays like this on the page:

screenshot accordion page display


Back to Top ^

Callout

This is a Flexible Content Item that calls attention to something.   It allows you to have an image, title, body text and up to three links. This is a versatile element because you have the ability to just have a heading, or just have links or just have some text, or include an image.  This is what it looks like displayed on the page with all the options filled in:

screenshot callout display

When you choose to Add Callout you will see options to fill in. A heading and a heading level. This allows you to be mindful of accessibility needs by properly setting the correct heading level. It is defaulted to H2, which is usually fine for most situations.  If you don’t fill in a heading, no text will appear.

It allows you to select the color background for the box, with choices of either grey or yellow. It is defaulted to grey.

screenshot callout edit screen

You can optionally add an image, body text and up to three links.

You can either upload or select an image that is already in our site’s Media Library. We will go over Uploading an image in detail on our Media article.

screenshot browse image library

screenshot upload image


The three links can be set to open in a target window, and is default to “none” (no target selected). These links are optional.


screenshot callout cta fields


These links can also be set to have either a primary or secondary style, or just be a plain link


screenshot callout cta fields

Back to Top ^

Carousel

A carousel is a Flexible Content Item that can be added to any Basic Page, News Article or Event, if logged in.

When you click-select the Carousel from the Flexible Content list, you will get fields to fill in for the behavior of the Carousel and fields for each slide, with a button to add another slide item

The behavior of the Carousel is just telling it which way to align the overlay text box, on the left or right side of the image.  This alignment is for ALL the slides in the Carousel. This means that you will have to curate your images so they all look good with the text box over the same side throughout your carousel.

screenshot carousel edit screen

The fields for the Slide are Title, Supertitle (which appears above the title), Image, Body and a CTA (or Call to Action) which has a URL field and a Text field.

The CTA can have an outside URL like https://google.com or you can use the type-ahead box to look for the title of a node to link to. (Note: external or outside URLs must include http:// or https://)

screenshot carousel cta field


Once you add all your slides, you can save the page and see how it looks.


screenshot carousel display

Back to Top ^

Contact

This is a great piece of Flexible Content that will allow you to put contact info on your page.  It consists of Heading, Title, Image, and a body field, which is a limited  WYSIWYG where you can write the contact info exactly the way you want.

screenshot contact edit screen


Here is how our example looks on the page:


screenshot contact display

Back to Top ^

Embed

This Flexible Content Item is used to embed a form or something advanced that the WYSIWYG is programmed to strip out.  It is similar to the old Full HTML ability in the old site.

If you have been granted Embed permissions (This was Full HTML permissions in the old site), you may use these instructions to embed forms and other content that provide iframe or javascript embed code.

If you don’t have this permission but would like to request it, please reach out to help@brynmawr.edu or communications@brymnmawr.edu for assistance.

Only embed content from known, trusted sites. Ask Web Services if you aren’t sure.

The Embed Flexible Content Item should only be used for specific code-related embedding needs.  

It is an extra level of permission.  If you don’t have that level of permission, you will see something like this:

screenshot embed field disabled


If you do have permission to use that Flexible Content Item, you would see a non-WYSIWYG text box appear.  In this example, we will have pasted in the WuFoo embed code so a form will appear on the page.

First step is to copy the embed code from the source. For example, in Wufoo, hover over your form and click “Share” to get the form code.

screenshot wufoo share form option

screenshot wufoo embed code capture


Next, click the Edit tab to edit your page and scroll to the bottomof the edit screen.  Under Flexible Content, you can select "Add Embed" then paste the code into the non-WYSIWYG text box, like so


screenshot embed field with code

Save your page and see if the form or other content is displayed as expected.

Back to Top ^

Social Media: Callout

This Flexible Content Item allows you to add URL links to your department’s various social media accounts so folks can follow you online.

screenshot social media callout fields


You can add URLs from Facebook, Instagram, Twitter, LinkedIn and YouTube


screenshot social media callout fields


This is what it looks like on the page:


screenshot social media callout display

Back to Top ^

Special List: Large

This Flexible Content Item allows you to have a Special List with a title that can be linked or not, along with some additional text that you would add to the body field.

screenshot special list large edit screen


This is what it looks like on the page

screenshot special list large display

Back to Top ^

Special List: Small

This Flexible Content Item is a small list of titles only. 

Special List: Small is also an additional part of the Basic Page in a special spot at the top called Audience Quick Links

Adding links to it is the same in either spot, but the Audience Quick Links can’t be moved on the page like the Special List: Small can within the Flexible Content area.

screenshot basic page quick link add


You can add as many items as you’d like


screenshot special list small edit screen

This is how it looks on the page

screenshot special list small display

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

Please note that Flex Advanced and Flex Special items require training and possibly special permission levels.  

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 ^

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