Skip to main content

How do I use the Marvia CDN to share and transform assets?

Learn how to use CDN links to always show the latest version of an asset on other platforms, and adjust its format, size and crop.

Written by Maarten Peters

Good To Know

Content Distribution Network (CDN): Every asset on our platform gets a link that can be used on other platforms (CMS, PIM, etc.) to always show an up-to-date version.

This link can also be used for Digital Asset Transformation, allowing images to be adjusted to fit the needs of different platforms, such as specific file formats, resolutions, aspect ratios (crop), maximum file sizes, and backgrounds.

Reasons to use:

  1. Efficiency: Only the original high-quality image is needed in the DAM. CDN handles transformations for all destinations automatically, saving time and reducing manual errors.

  2. Consistency: CDN provides a single source of truth. Updating an image in the DAM will automatically update it across all platforms, preventing outdated imagery.

  3. Performance: Utilizing Amazon CloudFront (CDN), we improve loading times by delivering content from servers close to each user, resulting in lower latency and higher transfer speeds.

Possibilities

These changes can be made to an asset via our CDN. The modifications need to be added to the end of the CDN URL, for example:


​Versions: While the CDN URL contains the current filename, it will always load the latest version of a asset in the DAM. Even when the newer version has another filename/-type.

Name

Type

Description

format

string

One of the following options:

  • auto

  • jpeg

  • webp

  • avif

  • png

  • svg

  • gif

width

integer

The width of the image

height

integer

The height of the image

crop

decimal,decimal,decimal,decimal

Four coordinates in pixels to position the corners of the cropper on the original file.

extend

integer

Providing padding to an image. Number of pixels . Any integer above 0.

background

string

A background color for the image. Supported are CSS color names (white), hex values without the # (f0f0f0f0), RGB values (0,0,0) or RGBA (0,0,0,0.5) for adding transparency.

quality

integer

Range from 1-100, 100 being the best possible quality

max-size

integer

Number of bytes the image can be. The quality of the image will be lowered to fit the max-size.

Front-end

When opening an image in the DAM, you can access the CDN URL by using the Crop & Resize button and then copying the Link. This URL will include parameters for width, height, and crop, depending on whether resizing or cropping is being used.

API

To automate synchronization to another platform or retrieve the CDN URL for multiple assets, use our API. Detailed information on our API can be found in the documentation https://api.getmarvia.com/docs#/. The following steps need to be taken in this use case:
​

1. API credentials

Request a client-id and client-secret from Customer Success.
​

2. Create token

An OAuth 2.0 Bearer access token needs to be created initially. This token must accompany every subsequent request via the Authorization Header. The token must be refreshed periodically (see https://api.getmarvia.com/docs#/). To create the token, use the token request:

POST /api/tokens/create


​Body JSON

{

"client-id": "<client-id>",

"client-secret": "<client-secret>",

"sub-domain": "<subdomain>",

"domain": "<domain without .>",

"domainExtension": "<com, nl, etc.>",

"username": "<username>",

"password": "<password>"

}

Response 200

{
"access-token": "...",
"refresh-token": "..."

}
​

3. Retrieve CDN URL

Fetch JSON data for all assets that meet the search criteria and pagination. The cdnUrl parameter is included with each asset.

GET /api/media

Additional search criteria

Name

Type

Description

page

integer

Index to load a specific page. Default: 1

limit

integer

Amount of items to receive per page. Default: 25

search

string

Search on media names, file names, tags and metaTags. This is a string value containing the search query. Example: "unicorn"

filters[]

array

An associative array with the following options:

  • fileType[] An array of file formats in all capitals, for example JPG, GIF, PNG. JPG also includes jpeg extension.

  • tags[] An array of tag names.

  • metatags[] An associative array with metatags set for your company. When you add the available metatag it will be an array. So: metatags[available-metatag][]

  • created[] and edited[] An associative array for filtering a range of dates.

    • gte Stands for greater than or equal to

    • lte Stands for lower than or equal to
      Example values:
      - 2024-06-22T10:25:10
      - 2024-06-22T10:25
      - 2024-06-22

order-by

string:string

An order-by parameter to sort the return items. The param is formatted like “<name>:<direction>” Available names and directions:

  • date : asc or desc

  • name : asc or desc

  • filename : asc or desc

Response 200

{

"pagination": {

"page": 1,

"limit": 25,

"totalPages": 5,

"totalResult": 113

},

"media": [

{

"uuid": "7f428825-b619-4294-a4b2-3fe7c4dfafa3",

"created": 1716965093000,

"edited": 1730986954000,

"name": "Unicorn frappuccino special",

"file": {

"uuid": "6215fb9a-f592-4604-b8b9-6dc7f0751ed6",

"name_original": "a_product_shot_of_a_unicorn_frappuccino_with_a_lig_26818abd-7004-4df1-ac83-4fedc8216cd4.webp",

"extension": "webp",

"size": 858012,

"content_type": "image/webp",

"width": 1020,

"height": 1020

},

"tags": [...],

"metaTags": [...],

"downloadUrl": "...",

"previewUrl": "...",

"thumbnailUrl": "...",

"portalUrl": "..."

}

...

]

}
​

4. Only retrieving changed assets

You can use a filter to receive only the assets that have changed since a specified time. This is particularly useful for synchronization scenarios, for example:

GET /api/media?filters[edited][gte]=2024-06-22T14:05:00

Did this answer your question?