Add a Related media custom field
You use this field to add an option to attach a media to a content item in the backend and then display the media together with the item on the frontend.
EXAMPLE: You add an image custom field to the News module. Then, you create a news item. You can see the custom field and you can use it to add one or more images to the news item. Then, you must add the image custom field to the widget template of the News widget. When you drop the widget on a page, the website displays news, together with images.
You can add a media field to built-in and dynamic modules, as well as pages. The supported media types are images, videos, and files.
To add a media field to a module or page, perform the following:
- Perform procedure Create custom fields » Step 1 to Step 5.
- In Type, select Related media.
- In What kind of media this field will manage?, select one of the following:
- Documents and other files
- Click Continue.
- In Source, select the provider (or destination) where you want to store the related media items.
You can choose between:
- The default source for this site
- Any other provider that is set up
All sources for the current site
IMPORTANT: When working in multisite, unless explicitly configured, your sites have different default providers for content. You can share content between sites but each site stores new content in their default provider. For more information, see Share content providers of modules.
You can change the provider you select at this step at a later point in time. Keep in mind that when changing providers, the provider the Related media field works with changes dynamically as you switch sites to the default provider for the current site. You can also set the source to be all shared providers. To learn about the implications when changing providers, see Considerations and dependencies.
- Under Interface widget for uploading or selecting images, select the widget that you want to use in the backend to upload or select an uploaded media file.
By default, images are uploaded with the Image selector, videos – with the Videos selector, documents and other files – with File selector.
- In Label input field enter the label of the textbox.
This label is displayed when you create a content item in the backend.
For example, News images.
- In Instructional text, enter instructions or explanatory text for the custom field, if needed.
- Select the This is a required field checkbox, if you want to make the custom field mandatory.
- Under Display selected items on the frontend using..., select the widget that you want to use to display the media that is associated as related media.
You can choose between displaying the media file as a simple link to the media or using the respective media widget. You can also use your own custom widget.
- Click Limitations tab.
- In How many files can be uploaded or selected? radio button, select if you want to allow multiple media files to be uploaded.
- In Max file size can be uploaded field, enter the maximum file size in MB.
- Under Allowed file types, perform one of the following:
- If you are adding images or videos as related media, select the checkboxes of the file types that you allow. If the files that you want to allow are not in the list, enter them in a comma-separated list in Other textbox.
- If you are adding documents and other files as related media, select whether you want to allow all file types or only selected file types. If the files that you want to allow are not in the list of selected file types, enter them in a comma-separated list in Other textbox.
- Click General tab.
- Under Frontend widget for displaying selected <media type>, select the widget that you want to use to display the selected media type on the frontend of your site
The following table lists the default widget for each media type:
- In Label input field enter the label of the media widget.
For example, Watch video.
- Click Done.
The new field appears in Custom fields section.
If you want to delete a custom field, click .
- Click Save changes.
- Insert the custom field in the respective widget template.
For example, if you want to relate News to Images, you must insert the images custom field in the widget template that you use to display news items.
For more information, see Create and edit widget templates.