Воскресенье, Март 01, 2015

Практически с самого начала существования сайта Joomlalessons.ru его основным инструментом создания материалов (кроме, конечно, визуального редактора), стали плагины Rokbox. Ни один урок не обходится без их помощи. Согласитесь, изучать уроки легко, потому что текст сопровождается иллюстрациями, не загромождающими весь экран и распыляющими внимание, а совсем маленькими и почти неприметными. Но по клику эти крошки увеличиваются до своего полного размера, появляясь на обозрение в элегантном popup-окошке. Я просто обожаю эти плагины и среди всех расширений от Rockettheme считаю их самыми лучшими. Хотя, наверное, это не совсем справедливо по отношению к другим, не менее замечательным расширениям клуба, используемых мною и даже уже частично описанных в уроках, например, о компоненте Roksprocket и плагине RokComments.

Первоначально плагины звались просто Rokbox. Это была их первая версия, ещё для Joomla 1.5. С появлением последующих версий Joomla плагины стали называться Rokbox2. Первая версия больше не поддерживается разработчиком, поэтому говорить сегодня будем о современном варианте.

Но сначала мы скачиваем абсолютно бесплатно пакет, в котором есть два плагина (контентный и системный) и одна кнопка для редактора. Устанавливаем пакет, как обычное расширение, через меню Расширения. Затем заходим в Менеджер плагинов и проверяем, опубликованы они или нет. При необходимости - опубликовываем. И приступаем к знакомству с принципами работы Rokbox2. С появлением кнопки в редакторе они упростилась до предела. Поэтому с кнопки и начнем.

Шаг 1. Открываем Менеджер материалов >>Создать новый материал. В текстовом поле редактора щелкаем мышкой и после этого нажимаем на кнопку в нижней части редактора:

Кнопка открыла нам редактор, с помощью которого мы очень быстро вставим сейчас картинку в статью. Ниже я даю иллюстрацию редактора с обозначениями, смысл которых буду раскрывать по ходу. Итак, вот редактор плагина:


Иллюстрация 1

Шаг 1.1. Строчка под цифрой 1 предназначена для вставки ссылки на тот объект, который мы хотим открыть в popup-окне. В этом шаге мы вставляем картинку. Поэтому жмём на кнопку в правой части строки. Она откроет нам Медиа менеджер (т.е. папку images). По тому же принципу вставки изображения в визуальном редакторе выбираем из всех папок нужную нам картинку и жмём на кнопку "Вставить". Это действие вернёт нас обратно, в редактор плагина.

Шаг 1.2. В строке 2 "Caption" делаем краткое описание изображения. Я для примера написала "Знакомимся с редактором Rokbox", и теперь эту фразу вы можете увидеть внизу Иллюстрации 1.

Шаг 1.3. Продолжаем работу: в строке 3 выбираем метод открытия popup-окна. У нас есть два варианта: либо "Text", либо "Thumbnail" (т.е. уменьшенное копия основного изображения). Сейчас мы выберем первый вариант, т.е. Текст. Кнопка с этим вариантом уже подсвечена, нам остаётся прописать какое-нибудь слово или фразу, которые будут являться ссылкой на открытие popup. Для примера я написала так: "Я - Боня. Аляскинский маламут".

Шаг 1.4. Теперь всё готово для того, чтобы перейти к вставке картинки в статью.  Для этого жмём на кнопку 4 "Insert and Close". Окно редактора плагина после этого закроется, а в поле визуального редактора появится ссылка. С ней можно поработать дополнительно, например, шрифт сделать жирным и увеличить его размер. Затем надо сохранить дать статье заголовок, определить категорию  и сохранить через кнопку "Сохранить". Открыв статью в лицевой панели, мы сможем посмотреть результат предыдущих шагов. У меня получилось вот так:

Я - Боня. Аляскинский маламут.

 
Шаг 1.5. А теперь вставим изображение вторым вариантом, т.е. через картинку предпросмотра. Для этого повторяем шаги 1.1 и 1.2 , а в шаге 1.3. выбираем кнопку "Thumbnail". Далее - шаг 1.4. У меня получилось вот так:


