Transformation Basics

URL Format

Front Space URLs enable dynamic image and video manipulations with a wide range of options. The URL format consists of a base URL followed by a series of transformation parameters separated by slashes.

The URL format for Front Space is https://cdn.front.space/<project_name>/<transformations>/<folder-name>/<origin-path>

• Replace <project_name> with the name of your Front Space project.
• Replace <transformations> with the transformation parameters you want to apply to the image or video. This parameter is optional and on the other hand, can also have multiple slashes included within it.
• Replace <folder-name> with the name of the folder in your Front Space project that contains the image or video.
• Replace <origin-path> with the path to the image or video in the origin mapped to the folder.

Transformation Parameters

Transformation parameters are added to the base URL to manipulate the image or video. Here are some examples:

• w_<width>: Set the width of the image to <width> pixels.
• h_<height>: Set the height of the image to <height> pixels.
• c_<crop>: Set the crop mode to <crop>. Options include fill, fit, limit, mfit, lfill, pad, lpad, mpad, crop.
• q_<quality>: Set the quality of the image to <quality>. Value should be between 1 and 100.

Example

Here's an example Front Space URL:

Here the URL components are as follows:

• https://cdn.front.space: Base URL
• demo-project: Project name
• w_600,h_400,c_fill/f_auto: Transformation parameters
• demo-origin: Folder name
• sample6.jpg: Origin path

Parameter Types

There are two types of transformation parameters:

Action parameters: Parameters that perform a specific transformation on the asset.

Qualifier parameters: Parameters that do not perform an action on their own, but rather alter the default behaviour or otherwise adjust the outcome of the corresponding action parameter.

It's best practice to include only one action parameter per URL component.

If you want to apply multiple actions in a single transformation URL, apply them in separate chained components, where each action is performed on the result of the previous one.

In contrast, qualifier parameters must be included in the component with the action parameter they qualify.

• Most qualifiers are optional, meaning the related action parameter can be used independently, but you can add optional qualifiers to modify the default behaviour.
• In some cases, an action parameter
• There are a few parameters that can be used independently as action parameters, but can also be used in other scenarios as a qualifier for another action.

For example, the transformation below includes a crop action, a rounding action, and 2 effect actions. The qualifier transformations included in each action define additional adjustments to the transformation action's behavior:

In this transformation:

• The width, aspect ratio, gravity, and zoom qualifiers control the way the thumbnail crop action will be performed
• The rounding action does not have any qualifiers.
• The color qualifier overrides the default color of the outline effect action
• The x and y qualifiers adjust the placement of the shadow effect and the color qualifier overrides the default shadow color

Verbose vs non-verbose syntax

Some transformation parameters with multiple options offer two alternative syntaxes for defining the option values:

• Verbose, unordered: Each option of the transformation (whether required or optional) is specified in the verbose format name_value and each option is separated by a colon (:) or semi-colon (;) depending on the transformation. The options can be specified in any order, and you only need to include those that you want (or are required) to define. With this syntax, you can also choose to specify only the options for which you don't want to use default values and default values will be applied for the others.
• Non-verbose, ordered: Transformation options are specified only by values, and must be entered in the pre-defined option order for that transformation. All values from the syntax to the left of the value you want to supply must also be entered.

Example:

The theme effect supports the color and photosensitivity options, but you can specify them in a different order using verbose syntax. For example:

e_theme:photosensitivity_110:color_black

However, when using non-verbose syntax, you must specify the parameters in order. Therefore, even if you only want to change the default behavior of the photosensitivity (last) option, you must still specify the value to use for the color (first) option:

e_theme:black:110

To refer to various transformation URL syntaxes that can be used to transform your images and videos, please visit URL Transformation API