Add the ability to associate media (video or audio) to a webform element/question

Created on 12 October 2022, over 1 year ago
Updated 12 December 2022, over 1 year ago

Problem/Motivation

Currently webform elements allow addition of text. However, media elements are difficult to place. We would like to have media elements that provide audio or video prompts to the survey respondent. The media module provides the ability to store translations also for the associated media which is an excellent way to build up a multilingual form. We are looking to integrate media element so that people with low literacy can use the form.

Steps to reproduce

Add media element in the description field in the radio field element. The media does not display.

Proposed resolution

Ability to add media to any element. It would be good if it would be possible to have a add media button or box that allows one to add media. Current we use the following workaround:
1. Create an advanced HTML element.
2. Add capability of embedding media in the basic text format or any other text format.
3. Configure the element to use the said text format in webform configuration.
4. Add media in the element.
This would mean that for each question we need to create another element which is not a very good way of going about things.

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Closed: won't fix

Version

6.2

Component

Code

Created by

🇮🇳India santam

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India santam

    I can confirm that this issue is now resolved with the latest Drupal 10 and CK editor 5. The following is a step by step guide to achieve this.

    Step 1: Go to Configuration > Content Authoring > Text Formats
    Step 2: Create a new text format (I would advocate creating a new format which will give you finer control over what the editor can see in the toolbar. I have created a new format called Webform Editing.
    Step 3: Assign the roles which can use this text editor. Be careful here so that everyone does not get access to this text format.
    Step 4: Choose the CKEditor 5 from the text editor dropdown
    Step 5: Drag and drop the buttons that you want. The media button looks like a Image with an audio symbol on it. Not very intuitive and to avoid confusions I have not the image button which actually looks quite like the media button.
    Step 6: Click the Embed Media checkbox in the Enabled Filters section.
    Step 7: In the filter settings please selec the type of media entities that can be embedded and the view modes for the said entities.

    Once done you have created a text format that can be used. Now we need to ensure that webform users can use this text format. In order to do so please go to Structure > Webforms > Configuration > Elements.
    Scroll down till you reach the HTML editor settings and in the element text format choose the Webform Editing Text format. You can also choose the mail text format. Dont forget to scroll down and save.
    Now all description text elements in your HTML editor will have the media button which will enable you to use the Media browser to select and embed media that you wish.

Production build 0.69.0 2024