Drupal - Intermediate: Flex Intermediate A - Columns, Gallery 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:  

• WYSIWYG (Video)
• Columns
• Feature: Grid
• Image Gallery
• Image List

Embedding Video in WYSYWYG

Usually you will embed videos within the WYSIWYG of a Basic Page or News article. Adding a YouTube or Vimeo video can be done by embedding directly in the WYSIWYG Editor.  Remote Video allows you to associate a URL of the video with a Cover Image to display either a YouTube or Vimeo video. YouTube and Vimeo are the only hosted video providers that can be added to WYSIWYGs in the new site.

Adding a Panopto video requires you to use an Embed Flexible Content item. Read more about the Embed item in our FLEX:  Basic 2 article.

When creating or editing your Basic Page or News article, locate the point in your text where you wish to embed the video.

Place your cursor there and then in the WYSIWYG toolbar, select the Video Embed icon. 

Video Embed icon has the play button

 Upon clicking the Video Embed icon, a pop-up window will appear to “Select media item to embed”. There will be two tabs at the top: “Browse Library” and “Add New”

Adding a New Video 

If we click the Add New tab we will see a form to fill out to add the video item to the library

The name field is required.  It is important to name your video clearly, but succinctly.

The next field is the Cover Image. This requires you to choose a still image that will represent the video.  It can be a still from the video, or it could be a photo that embodies the essence of the video’s subject matter.  Clicking “Choose File” will open your computer’s File Browser Finder so that you can locate and click on the correct image.

Once you’ve selected the file and clicked “Open” a thumbnail will appear in the Video form and you will encounter a required Alternative Text field

Y

ou must fill out the Alternative text to comply with our Accessibility Standards.

The next field that you will need to fill in is the URL field.  This is the address of the YouTube or Vimeo video.

Scrolling down, you will see that the rest of the fields have defaults that can be left.  Press the Save & Embed button.

Next you will get an additional popup that wants you to check your selection.  This is your chance to replace it or continue

Press Replace Selection to start over.

Press Next to continue.

Now you will encounter another popup that will ask for a caption for the video. This is optional, but it is helpful for the visitor.

Once you have set your caption, press Embed. This will bring you back to the content entry form.

Scroll down, save your page and see if the video is displayed as expected.

Editing the video you just created

If you don’t like the cover image or something about the video, you can edit it by first, editing the page, then editing the WYSIWYG. Then scroll to find your video and right-click to see the “Edit Video” button.  You can also double-click on the video to edit it.

This will bring up a simple popup with the file name of the video

Clicking on the file name will open a new browser window with the video edit screen.

We would like to pick a new cover image.

By clicking the “Remove” button next to the image filename, we will remove it from the Remote Video and our library.

We can now upload a new one by clicking “Choose File” and selecting a new one from my computer.

Once we are satisfied with our changes, we can scroll down and press Save.  This will keep us in that new browser window. We can close out of it and the browser window with my page editing will still be open.  It will still have the  popup open with the video filename. Since we just edited it, we can press “Embed” and it should update.

We can see that it updates the cover photo in the WYSIWYG.

Saving the page now will let us confirm that our Remote Video object looks better.

Back to Top ^

Browsing the Video Library

Upon clicking the Video Embed icon, a pop-up window will appear to select media item to embed. There will be two tabs at the top: “Browse Library” and “Add New”

If you scroll down you can see that the “Browse Library” tab has a pager and an Embed button.

Once you have made your selection, press the “Embed” button

Now you will encounter another popup that will ask for a caption for the video. This is optional, but it is helpful for the visitor.

Once you have set your caption, press Embed. This will bring you back to the content entry form.

Scroll down, save your page and see if the video is displayed as expected.

Please note that not all videos in the library have images

You can see what it looks like in the WYSIWYG

And if we press save, you can see what it looks like on the page

One other option to display a video is to have it be part of the Feature Large and Feature Medium Flexible Content Items.

Back to Top ^

Columns

Columns is a Flexible Content Item that allows you to make a columned display of a list of items that have title, image, body text and URL that display three across as a block of content.  The Columns Flexible Content Item starts with a heading and an introduction field to display before the list of items

Each item has title, image, body text and URL fields where the only field that is required is the title.  The URL field will make the title text into a link to that URL you put in.

This example shows all fields filled in with four items

Back to Top ^

Feature: Grid

This Flexible Content Item displays a grid of images with linked text below or next to a heading and some intro text, depending on the page display. This Flexible Content is most akin to the Image Linkset functionality from the old site.

Here is the grid feature in a page:

Back to Top ^

Image Gallery

This Flexible Content Item consists of a Main Image that is used as the cover photo to indicate there is a gallery, then when the visitor clicks on it, a slideshow opens up in a Lightbox so the person can view the gallery of images as slides.

As you can see, the Main Image and first slide title and image are required fields. It is recommended that the Main Image be one of the images from your slide deck. 

Once you add a second slide, you can drag to reorder the slides using the crosshair next to the word Slide

This is how the gallery appears on the page

This is how it appears in a Lightbox when you click on the Gallery element

Back to Top ^

Image List

This Flexible Content Item has the ability to pair an image with text and to alternate which side the image aligns on, this makes it a great choice for creating a list of Image/Text pairings to present some important things to highlight. 

Please note that some fields are optional, which gives you flexibility in how your content is displayed.

Of Note: There is an optional field called Anchor Name that will add an anchor name (ex: myAnchor ) to an Image List item.   This is to create an Anchor Name that you can use to link to a specific Image List item.  

By placing an anchor name on an Image List item, you can then link to it on a different page. 

This works like most anchor links. You would need to notate the Anchor Name you assigned and the URL of the page that the Image List is on. 

So, for example, my Image List is on my Style Guide page: https://www.brynmawr.edu/inside/offices-services/library-information-technology-services/projects-partnerships/web-services/drupal-guides/basic-page-style-guide  (which is node/53216) and my Anchor Name is sampleAnchor 

Now, when I want to make a link to that specific Image List item from a different page. 

For instance if I was editing the main Web Services page, I could add a link in the WYSIWYG area of the main Web Services page to my Style Guide page with the anchor like so: /node/53216#sampleAnchor .

You can read more about anchor links in general here: https://askathena.brynmawr.edu/help/drupal-basic-flex-basic-wysiwyg#linking-to-a-specific-part-of-a-page-

Here is a screenshot of the Image List content entry form.

Below is the screenshot of the Image List on a page.  In this example, on the first Image List item we filled in all the fields, the second Image List item we only filled in the required fields

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 ^