Skip to main content

Images, Videos, Documents

The CMS can use the DAM integrated into the Discovery platform as a media library. This way you can use any image, video, document, or even other type of file on your pages. For example, you can select an image to use as a Hero Image for a CallToAction component, or you can choose PDFs to attach to an article, allowing end users to download them when they visit the page of the site you are creating.

The CMS delivers all files (images, videos, etc.) via Content Delivery Network (CDN), in order to guarantee minimum latency globally. If it has been included in the contract with Reply, AKAMAI is used as a CDN for image optimization, as explained in the relevant section. From a frontend point of view, the CDN is completely transparent: the CMS provides URLs that must be used in the frontend for images, video players, download actions, etc.

In the following sections, some topics related to the use of digital assets are explored in depth.

CMS & DAM​

It is possible to use digital assets in the CMS with or without the Discovery DAM module active. The fundamental difference is that without the DAM module the assets must be loaded directly into the final format, while with the active DAM module it is possible to benefit from format conversions (transcoding). For example, for a high-quality video file the DAM can generate multiple versions in different encodings. For a Word or PowerPoint file, a PDF is generated, etc.

Publication of Digital Assets​

Digital assets are independent of the concept of property: when an image or video is published, for example, it will be available to all properties. It is not possible to publish media only for a specific property.

When you use media from a page or content, via a Media field, the corresponding asset is automatically published if it has not already been published.

There are cases, however, in which you want to publish digital assets in order to be able to carry out searches using their metadata. This type of publication requires the DAM license.

Selection in the CMS​

When you are editing a content/component with Media (from version 1.1), Image or Video type fields, an upload icon appears next to the field, to upload from the local file system, or a "lens" icon that opens a popup for choosing a digital asset present in the DAM.

There are two ways to use this popup:

  • via cart: before editing the content/component, search for the assets you need in Discovery by navigating to the Digital Assets section. This section allows you to carry out searches by crossing various types of filters, sorts, etc. Every time you identify an asset that you want to use for the frontend, you add it to the cart using the appropriate icon. When you go to edit the content/component with a Media type field (or equivalent) and click on the "lens" icon, the contents of the cart are immediately proposed, so you can choose one of the assets that had previously been selected .
  • via free search: in the asset selection popup you use a switch at the top that allows you to switch between "Cart" and "Search" mode. In search mode it is therefore possible to enter free text for searches.

Which method you use depends on how rich your digital asset repository is and whether you can simply use a simple free-text search to find assets. In the presence of a repository with thousands, or tens of thousands of assets, it may be necessary to use more complex searches, cross-referencing various criteria, to identify the assets to use. In that case, the Cart is the recommended choice. Otherwise, you can use free text search.

Use of External URLs​

If you want to use images, videos, etc. that are not loaded in Discovery, it is necessary to define a String field in which to put the URL of the external image. The frontend will use this field to display the image. For external URLs, the preview will not be available in the CMS Page Builder, nor will it be possible to crop the images.

Images​

For images, if included in the contract, the preferred service is AKAMAI Image Manager. This service allows you to dynamically optimize images based on the browser and pass a series of parameters to the image URL to apply transformations.

Below are the references for the AKAMAI Image Manager service:

When you load or select an image, a Crop icon appears when you move the mouse near the image. By clicking on it, a popup appears that allows you to crop the image, maintaining or not maintaining the proportions. The result of this cropping is the generation of a URL that already contains the AKAMAI "crop" parameters. In this way the original image present in the DAM is not modified and the cropping is performed dynamically by the AKAMAI service. After the first cut, thanks to CDN caching, the same cut is served with minimal latency.

In addition to the "crop" parameters applied by Discovery, the client application can apply additional parameters for other transformations, such as image scaling, compressions, etc. For the transformation parameters, please refer to the link provided above.

Some examples​

  • Crop: https://domain/.../image.jpg?im=Crop=(0,0,200,300) (crop)
  • Resize: https://domain/.../image.jpg?im=Resize=(250,250) (resize to a width x height)
  • Resize only for width or height:
    • https://domain/.../image.jpg?im=Resize,width=500 (resize with respect to a proportional width, height)
    • https://domain/.../image.jpg?im=Resize,height=500 (resize with respect to a proportional height, width)
  • Resize (2): https://domain/.../image.jpg?imwidth=${width} (resize to a width)
  • Scale: https://domain/.../image.jpg?im=Scale,width=0.5,height=0.5 (scales to a % of width/height, where 1 = 100%)
  • FitAndFill: https://domain/.../image.jpg?im=FitAndFill=(400,500)
  • FeatureCrop: https://domain/.../image.jpg?im=FeatureCrop,width=300,height=800 (crop the important part of an image)

It is possible to apply sequences of transformations:

  • https://domain/.../image.jpg?im=Crop=(0,0,200,200);Resize=(50,50)
  • https://domain/.../image.jpg?im=Crop=(3689,343,1033,1040);Blur;Resize,width=100

Video​

When a video is associated with a Media component, the API returns the URL of the video as it was loaded. If the Discovery DAM module is active, it is also possible to obtain the URLs of files generated from the uploaded video. The DAM module allows you to encode video in various bitrates (Video detail > Formats > Generate...) in progressive or adaptive format (HLS), assuming that the player is able to handle this format. It is also possible to upload a video encoded with an external tool (Video detail > Formats > Upload new file). This upload can be useful if you want to keep multiple cuts of the same video (e.g. 16:9 and 1:1) within the same asset. If the DAM module is active, all these formats are returned when the API is queried and the frontend can choose which one to show, for example based on the user's device/browser type.

If you want to use two different formats depending on the type of screen, for example 1:1 for smartphones in vertical position and 16:9 in all other cases, it is currently necessary to cut the video with an external tool (e.g. Adobe PremierePro ). Once the two versions of the video have been produced, two paths are possible:

  1. upload the two videos into 2 different assets (e.g. "Campaign Summer 2023 - desktop" and "Campaign Summer 2023 - mobile"), add two Media type fields to the Component or Content that must use the video, and choose on the frontend side which of the two fields to use. This is the only option available in the absence of the Discovery DAM module;
  2. first load the desktop format as master video, and then within the same asset load the video with cut for mobile. In this way it is sufficient to add a single Media field to the Component/Content, and then take the relative rendition returned by the API.

Documents and Other Files​

When a document or any other type of file (Excel, Zip, etc.) is associated with a Media type component, the API returns the URL of the file as it was loaded.

In the presence of the DAM module some formats are transcoded. For example, a PDF is generated from Word and PowerPoint formats. Both renditions will be available via API.