There are two main ways to customize asset share links and embed codes: through the DAM user interface and by manually adjusting HTML.

Customizing in DAM¶

With permission, users can create customized asset share links and embed codes, beyond the presets and size options available in the DAM. In classic search results, Quick View, or Asset Details page, click the Share button for a single asset. 

 

Choose either link or embed code, then in the size dropdown, select Create Your Own.

 

You'll see size options, including the original size and fixed width and height, which you can adjust. If you select fixed width or fixed height, the image will scale to maintain aspect ratio. The maximum width and height for images is 2,048 x 2,048 px.

 

Select an anchor location for the image and rotate the image. You can also change the image background by clicking Display. Select a color or, to retain the transparent background on an asset, move the slider all the way to the left.

 

Under Advanced, you can choose to save the image as a specific format, then select image quality. If the image should be delivered over a secure connection, check Use a secure connection. To display the image in a high-pixel density, check Retina display. If you'd like others to be able to download the original format of the image, check Show download button.

After your customizations are complete, copy the code. You can also click Save preset to set it as a pre-determined sizes for other DAM users to select. 
 

Customizing manually

For images, share links and embed codes can be customized by manually changing the dimensions, cropping (the keep area), or background color. Here's an example of an embed code: 

https://eudaimonia.widen.net/content/ig5uijtr0y/jpeg/Bliss_environment_1.jpeg?w=640&crop=yes&color=cccccc&quality=80

Without parameters completed, this link looks like this:

https://eudaimonia.widen.net/content/ig5uijtr0y/{format}/{filename}?w={value}&crop={value}&color={value}&quality={value}

The order of the parameters in the URL before the question mark cannot be changed. However, all parameters after the question mark can be ordered in any way. 

Image size¶

To specify an exact image size, provide both the width (width= or w=) and the height (height= or h=). To specify the size of a landscape image and preserve its aspect ratio, specify only the width. Likewise, for a portrait image, specify only the height. If you don't specify either width or height, the Acquia DAM will provide you with an image based on the original asset size, up to a maximum of 2,048 pixels in the longest dimension.

If you specify the retina parameter (&retina=true), the pixel size that's returned will be doubled. For example, if you request w=300 and h=200, the DAM will return an image with a pixel size 600x400. This is typically used to display with high pixel density.

Filename¶

The filename, while not required in a share link or embed code, is recommended for search engine optimization purposes. You can change or remove the filename and it will have no effect on the link path or the asset in DAM. 

Image format¶

The image format can be GIF, JPEG, PNG, WEB, or WEBP. GIF or PNG formats are best for logo and line art images. If it's important to retain transparency in your embed codes, use the PNG format. If transparency isn't important but a smaller file size is, use the JPEG or WEBP format. If you don't have a preference, use the WEB format, which is a smart format that allows the DAM to pick the most appropriate format based on the characteristics of the asset.

This table illustrates the formats listed above and corresponding content that's included in the share link or embed code.

Options¶

Options are specified as URL query parameters. Immediately after the image format, add a question mark ( ? ). Additional options are separated by the ampersand ( & ). An equals ( = ) sign is used to separate the option name from the option's value.

Quality¶

Name: quality or "q"
Default: 80
Value: Integer from 0 (lowest quality) to 100 (highest quality)
*For JPEG images only

Name: DPI or “dpi”
Default: 72

The quality parameter determines image file size compression, whereas DPI determines the number of ink dots on a printed image. If this DPI parameter is not set in the customized embed code, the image's physical resolution is unspecified. Some formats like WEBP don’t require DPI, whereas some do, such as JPEG. For image formats that require it, if no DPI is set, these images will be given a default DPI of 72.

Embed code for a video without a player¶

For video embeds without a player, HD or SD quality parameters can be specified. The following are examples for each option:

HD Quality:

<video controls>

    <source src="https://eudaimonia.widen.net/content/vizjlkr3kf/mp4/Bike-path.mov?quality=hd&u=vln12h&use=pfoth" type="video/mp4">

</video>
 

SD Quality:

<video controls>

    <source src="https://eudaimonia.widen.net/content/vizjlkr3kf/mp4/Bike-path.mov?quality=sd&u=vln12h&use=pfoth" type="video/mp4">

</video>

Embed code for a video with a player¶

For video embeds with an integrated player, specifying quality is unnecessary. The player automatically optimizes the quality based on network conditions and display size. 

For example:

<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;"><iframe src="https://eudaimonia.widen.net/view/video/vizjlkr3kf/Bike%20path.mov?u=vln12h&use=pfoth"webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0"allowtransparency="true" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>

Crop area¶

Name: crop
Default: True
Value: Boolean value. "true," "yes," or "y" for true. "false," "no," or "n" for false.

Crop area values are valid when you specify the image width and height. When true, the image is cropped to fit the aspect ratio of the requested size. When false, the image is created with additional background area.

Keep area¶

Name: keep or "k"
Default: center
Value:
"c" = center
"n" = north
"ne" = northeast
"e" = east
"se" = southeast
"s" = south
"sw" = southwest
"w" = west
"nw" = northwest

When you set the crop value to true, the primary area preserved is controlled by the keep value. 

Background color¶

Name: color or "co"
Default: ffffff (white)
Value: RGB color value specified as in HEX format

When you set the crop option to false, additional background areas are created with the specified color. Example HTML color codes are available.
 

Video autoplay¶

To configure autoplay in embed codes for videos with a player, add this: t.autoplay=true&t.muted=true

For example, the video embed code would look like: 

<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;"><iframe src="https://eudaimonia.widen.net/view/video/vizjlkr3kf/Bike%20path.mov?quality=hd&u=vln12h&use=pfoth&t.autoplay=true&t.muted=true" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" allowtransparency="true" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>