Плагин "Линза" для редактора "Atto"
Плагин "Линза" разработан как дополнительный инструмент для редактора "Atto". "Линза" позволяет увеличивать часть ранее уменьшенного с помощью масштабирования изображения до оригинального размера при наведении указателя мыши. Например, чтобы рассмотреть детали.
Для включения опции, в редакторе нужно выделить предварительно загруженное изображение и отметить его кнопкой "Линза" в панели инструментов. На отображаемой странице часть отмеченного изображения будет увеличиваться до оригинального размера при наведении указателя мыши. Опционально можно включить открытие полноразмерного (с оригинальным разрешением) изображения в другой вкладке браузера по клику мыши.
Рис.1 Увеличение части отмеченного изображения до оригинального размера при наведении курсора мыши
Как это работает. Использование плагина "Линза"
Плагин предназначен для обработки загруженных в редактор изображений, размер которых уменьшен (масштабируется) с помощью тегов, опций редактора или автоматически. Обычно это изображения высокого качества с большим оригинальным разрешением и значениями длины и ширины (в пикселах), которые за счет значений html атрибутов "width" и "height" отображаются для удобства пользователя на странице в браузере в уменьшенном виде.
Рис. 2. Загрузка изображения через редактор Atto. Свойства изображения
Другими словами, имеется в виду, что размер передаваемого в браузер изображения меньше оригинального.
Например, оригинальный размер изображения 1800х988px, а размер, установленный в редакторе - 450х247px (масштаб 1:4).
Исходные изображения загружаются через редактор Atto. Для применения инструмента "Линза" необходимо выделить целевое изображение левой кнопкой мыши и переключить "тумблер-индикатор" на кнопке инструмента "Линза" в панели инструментов редактора в положение "Зеленый". При этом, после сохранения, изображение получит разметку, определяющую необходимость увеличения при наведении указателя мыши:
Рис. 3. Применение инструмента "Линза". Переключение "тумблера-индикатора" в положение "Зеленый"
Если при выделении изображения в редакторе на кнопке "Линза" отображается красный индикатор, данный инструмент не применяется к изображению (значение по умолчанию):
Рис. 4. Применение инструмента "Линза". Отображение красного индикатора
С помощью кликов по "Линзе" при выделенном изображении можно менять разметку, определяющую необходимость увеличения изображения.
По умолчанию плагин присутствует в системе начиная с версии 3.5.14b, но, для его использования, необходимо добавить кнопку "Линза" в панель инструментов редакора "Atto".
Плагин "Линза". Включение инструмента Требуются права полного администратора
Настройка плагина заключается в добавлении кнопки "Линза" в панель инструментов редактора "Atto". Это может сделать технический администратор системы.
Для настройки панели инструментов редактора необходимо перейти:
Блок "Настройки" -► "Администрирование" -► "Плагины" -► "Текстовые редакторы" -► "Html-редактор Atto" -► "Настройки панели инстументов редактора Atto".
На странице настроек нужно добавить название плагина "otmagnifier" (Линза) в форму "Конфигурация панели инструментов" в место, где предполагается размещение кнопки инструмента "Линза".
Например, можно добавить его между инструментами "image" (Вставить изображение) и "media" ("Вставить файл аудио/видео"):
После сохранения результатов кнопка "Линза" должна добавиться в панель инструментов редактора в указанное место.
Чтобы включить открытие полноразмерного (с оригинальным разрешением) изображения в другой вкладке браузера по клику мыши, необходимо перейти с этой же страницы настроек из списка плагинов редактора к настройкам плагина "otmagnifier" - "Линза":
Рис. 6. Настройки линзы. Дополнительная разметка
На открывшейся странице нужно включить опцию с помощью "галочки".
После активации опции при редактирования контента и нажатии на кнопку "Линза" для выбранных изображений будет произведена дополнительная разметка (добавление класса "magnifier-handle-click" к тегу изображения). Данная разметка, во время просматривания контента пользователями, обеспечит открытие исходного изображения по клику, в дополнение к увеличению изображения при наведении. Наличием этого класса можно управлять вручную. Данная опция только позволяет по умолчанию добавлять класс автоматически.
Tags: atto, атто, внешний вид, редактор