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:

  1. Perform procedure Create custom fields » Step 1 to Step 5.
  2. In Type, select Related media.
  3. In What kind of media this field will manage?, select one of the following:
    • Images
    • Videos
    • Documents and other files
  4. In Source, select the provider where you want to store the related media items.
    IMPORTANT: When working in multisite, unless explicitly configured, your sites have different default providers for content. Thus, there is a clear separation and organization of content. You can share content between sites but each site stores new content in their default provider.

    For each content type, you can add related media fields. Each related media field can work with only one provider, for example, Default librariesprovider. However, you can configure the field to work with Default site source. This means that 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 same default provider for a content type, for example, News, for all sites in your instance. For more information, see Share content providers of modules.

    In scenarios where you configured a related media field provider to be “Default site source” and each site has a different default provider for the media content, the related media field displays content only on the site where this content was originally created.

  5. Click Continue.
  6. 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.
  7. 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.
  8. In Instructional text, enter instructions or explanatory text for the custom field, if needed. 
  9. Select the This is a required field checkbox, if you want to make the custom field mandatory.
  10. 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.
  11. Click Limitations tab.
  12. In How many files can be uploaded or selected? radio button, select if you want to allow multiple media files to be uploaded.
  13. In Max file size can be uploaded field, enter the maximum file size in MB.
  14. 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.
  15. Click General tab.
  16. 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:

    Media type  Default widget 
    Single image  Image 
    Multiple images  Image gallery 
    Single video  Video 
    Multiple videos  Video gallery 
    Single file  Document link 
    Multiple files  Downloadable list 
  17. In Label input field enter the label of the media widget.
    For example, Watch video.
  18. Click Done.
    The new field appears in Custom fields section.
    If you want to delete a custom field, click .
  19. Click Save changes.
  20. 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.

Was this article helpful?