JIT Image Manipulation

JIT Image Manipulation

JIT Image Manipulation (Just in time image manipulation т. е. работа с изображениями «на лету») представляет собой API для данамического преобразования изображений на основании URL параметров.

Обзор

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

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

JIT Image Manipulation вызывается при помощи специально сформированного URL. Основанием для такого URL служит http://your-site.com/image/. Дополнительные параметры указываются после базового URL и определяют режим преобразования, опции и расположение файла (описание см. ниже). Вы можете использовать данное расширение в своих шаблонах, указывая специальный URL в атрибуте src элемента img, например:

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

Внешние источники изображений

В случае если необходимо преобразовывать изображение с других сайтов, необходимо добавить домен-источник в список «Деверенные сайты (Trusted Sites)» в меню Система > Настройки. Добавлять домены следует по одному на строку в следующем формате:

images.external-site.com*

Детали

Режимы

JIT Image Manipulation имеет четыре разных режима работы, каждый из которых требует разного указания URL параметров. См. таблицу ниже для получения дополнительной информации:

Режим Описание и структура URL
/ image / e / path
По умолчанию: Если режим преобразования не указан, изображение выводится как есть без изменений.
1 / image / 1 / w / h / e / path
Режим 1: Изменение размера размер исходного изображения будет изменён в соответствии с указаными значениями. Если высота или длинна изображения указаны как 0, то данный параметр будет вычислен в соответствии с пропорциями изображения.
2 / image / 2 / w / h / p / e / path
Режим 2: Заполнение холста размер исходного изображения будет изменён в соответствии с указаными значениями. Если высота или длинна изображения указаны как 0, то параметры будут вычислены в соответствии с пропорциями изображения.
3 / image / 3 / w / h / p / b / e / path
Режим 3: Изменение размера холста производится несмотря на исходный размер изображения, основываясь на параметрах высоты, ширины и позиции. Если размер холста меньше исходного изображения в любом измерении, то изображение будет обрезано. В случае если размер холста больше, свободное пространство будет заполнено фоновым цветом.

Параметры

Опции преобразования изображений задаются с помощью параметров:

Параметр Описание
Ширина (Width) Число в пикселях. Если указано значение 0, то обязательно необходимо указать высоту изображения, а ширина будет подобрана автоматически на основании соотношения сторон.
Высота (Height) Число в пикселях. Если указано значение 0, то обязательно необходимо указать ширину изображения, а высота будет подобрана автоматически на основании соотношения сторон.
Позиция (Position) Число от 1 до 9, определяющее регион который будет вырезан или изменён. Смотрите сетку ниже...
Фон (Background Color) Hex значение цвета. Поддерживается CSS-стиль коротких hex строк (ff2233 == f23).
Источник (External) Опционально. 0 или пустое значение для внутренних изображений сайта. 1 для изображений с других сайтов.
Путь (Path) Путь к оригиналу изображения. Если изображение расположено локально, то можно указывать относительный путь к файлу от каталога /workspace. Если изображение находится на стороннем сайте, то следует указывать полный URL путь (без http://) .

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

При использовании режимов «Заполнение холста» и «Изменение размера холста» преобразования будут производиться с использованим параметра «Позиция». Изображение показанное ниже, показыват возможные значения, которые может принимать параметр «Позиция».

JIT Positioning Grid
Поделиться
Отправить
Запинить
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное