• Joomla
• php
• Администрирование
• JCE

Image Manager Extended (Расширенный менеджер изображений) – это плагин визуального редактора JCE CMS Joomla 2.5/3.x для загрузки, управления, редактирования и вставки изображений в Joomla! Он он наиболее удобен для созания эффекта всплывающих окон "lightbox" на страницах сайта. Плагин Image Manager Extended существенно сэкономит Вам время и с его помощью Вы сможете многое. Плагин имеет встроенный редактор изображений, во время загрузки изображений может создавать мини-картинки и картинки для текста с установленными Вами размерами и т.д.

• Загружать изображения и изменять размер их при загрузке
• Создавать папки
• Переименовать, вырезать, копировать, вставлять и удалять папки и изображения
• Создавать и удалять изображения-миниатюры
• Создавать альтернативные изображения "Rollover Image"
• Редактировать изображения в редакторе изображений
• Создать всплывающие окна с изображениями, галереями и подсказками
• Вставлять изображения в статьи

Сразу хочу Вас предупредить, что данный плагин платный (на официальном сайте для скачивания требует платной подписки). Скачать плагин можно на официальном сайте JCE. Устанавливается плагин через панель управления редактора JCE.

После установки в панели инструментов редактора JCE видим новую кнопку "Вставить/изменить изображение":

После нажатия по кнопке плагина в редакторе JCE открывается модальное окно:

Как видите, первоначально Image Manager Extended почти не отличается от стандартного менеджера изображений JCE. В правой нижней части окна расположена панель инструментов с помощью, которой можно переименовать, вырезать, копировать, вставлять и удалять папки и изображения . Но присмотритесь внимательней и вы увидите вверху дополнительную вкладку "Всплывающие окна", а справа внизу кнопки "Редактировать изображение" и "Создать эскиз". По сути, Image Manager Extended – это мини редактор изображений.
В нижней половине "Расширенного менеджера изображений" расположен браузер файлов. В крайней левой колонке, по умолчанию, располагается содержимое директории "Images" в корне вашего сайта. Кликнув по одной из папок директории, в средней колонке откроется  список файлов изображений. Достаточно кликнуть по файлу изображения, как справа появится его превью,а в нужные строки автоматически вставится путь до изображения и его размеры.

Image Manager Extended - Создание миниатюр изображений

Чтобы создать миниатюру или эскиз изображения (версия изображения в уменьшенном размере), используя интерактивный интерфейс для настройки размеров (ширина и высота) и площадь (часть изображения) эскиза, нажмите кнопку  Откроется окно редактора миниатюр "Создать эскиз"

Ширину и высоту эскиза можно задать во вкладке "Properties" (Свойства) в диалоговом окне. Изменение существующих значений будут отражены в мини-изображении во вкладке "Preview"(Просмотр) (максимум до 200px х 150px - предел области предварительного просмотра, но это не значит, что миниатюры не могут иметь большие размеры).
По умолчанию значения ширины и высоты связаны между собой пропорционально, т.е. при изменении одного значения (ширины или высоты) будет рассчитываться и устанавливаться пропорциональное значение другого значения. Если вы хотите отключить пропорциональную зависимость между шириной и высотой изображения нажмите на значок цепи.
Качество сохраняемой картинки может быть установлено с помощью перетаскивания ползунка. Эта величина устанавливает уровень сжатия JPEG при сохранении миниатюры.
При желании, в качестве миниатюры вы можете сохранить не всё изображение, а его любую часть. Область миниатюры отображается на изображении в более светлых тонах.

Вы можете изменить размер миниатюры, перетаскивая любой из углов изображения. Вы также можете перемещать полностью окно с миниатюркой, просто его перетаскивая. Во вкладке "Просмотр" будет отображаться конечный результат миниатюры. После того, как вы нажмите кнопку "Сохранить", уменьшенное изображение будет по умолчанию помещено в папку миниатюр "thumbnails". При этом миниатюра будет иметь тоже название, что и исходное изображение только спрефиксом thumb_.

Image Manager Extended - загрузка изображений

Для загрузки изображений с локального компьютера на ваш сайт используется значок "Загрузить" По нажатию кнопки "Загрузить" открывается "Диспетчер загрузки изображений", который включает в себя опции для изменения размера и миниатюр при загрузке изображений.

Для того, чтобы загрузить файл нажмите кнопку "Browse" (Обзор) и найдите нужный файл  или файлы с изображениями на вашем компьютере. Несколько файлов можно выделить одновременно делая выбор из списка курсором при нажатой клавише "Ctrl". Кроме того, файлы с изображениями можно просто перетащить из вашего  локального компьютера в диалоговое окно загрузки.

Файлы будут добавлены в порядке очереди.

