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.

screenshot wysisyg

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

NOTE: If the WYSIWYG doesn’t have that icon, you will be unable to embed a video in it.


screenshot wysisyg toolbar buttons

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”

screenshot media select

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

screenshot video add new screen

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.

screenshot file finder on laptop


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


screenshot video add new screen fields

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.


screenshot video add new screen fields


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


screenshot video add new screen fields


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


screenshot media review item


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.


screenshot video caption


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.


screenshot wysiwyg embed video display

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.


screenshot wysisyg video edit


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


screenshot media review item


By clicking on the file name, you can edit the video. NOTE: Only do this for a video you created!

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


screenshot videoedit screen fields


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.


screenshot video caption


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


screenshot wysisyg video


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

screenshot wysiwyg video display


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”

screenshot video browse library


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


screenshot video browse library embed


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.


screenshot video caption


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.


screenshot wysiwyg video display


Please note that not all videos in the library have images

You can see what it looks like in the WYSIWYG


screenshot wysiwyg video without image


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


screenshot wysiwyg video without image display

If you encounter this, please contact Communications so that they can edit the video.  If you really want to use it without an image, make sure it is in it’s own WYSIWYG so it won’t display in an odd way as seen above.

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

screenshot columns edit screen


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.


screenshot columns list items field


This example shows all fields filled in with four items

screenshot columns display

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.

screenshot feature grid edit screen

 

screenshot feature grid list item fields


Here is the grid feature in a page:


screenshot feature grid display

 

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

NOTE: The Slide optional fields can be filled in, but do NOT appear on the Gallery Slide.  

The Gallery optional field (Introduction) does appear if filled in.

screenshot image gallery edit screen

screenshot image gallery edit screen


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


screenshot slide reorder


This is how the gallery appears on the page

screenshot image gallery display page


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


screenshot image gallery display modal

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.  

Please type in a word or short phrase. DO NOT USE: spaces, punctuation or special characters.
Examples:starshipEnterprise, reunionMay2023 or phillies
Please ask Communications if you are unsure how to use this or what it is for.    

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


screenshot image list 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