Вы наверно обратили внимание на то, что на нашем сайте использовано расширение, которое позволяет выводить изображения с мини эскизом. Проще говоря, определенный графический файл транслируется на сайте с фиксированным размером (по ширине), при клике на такую картинку она увеличивается до размеров экрана, а при желании и до исходного размера. Мне неоднократно задавался вопрос: а что же за расширение использовано у вас на Ячайнике? Сегодня пришло время рассказать про этот замечательный во всех отношениях мамбот, который носит недвусмысленное имя «изображение с мини эскизом», также он известен под названием HSIMAGE. Я бы хотел вкратце рассмотреть возможности данного плагина, а также заострить внимание на некоторых нюансах работы с ним.

Хочу отметить, что на нашем сайте используется далеко не самая последняя версия данного расширения. Второй момент — данный мамбот не работает с версиями Joomla 1.5.XXX . Впрочем, последнее недоразумение возможно и будет исправлено автором впоследствии.

В рамках данной статьи мы с вами рассмотрим одну из последних версий плагина, однако справедливости ради, на сервере Ячайника я выложил для скачивания две версии: Мамбот HSImage (изображение с мини эскизом) - версия 1.0.3и Мамбот HSImage (изображение с мини эскизом) - версия 1.1.2.3 . Первая — более ранняя, но и более стабильная. Вторая (именно ее мы сегодня и изучим) обладает расширенным набором функций и позволяет на сайте осуществлять самые настоящие чудеса с графикой.

Чтобы вы получили наглядное представление о возможностях мамбота, я хотел бы чтобы вы заглянули на этот сайт - http://www.fotonix.ru/

Обратите внимание на нижнюю часть экрана. Мы видим несколько изображений. Ширина каждого из них - 100 пикселей. При клике по картинке, она увеличивается до исходного размера. При этом часть экрана, которая не является изображением затемняется. Следует отметить, что данный эффект используется в модуле. Хотя в более старых версиях расширения такое было возможно только в теле статьи.

Теперь о самом главном. Как добиться вышеописанного эффекта?

Еще раз напомнинаю, что нам предстоит работа с версией hsimage_v.1.1.2.3, скачать которую можно здесь.

После скачивания и установки, выбираем в главном меню пункт Мамботы — Мамботы Сайта и кликаем по нему.

Нашему вниманию откроется список установленных в системе мамботов. Находим плагин под названием «Изображение с мини эскизом» и кликаем по названию мамбота.

Мы попадаем на страницу настроек данного плагина.

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

Вариант 1. Вставляем изображения тегами HSIMAGE

В данном случае действия будут очень напоминать работу с тегом mosimage. Если вы слышите это слово впервые, то сейчас самое время прочитать статью, опубликованную на нашем сайте аж несколько месяце назад. Статья называется «Руководство по Joomla. Как вставить картинку?» .

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

Следует учитывать, что менять параметры можно и на вкладке «Картинки» , однако приоритет при формировании HTML отдается прописным параметрам. То есть тем параметрам, что вы впишете в тело тега. Но об этом читаем ниже.

Однако, хватит демагогии. Предлагаю приступить непосредственно к практике. У нас как нельзя кстати открыта страница с настройками мамбота. Первым делом обращаем внимание на текстовое поле «Размер эскиза». По умолчанию там стоит значение 100. Это означает что все изображения вставленные с помощью тега hsimage будут первоначально отображаться с шириной в 100 пикселей. Если вас устраивает такое значение, то оставляем данное текстовое поле неизменным. При необходимости меняем параметр на требуемый.

Обращаем внимание на левую часть страницы и включаем мамбот в рабочее состояние, путем нажатия напротив надписи «Включен» в положение «Да».

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

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

Рассмотрим статью, где 3 рисунка вставлены с помощью нашего мамбота. Обратите внимание на рисунок:

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

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

Hsimage — это собственно название тега, которое указывает, что в данном месте статьи вставляется мамбот «Изображение с мини эскизом».

Далее идет название изображения. Оно будет отображаться при увеличении картинки в нижней части всплывающего окна.
Center -здесь мы указываем мамботу, что наше изображение будет выравниваться по центру страницы. Следует заметить, что данный параметр может принимать значения «left» и «right» - выравнивание по левому и правому краю соответственно.

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

В таком случае конструкция тега будет выглядеть следующим образом:

Мы видим, что перед параметром выравнивания изображения появилось два значения. Первое — это ширина, а второе — высота нашего мини эскиза. Чтобы в нашей голове еще раз отложилась работа с тегом, я предлагаю озвучить его содержимое показанное на последнем рисунке.

Параметры указанные на рисунке внутри фигурных скобок сообщают системе, что в данном месте статьи будет выводиться с помощью мамбота «Изображение с мини эскизом» рисунок, под именем «Баня из оцилиндрованного бревна. Проект №2». Эскиз картинки будет выводиться с шириной и высотой равными 200 пикселей и выводиться он будет по центру экрана.

Напоследок я бы хотел напомнить, как добавляются изображения. Мы только что указали тегами в каких местах нужно выводить картинки. А теперь неплохо было бы указать джумле — а КАКИЕ картинки нужно выводить.

Для этого в верхней или боковой части редактора переключаемся на вкладку «Изображения» (в некоторых редакциях она может быть обозвана, как «картинки»). С помощью блока «Управление изображениями» мы находим нужные изображения. Перемещаться по подкаталогам можно с помощью выпадающего списка «Подпапка».

Хочу заметить, что блок «Управление изображениями» показывает файлы загруженные в каталог /images/stories/ и его подкаталоги. Поэтому все файлы с рисунками, которые вы планируете использовать в текущей статье должны быть заранее загружены в вышеуказанную папку.

Еще раз напоминаю, что работа с изображениями в данном случае будет очень похожа на вставку изображений с помощью тега mosimage

Второй вариант вставки «Изображения с мини эскизом» - перехват тега IMG

В начале статьи я показывал сайт http://www.fotonix.ru/ где изображения с мини эскизом вставлены в модуль.

Каким же образом это достигнуто? Ведь мы помним, что при редактировании модуля не появляется блок «Управление изображениями». Дело в том, что в последних версиях наш многоуважаемый мамбот позволяет перехватывать тегu IMG, то есть изображения вставленные самым обычным способом, с помощью кнопки «Вставить \ редактировать изображение» в редакторе joomlaFCK будут также отображаться в види мини эскизов, которые при клике по ним мышкой будут увеличиваться до исходного размера.

Чтобы включить перехват тега IMG , нам необходимо вернуться в настройки мамбота и включить параметр «Замена IMG» в положение «Да».

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

Однако существуют случаи, когда часть изображений необходимо не обрабатывать мамботом. В таком случае следует редактировать материал в режиме отображения HTML кода. Как это делается у нас написано в статье «Руководство по Joomla. Урок 6. Как изменить HTML код?»

Чтобы система управления контентом Joomla понимала, что данное изображение не нужно обрабатывать мамботом, в тело тега IMG мы должны добавить параметр rel="nohsimage" так, как показано на рисунке:

Если посмотреть на эту страницу - http://fotonix.ru/kompyuteryi/index.php , то видно что все изображения внутри статьи тегом не обрабатываются, хотя эскизы в нижнем модуле по прежнему функционируют благодаря мамботу «Изображение с мини эскизом».

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

С уважением, Гоша Компьютерный.