Вы можете изменить имя файла, нажав на сам файл или нажав на кнопку "Переименовать" справа от имени файла. Имя файла может содержать только латинские символы AZ, az, арабские цифры 0-9, символ подчеркивания (_) и тире (-). Пробелы преобразуются в символы подчеркивания, все остальные символы будут удалены. Вы можете удалить файл из списка, нажав на кнопку "Удалить"
Для изменения размера загружаемого изображения, что очень удобно, поставьте галочку в  чекбоксе "Размер" и установите необходимое значения ширины и высоты. Так как определяющим  размером на сайте является ширина, укажите ее значение, а высота будет установлена пропорционально, если не отключена эта опция (звено цепи)
Чтобы создать миниатюру изображения при загрузке поставьте галочку в чекбоксе "Эскиз изображения" и установите необходимые значения ширины и высоты. Кликните "Crop To Fit"  (Подогнать и обрезать), чтобы миниатюра соответствовала заданным размерам. Нажмите кнопку "Загрузить" и, как только загрузка будет завершена, диалоговое окно закроется автоматически.
Таким образом, Вы можете одновременно загрузить несколько изображений в выбранную папку или только, что созданную новую папку с помощью кнопки . Изображения, ширина которых не превышает установленную вами в поле "Размер", загрузятся без изменений, а изображения, ширина которых превышала установленную, будут загружаться с заданной вами величиной.
Одновременно, во время загрузки изображений, будут созданы для каждого изображения  соответствующие миниатюры с заданной вами шириной в поле "Эскиз изображения" (если поставлена галочка в чекбоксе слева). После того, как вы нажмите кнопку "Загрузить",  миниатюры изображений будут по умолчанию
помещены в созданную автоматически папку миниатюр "thumbnails", которая в свою очередь будет помещена в папку с основными изображениями. При этом, миниатюры будут иметь тоже название, что и исходные изображения только с префиксом "thumb_".
Кстати, если Вы обратили внимание, то по умолчанию ширина загружаемого изображения выставлена 640рх, а эскиза изображения – 120рх. Если Вы хотите выставить по умолчанию другие значения, то проделайте следующее. В административной панели выберите Компоненты – Редактор JCE – Профили редактора. Здесь выберите редактировать профиль Default. Во вкладке "Параметры плагина" найдите в левом столбце "Расширенный менеджер изображений".

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

Создание альтернативного изображения "Rollover Image" (Вкладка "Альтернатива")

При нажатии на вкладку "Альтернатива" откроется диалоговое окно

"Курсор мыши +" - это изображение отображается, когда курсор мыши находится над изображением.
"Курсор мыши -" - это изображение отображается, когда курсор мыши перемещается от изображения. Как правило, это изображение по умолчанию.
Таким образом, Rollover Image – это смена изображения при наведении на него курсора мыши. Вот пример:

Для того, чтобы создать ролловер-изображение необходимо:

1. Откройте вкладку "Изображение" и в браузере файлов выберите изображение, которое должно быть изображением по умолчанию, то есть которое будет отображаться в поле "Курсор мыши –".
2. Кликните по выбранному файлу с изображением и в поле "Курсор мыши –" автоматически отобразится путь к выбранному изображению.
3. Откройте вкладку "Альтернатива"
4. Кликните по полю "Курсор мыши+"  и браузере файлов выберите изображение, которое должно появляться при наведении курсора мыши на изображение.
5. Кликните по выбранному файлу с изображением и в поле "Курсор мыши+" автоматически отобразится путь к выбранному изображению.
6. Нажмите кнопку "Вставить".

Чтобы удалить альтернативное изображение, удалите содержимое поля "Курсор мыши+" (при наведении курсора мыши) на вкладке "Альтернатива".

Вкладка "Расширенные".

Стиль – список встроенных свойств CSS применяемых к элементу. Это поле будет заполнено стилями, установленными в вкладке "Изображения" (margin; border; float и т.д.).
Список классов - список CSS- классов из вашего шаблона Joomla, которые могут быть применены к изображению.
Классы – разделенный пробелами список CSS- классов, которые должны применяться к изображению.
Название – текст, отображаемый в всплывающей подсказке, когда мышь находится над изображением. Используется в качестве описания изображения.
Id - уникальный идентификатор для данного изображения.
Направление - направление текста элемента.
Код языка - код языка элемента, например: ru-RU
Карта изображения  - Id связанного изображения карты, например: # Map
Длинное описание - URL к HTML или текстовому документу, содержащему подробное описание изображения. Можно выбрать URL, используя файловый браузер "Обзор" справа от текстового поля.

Создание всплывающих изображений "лайтбокс"

Плагин Image Manager Extended позволяет без особых усилий создать "лайтбокс" - всплывающие изображения для вашего сайта всего за несколько кликов!
Предполагается, что у вас  либо установлен и опубликован плагин JCE MediaBox или какой-либо другой плагин, расширение или шаблон, который имеет RokBox или WidgetKit Lightbox.

