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
Image Gallery
Image List

Embed a Video (YouTube or Vimeo)

This feature is limited to only YouTube or Vimeo videos.

If you wish to embed a Panopto video, please see our Embed Other Content Items instructions.

To embed a video in the WYSIWYG via the Insert Media button, you would place your cursor where you want the video to appear and then click the Insert Media icon in the toolbar.

Place cursor on a new line where you want your video to appear
Press the Insert Media button in the toolbar
The Media Library modal window will open. The default is that the Remote Audio tab is selected upon opening the modal window.
First select the Vertical Tab on the left for the type of media you are inserting. In this case it will be the "Video" tab
You can now choose to Use an existing video or Add a new one to the library
1. Find an Existing Video in the library
  1. Using the Name filter, type a word you think the Name contains and press "Apply filters". This example will yield all the videos whose name contains "class", for instance. To clear the Name filter, simply delete the phrase you entered and then press "Apply filters" again.
  2. You can also use the "Table" view by clicking the icon to the right of the filters, incase the Grid view isn't as helpful
  3. depending on the view (Grid or Table), click on the video or check the box next to the video you wish to insert
  4. press the "Insert selected" button at the bottom of the modal window
2. Add a New Video to the library
  1. visit your video on the web. for example, we are going to the Bryn Mawr College YouTube channel and selecting a video to view.
  2. once there, you can simply copy the URL from the browser address bar
  3. then, simply paste that URL into the "Add Video via URL" field and click the blue "Add" button
  4. this will take you to a different modal window that lets you edit the Name field of the Video. This field is how you will find the video later in the library.
  5. once you are satisfied you can click the "Save" button
  6. this takes you back to the library modal, where you can see that the video has a check mark on it. This means it is already selected.
  7. If you are happy that is the video you wish to select, press the "Insert selected" button
Once you are back in the editor, you will see that the video seems small.

you can click once on the video to make the Video Dialog appear to adjust how it should appear.
1. select the "Video" view mode. This will ensure it displays properly on the page
2. you can also choose to float the video to the right or the left, which will then have the text on the page wrap around it.
3. you can also choose to add a caption to the video
Similarly to an Image, you can use the "Insert Paragraph" before and after buttons that you see if you hover on the video in order to add content before or after the video

Embed an Audio (Spotify or SoundCloud)

This feature is limited to only Spotify or SoundCloud audio tracks.

What if my audio track, podcast or playlist can't also be found in Spotify or SoundCloud? please see our Embed Other Content Items instructions.

To embed an audio in the WYSIWYG via the Insert Media button, you would place your cursor where you want the audio to appear and then click the Insert Media icon in the toolbar.

Place cursor on a new line where you want your audio to appear
Press the Insert Media button in the toolbar
The Media Library modal window will open.
First select the Vertical Tab on the left for the type of media you are inserting. In this case it will be the "Audio" tab
You can now choose to Use an existing audio or Add a new one to the library
1. Find an Existing Audio in the library
  1. Using the Name filter, type what you think it is called and press "Apply filters"
  2. You can also use the "Table" view by clicking the icon to the right of the filters, incase the Grid view isn't as helpful
  3. depending on the view (Grid or Table), click on the audio or check the box next to the audio you wish to insert
  4. press the "Insert selected" button at the bottom of the modal window
2. Add a New Audio to the library
  1. visit your video on the web. for example, we are going to the Global Dispatches podcast on Spotify and selecting a track to use.
  2. once there, you can simply copy the URL from the browser address bar
  3. then, simply paste that URL into the "Add Remote Audio via URL" field and click the blue "Add" button
  4. this will take you to a different modal window that lets you edit the Name field of the Audio. This field is how you will find the audio later in the library.
  5. once you are satisfied you can click the "Save" button
  6. this takes you back to the library modal, where you can see that the audio has a check mark on it. This means it is already selected.
  7. If you are happy that is the audio you wish to select, press the "Insert selected" button
Once you are back in the editor, you can click once on the audio to make the Audio Dialog appear.
1. Check to see that the "Audio" view mode is default selected. This will ensure it displays properly on the page
2. You can also choose to float the audio to the right or the left, which will then have the text on the page wrap around it.
3. You can also choose to add a caption to the audio
Similarly to an Image, you can use the "Insert Paragraph" before and after buttons that you see if you hover on the audio in order to add content before or after the audio.

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 three items

screenshot columns display

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 Gallery optional field (Introduction) does appear if filled in.

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

Please note that the Office of Communications and Marketing applies Patterns sparingly at their discretion.

Web Stewards will only be able to create Image Gallery Flex Items with the Default white background.

Here is how our example looks 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

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

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