JIT Image Manipulation

JIT Image Manipulation обеспечивает URL-ориентированный API для динамической трансформации изображений.

Обзор

JIT (Just-in-time) Image Manipulation — это расширение, которое «на лету» преобразует изображения в соответствии с параметрами, которые передаются через специальным образом сформированные URL. С помощью расширения можно обрезать и/или изменять размеры исходного изображения. Причем изображения могут быть расположены как в самой папке проекта Symphony (внутренние), так и на других сайтах (внешние изображения). Трансформированные изображения кешируются.

Использование

JIT Image Manipulation is invoked via a specially-formed URL. The base of the URL is http://your-site.com/image/. Additional URL parameters follow, specifying the desired transformation mode, options, and file location (see below).

The extension can be utilized from within Symphony’s templating layer by using this special URL in the src attribute of an img element. For example:

<img src="http://yoursite.com/image/1/200/0/images/ninja-parade.jpg" />

Внешние изображения

In order for the extension to be able to transform external images, the images' host domain must first be added to the whitelist of “Trusted Sites” in System > Preferences. Trusted sites can be added one per line and should be in the following format:

images.external-site.com*

Детали

Режимы

JIT Image Manipulation has four modes of operation, each of which requires a slightly different URL structure. See below for details on specific parameters.

Режим Структура URL и описание
/image/e/path
Default: Direct display will simply display the original image as-is when no mode is provided.
1 /image/1/w/h/e/path
Mode 1: Resize will resize the original image using the width and height parameters provided. If either width or height is 0, the extension will resize using the other value and maintain the image’s original aspect ratio.
2 /image/2/w/h/p/e/path
Mode 2: Crop to Fill will first use the position parameter and the smaller of the two dimension parameters (width and height) to resize the image while maintaining its original aspect ratio. Then it will crop the remainder of the image using the other (larger) dimension.
3 /image/3/w/h/p/b/e/path
Mode 3: Resize Canvas will resize the original image’s canvas using the width, height, and position parameters. If the resulting canvas size is smaller than the original in either dimension, the original will be cropped. If it is larger than the original in either dimension, the additional space will be filled using the background color parameter.
4 /image/4/w/h/e/path
Mode 4: Resize to Fit

Параметры

Image transformation options are specified via the following parameters:

Параметр Описание
Width (w) Number in pixels. If 0, height must be specified and width will auto-adjust, keeping original aspect ratio.
Height (h) Number in pixels. If 0, width must be specified and height will auto-adjust, keeping original aspect ratio.
Position (p) Number 1–9, specifying region from which to crop/resize. See grid below.
Background Color (b) Hex color value. Supports CSS-style short hex strings (ff2233 = f23)
External (e) Optional. 0 or omitted for internal images. 1 for external images.
Path Path to the original image. If the image is internal, this is a relative path from /workspace. If the image is external, it is a URL (excluding http://).

Сетка позиционирования

When using the “Crop to Fill” or “Resize Canvas” modes, the transformation will be anchored according to a position parameter. The image below shows the possible parameter values along with their respective positions.

Сетка позиционирования
— Сетка позиционирования


Оригинал статьи

Symphony Team
http://getsymphony.com/learn/concepts/view/jit-image-manipulation/