Thumbnails

Orchid has support for basic thumbnail generation to keep your pages loading fast.

See Also: Edit this page

Media Management

Orchid includes basic support for media management, including simple image manipulation. You can use the asset() template function to load an asset, and Orchid will make sure it ends up in your final site.

Basic Usage

{{ 'assets/image.jpg'|asset }}

asset

Thumbnail Generation

Rotate

Rotate an image asset. Rotation angle is expressed in degrees.

{{ 'assets/image.jpg'|asset|rotate(90) }}

rotated asset

Rotate an image asset.

Key Type Default Value Description
angle double 0.0

Set image rotation angle in degrees.

Key Type Default Value Description
input Object null
No archetypes

Scale

Scale an image asset by a constant factor.

{{ 'assets/image.jpg'|asset|scale(0.85) }}

scaled asset

Scale an image asset by a constant factor.

Key Type Default Value Description
factor double 0.0

Set image rotation angle in degrees.

Key Type Default Value Description
input Object null
No archetypes

Resize

Resize an image asset to specific dimensions. By default, image is resized maintaining its aspect ratio, and is reduced to the largest image that can fit entirely within the specified dimensions. Use the exact=true parameter to resize the image to exactly the specified dimensions, stretching the image as necessary to fit.

{{ 'assets/image.jpg'|asset|resize(800, 600, "exact") }}

resized asset exact resized asset resized cropped center-left asset resized cropped center asset resized cropped center-right asset

Resize an image asset to specific dimensions.

Key Type Default Value Description
height int -1

Set image rotation angle in degrees.

mode Mode fit

exact to stretch image to fit, or fit to maintain aspect ratio. Alternatively, you can crop the image to the specified dimensions by setting a mode with the cropping position, one of [tl, tc, tr, cl, c, cr, bl, bc, br]

width int -1

Set image rotation angle in degrees.

Key Type Default Value Description
input Object null
No archetypes

Chaining

Multiple transformations may be applied to a single asset. Simply use more than one of the above filters. You can use the same filter more than once, and they will be applied in turn from left-to-right.

{{ 'assets/image.jpg'|asset|resize(800, 600, exact=true)|rotate(45)|rotate(45) }}

resized asset resized asset resized asset