05-1(2*) Менеджер изображений редактора JCE Pro.

Для редактирования содержимого Материала в CMS Joomla используется так называемый ВИЗУАЛЬНЫЙ редактор WYSIWYG (What You See Is What You Get - что видишь, то и получишь) предоставляющий пользователю в том числе и возможность работы с изображениями.

На своих проектах я предпочитаю устанавливать визуальный редактор «JCE» или «Joomla Content Editor». Этот компонент сторонних разработчиков, не входящий в стандартный пакет Joomla включает в себя Менеджер изображений значительно превосходящий по возможностям стандартный функционал CMS Joomla.

Редактор «JCE» предлагается разработчиком в двух вариантах «JCE Core» (бесплатный) и «JCE Pro» (платный). Варианты имеют различные возможности. О Менеджере изображений редактора «JCE Core» написана статья «05-1-2 Менеджер изображений редактора JCE Core».

В этом материале речь пойдет о возможностях работы с изображениями при помощи Расширенного менеджера изображений редактора «JCE Pro». Если Вы действительно хотите иметь в своем распоряжении мощный браузер изображений, с возможностью изменения размеров, обрезки изображений или нанесения водяных знаков следует воспользоваться именно версией «Редактор JCE Pro».

Дело в том, что в платную версию редактора «JCE» входят три отдельных составляющих «Расширенный менеджер изображений», «Менеджер файлов» и «Менеджер видеофайлов»

Запускаем расширенный менеджер изображений JCE Pro.

Начнем с возможностей предоставляемых Расширенным менеджером изображений редактора «JCE Pro». Иконка Расширенного менеджера изображений имеет вид  . После нажатия откроется новое окно:

Окно имеет отличия от стандартного Менеджера изображений «JCE Core» отражающие его дополнительные (расширенные) возможности для работы с изображениями. Разумеется сюда включены все стандартные возможности описанные ранее, а так же дополнительные, на экране они помечены цифрами 1,2,3,4,5,6.

1. Вкладка ВСПЛЫВАЮЩИЕ ОКНА

На вкладке (1) Всплывающие окна расширенного менеджера изображений редактора JCE Pro настраивается возможность открытия изображения во всплывающем (модальном) окне по клику на его уменьшенную копию на странице сайта.

На вкладке много настроек, отмечу несколько наиболее важных

«Тип всплывающего окна» - выбор типа всплывающего окна из списка. С редактором JCE как правило используется тип «JCE MediaBox Popups». Его функционал (внешний вид и прочее) обеспечивается одноименным плагином, который должен быть установлен, активирован и настроен.

«Ссылка» - ссылка на изображение, которое должно быть открыто во всплывающем окне. Заполняется выбором файла изображения из списка в средней части браузера изображений. Таким образом подразумевается что во всплывающем окне может быть открыто любое изображение, находящееся на сайте.

«Название» - текст обеспечивающий подпись для всплывающего изображения.

«Заголовок» - дополнительный текст для всплывающего изображения.

«Группа» - возможность просмотра нескольких изображений, находящихся на странице в виде слайдера. Для создания группы нужно присвоить в этом поле одинаковый индекс для нужных изображений. Достаточно указать например цифру «1» для нескольких нужных фотографий, а «2» для группы других.

2. Вкладка RESPONSIVE

На вкладке (2) Responsive окна расширенного менеджера изображений редактора JCE настраивается возможность вывода изображений с учетом размеров экранов мобильных устройств. Так называемый «отзывчивый» или «адаптивный» способ вывода изображений.

Так как изображения в отличии от текста не возможно «сжать» при просмотре на экранах малого размера, для нормального просмотра необходимо применять дополнительные средства обработки изображений.

Одним из таких средств является вывод изображений разного размера, соответствующих экранам разного размера. Именно эта возможность реализовано на вкладке Responsive (поле W).

Кроме этого, на вкладке Responsive реализована возможность вывести изображение большего разрешения для мониторов обладающих функцией Retina Display (поле X).

3. Дополнительное представление списка изображений

В среднем окне браузера изображений (3) появилась дополнительная иконка для включения возможности просматривать изображения не только списком, но и в виде небольших превью (сеткой, плиткой…)

4. Создание уменьшенных копий (preview, thumbnail) изображений

В правом окне браузера изображений (4) присутствует дополнительная иконка, включающая возможность создавать уменьшенные копии (preview, thumbnail) изображений.

Дело в том что изменение размера изображения для вывода на страницу (Вкладка ИЗОБРАЖЕНИЕ - «Размеры») изменяет только видимый на странице размер изображения. А создав уменьшенные копии (preview, thumbnail) изображений, на страницы сайта можно выводить именно их. А полноразмерное изображение открывать только по щелчку мыши во всплывающем окне. Это может значительно ускорить загрузку страницы, особенно при большом количестве изображений.

5. Редактор изображений на сервере.

Так же в правом окне браузера изображений (5) появилась новая иконка позволяющая запустить полноценный Редактор изображений.

В редакторе изображений «JCE Pro» можно изменить для любого находящегося на сервере изображения размер (resize), обрезать его часть (crop), повернуть (rotate). На вкладке Effects доступны такие возможности как изменение яркости, контрастности и ряд других.

6. Обработка перед загрузкой изображений на сервер.

В Расширенном менеджере изображений «JCE Pro» появляется возможность предварительной обработки изображений перед их загрузкой.

• Можно изменить размеры загружаемых изображений, задав их по умолчанию для всех изображений или для каждого загружаемого по отдельности.
• Можно создать уменьшенные копии (preview, thumbnail) изображений при загрузке.
• Используя иконку (+) и поле Suffix можно создать сразу несколько копий загружаемого изображения с целью получения «отзывчивого» или «адаптивного» способ вывода изображений (вкладка Responsive).
• Можно наносить водяной знак (watermark) на изображения при загрузке. Текст или файл изображения для водяного знака должен быть настроен предварительно.

Таковы основные отличия Расширенного менеджера для работы с изображениями редактора JCE Pro. В других материалах сайта будет рассказано об особенностях работы с «Менеджером файлов» и «Менеджером видеофайлов».