Печать

Советы 4: Плагин для изображений JoomSlide 1.41

Рейтинг:   / 0
ПлохоОтлично 

Продолжаем разговор о вставке изображений в сайт на Joomla. Точнее, о способе их представления в опубликованных материалах. Плагин JoomSlide 1.41 позволяет наиболее эффективно решить эту проблему. Как он работает, вы уже наверняка представляете, если читали "Советы 3", если еще нет, щелкните по миниатюре любого изображения в любой публикации - поймете сразу. Скачать этот плагин на просторах интернета можно, только основательно погуглив, поэтому я выкладываю его здесь.

Распаковываем архив в папку, папку бросаем по ftp в папку tmp вашего сайта. Если вы недавно что-то устанавливали подобным способом на свой сайт, то папки со старыми установочными файлами из этой директории лучше удалить. Короче, перед инсталляцией плагина в tmp должны находитья файл index.html и папка с распакованным архивом плагина.

Установка


Временно (!) меняем права на следующие папки своего сайта:

  • /plugins/content/ - 777 только на эту папку, на содержимое не надо (при установке папка с плагином будет записываться именно в этот каталог, поэтому и ставим на него 777, т.е. разрешаем в него запись)
  • /language - 777 по той же причине
  • /administrator/language/ - 777

Устанавливаем плагин. Кто забыл, как, читаем здесь.

Настройка


У этого плагина более 60 пунктов настроек да еще и на английском языке. Но не спешите пугаться, на скриншоте изображены все настройки, к которым нужно привести свой плагин. Остальные можно оставить без изменения. Если забыли, как настраиваются плагины, напоминаю: "Расширения" - "Плагины" - в списке выбираем нужный, в нашем случае - "JoomSlide 1.41". Увидите окно настроек и выставьте первые 13 как на изображении.

Действия после установки


Идем в корень своего сайта и возвращаем права на те папки, что участвовали в установке плагина, а именно 755.

Кроме того, нужно перейти в папку /images и поставить права 777 на папку _thumbs. В эту папку плагин будет записывать миниатюры всех вставляемых вами в материалы изображений. Если права на эту папку будут другими, то вместо миниатюр изображений в статьях у вас будут отображаться только маленькие серые прямоугольнички, однако по щелчку на которые ваши изображения все же будут открываться.

Как работает


Теперь вам остается только вставить в текст материала нужное изображение или несколько изображений уже известным вам способом (читай "Советы 3"). И больше ничего делать не надо. Не нужно изменять размеров рисунка, выставлять ему рамку и положение и т.п. - плагин все сделает за вас. Плагин можно перенастроить под себя, не забываем, сколько в нем настроек! Скажете, там все на английском? Не беда, пару десятков слов можно и выучить, тем более, что в интернете полно переводчиков. Лично я знаю не более 200-300 слов и это позволяет с легкостью разбираться с английскими интерфейсами. А значения полей настроек интуитивно понятны после перевода.

Теперь ваши изображения будут эффектно появляться перед пользователем вашего сайта, если, конечно, он догадается щелкнуть курсором по любой из их миниатюр. Когда изображение раскрывается, оно имеет панель управления показом, которая появляется, когда курсор наведен на изображение. Там все интуитивно понятно: стрелки - это кнопки перехода вперед - назад по списку изображений (если их в материале несколько). Есть там еще кнопка слайд-шоу. И кнопка выхода из показа в виде креста.

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

Подключение класса .Joomslide в стили шаблона сайта


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

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

Действия

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

Теперь нам нужно только ввести в файлы шаблона сайта этот класс, а потом, в процессе вставки изображения, применять этот класс к вставленному изображению. Чтобы не прописывать всякий раз этот класс вручную, нужно добавить его в кнопку "Стиль" вашего текстового  WYSIWYG редактора.

Но обо всем по порядку.

Сначала идем в менеджер шаблонов и открываем  ваш текущий шаблон на редактирование. Жмем кнопку "Редактировать CSS". В открывшемся списке файлов, отвечающих за стилевое оформление вашего сайта, находим файл template.css и открываем его на редактирование. Идем в самый конец кода и впечатываем после последней записи следующее: .Joomslide {border: 0; float:left; margin-right:10px;}

Сохраняемся.

Делаем то же самое с файлом editor.css

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

Идем в менеджер материалов, создаем новый материал, вставляем в него изображение, уменьшаем его размер, если оно слишком большое, выделяем его, щелкаем по кнопке "Стиль" текстового редактора, выбираем стиль .joomslide

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