Рассмотрим 3 способа создания всплывающих окон с помощью плагина Image Manager Extended:

• Создание всплывающего окна для изображения, которое имеет миниатюру (эскиз).  Этот метод предполагает, что у изображения, которое будет использоваться в качестве основного всплывающего изображения уже есть эскиз в папке с миниатюрами, либо эскиз будет создан в процессе загрузки изображений.
• Создание всплывающего окна для изображения, у которого нет соответствующей миниатюры. После выбора всплывающего изображения, миниатюра для него создаётся с помощью строенного в плагине редактора эскизов.
• Создание всплывающего окна для изображения с помощью альтернативной миниатюры. В качестве эскиза вы можете использовать другое изображение (это может быть любое изображение из любой папки).

Создание всплывающего окна для изображения, которое имеет соответствующий эскиз

Как указано выше, этот метод предполагает, что эскиз (миниатюра) для основного изображения уже существует. Для того, чтобы узнать существует ли эскиз (миниатюра) для основного изображения, выделите его в браузере файлов и обратите внимание на нижнюю кнопку в панели инструментов справа. Если на кнопке  "Создать эскиз" появился значок "Удалить эскиз", значить такая миниатюра существует и расположена она в папке "thumbnails" (эскизы) в том же каталоге, что и изображение.

Теперь можно приступить к созданию всплывающего изображения.
1. Перейдите во вкладку "Всплывающие окна".
2. Выберите тип всплывающих окон "JCE MediaBox Popups".

3. Выберите изображение, которое будет использоваться в качестве всплывающего изображения, нажав на его имя в Браузере файлов. Появится диалоговое окно с сообщением: "Использовать связанную миниатюру для раскрывающейся ссылки?" Нажмите "Да".

4. В поле "Ссылка" закладки "Всплывающие окна" будет указан  URL к всплывающему изображению, а соответствующие поля на вкладке "Изображение" будут заполнены значениями изображения эскиза.
5. Вы можете добавить название и заголовок всплывающего окна.

6. Размеры всплывающего окна вы можете посмотреть в "превьюшке" изображения, при необходимости эти размеры можно поменять в поле "Размеры". Нажмите кнопку "Вставить" и обновите страницу сайта.

7. Чтобы создать галерею изображений в всплывающем окне нужно назначить каждому всплывающему изображению одно и тоже значение группы. Например: gruppa.

Группа   используется для того, чтобы связать изображения всплывающих окон, тем самым создавая всплывающую галерею, где посетитель может переходить от одного изображения к другому внутри одного всплывающего окна. Чтобы использовать эту функцию, все изображения галереи должны находиться на той же странице (или контенте) и иметь одну и ту же группу.
Пример галереи можно посмотреть здесь

Создание всплывающего окна для изображения, которое не имеет миниатюру

В браузере файлов выберите изображение, которое будет использоваться во всплывающем окне.
Нажмите кнопку "Создать миниатюру", чтобы открыть редактор эскизов.

В появившемся диалоговом окне "Редактора эскизов" выберите нужные значения создаваемой миниатюры. Можно оставить значения по умолчанию. Нажмите кнопку "Сохранить".

Выполните шаги с 1 по 7 изложенные в первом варианте создания всплывающих окон.

Создание всплывающего окна, используя альтернативное миниатюрное изображение

Этого метод создания всплывающего изображения существенно отличается от двух вышеупомянутых. В этом варианте нам нужно вручную указать и всплывающее изображение и изображение, которое будет выполнять роль миниатюры.
1.Откройте вкладку "Изображение" и нажмите на название изображения, которое будет выполнять роль миниатюры. Миниатюра- это изображение, которое изначально загружается на странице веб-сайта и после нажатия  по которому появляется всплывающее окно.
2.Откройте вкладку "Выпадающие окна".
3.Выберите тип всплывающих окон  "JCE MediaBox".
4.Как и вышеуказанных вариантах создания всплывающих окон, если это изображение имеет связанную миниатюру, вам будет предложено, хотите ли вы использовать этот эскиз. Нажмите "Нет".

5.В браузере файлов нажмите на название изображения, которое должно быть всплывающим , то есть изображением, которое будет появляться во всплывающем окне. Укажите параметры всплывающего изображения и нажмите кнопку "Вставить".

Подводя итог, хочу сказать, что плагин JCE Image Manager Extended является  лучшим решением для создания всплывающих изображений.
Данный плагин позволяет создавать всплывающие изображения с минимальными затратами времени.
Очень удобной оказалась функция загрузки изображений, позволяющая одновременно загружать основные изображения нужных размеров и создавать их мини-изображения, существенно экономя ваше время.