Иллюстрация 2

Примечание: в визуальном редакторе изображение предпросмотра не появится. Вместо него подсветится крохотная - всего в один значок! - ссылка. Постарайтесь её не потерять. Мне-то проще, я везде под картиночками должна ставить слово "Иллюстрация №", поэтому "потерь" не бывает.

Шаг 1.6. Сначала теория: В шаге 1.5 мы просто включили кнопку "Thumbnail", и плагин в автоматическом режиме создал из большого изображения маленькую копию. Эта копия легла в ту же папку, где находится и большое изображение. Размер копии прописан в контентном плагине Rokbox и по умолчанию составляет 150х100 px. Его можно менять. Но можно сделать и свои "зумбики", как я их называю. При этом размер у них может быть любым, главное, чтобы назывался зумбик в точном соответствии с названием большой картинки. Запомните, как надо писать правильно: image_thumb.jpg.

К примеру, на Иллюстрации 2 моя большая картинка называется IMG_4.jpg, а автоматическая копия - IMG_4_thumb.jpg

Но есть ещё вариант вставки изображения через картинку предпросмотра: в строке 1 редактора  (см. Иллюстрацию 1) выбираем большую картинку, а в качестве зумбика к ней в строке 3 выбираем совсем другое изображение. Принцип выбора в строке 3 точно такой же, как и в строке 1.  Например,  я сделала зумбик image_thumb.jpg и выбрала его в качестве картинки предпросмотра для большой картинки с названием IMG_2.jpg . Смотрите, что получилось:


Иллюстрация 3

Как вставить изображение в статью при помощи кнопки редактора плагина Rokbox - это вы теперь знаете. Давайте попробуем вставить в статью какой-нибудь медиафайл. Плагинами Rokbox поддерживаются не только изображения в разных форматах (base64 encoded, jpg, gif, png, bmp, webp), но и дополнительно:
   
HTML5 Video и Audio
    TwitPic
    Instagram
    YouTube
    Vimeo
    Metacafe
    Dailymotion
    Spotify
    Google Maps.

Шаг 2. Три примера:

2.1.  Вставка видео с Youtube: находим нужное видео, копируем в браузере полную ссылку на него и эту ссылку вставляем в строку 1. Далее повторяем шаги 1.2 - 1.4.  Я нашла поучительно-смешное видео, вставила его в Rokbox и предлагаю посмотреть его прямо сейчас ! 

2.2.  С помощью Rokbox мы можем показать страницу другого сайта. Вывод на popup может осуществляться как через текстовую ссылку, так и через картинку предпросмотра. Принцип создания ссылки тот же, что и в шаге 2.1.

2.2.1. Текстовая ссылка на мой сайт о Павловске, Главная страница которого открывается вместе с роскошнейшим медиаплэйером и замечательным  романсом "Всё мне видится Павловск холмистый ..." на стихи Анны Ахматовой в исполнении композитора, певицы и моей подруги Златы Раздолиной.

 2.2.2. Ссылка через картинку на  страницу сайта о Павловском парке. Здесь я применила ещё один приём: сначала вставила в статью картинку, окружила её <div>-ами (чтобы она не расползалась на разных мониторах), затем активировала картинку и только после этого нажала на кнопку редактора Rokbox, вставила ссылку и сохранила вставку. Вот, пожалуйте в парк послушать соловьев:

image


2.3.
А вот так можно вставить  Google Maps. Пример я взяла у разработчика, но настроена по такой же схеме показать на карте не американскую статую свободы, а наш Эрмитаж.

Вот, пожалуй, и всё основное в Rokbox, чем я пользуюсь ежедневно при создании новых материалов. Разработчик в документации на плагины предлагает дополнительные варианты, но они не произвели на меня никакого впечатления, да и в работе мне не нужны. Но желающие познакомиться с плагинами Rokbox поближе, могут это сделать самостоятельно. Вся документация по плагинам находится на странице http://www.rockettheme.com/docs/joomla/extensions/rokbox .

 

Комментировать материал через:

  • Joomlalessons.ru
  • Вконтакте

Поделиться: