Налаштування плагіна BK-Multithumb

Дуже невелика кількість компонентів CMS «Joomla»має таку кількість налаштувань як плагін BK-Multithumb , який призначений для відображення на сайті фотографій та фотогалерей. Для «точних» налаштувань цього плагіна може знадобитись більше години. Тому, щоб трішки «полегшити вам життя», приведу в цій статті опис налаштувань плагіна BK-Multithumb, які використовуються на сайті allo-lissabon.com .

Роботу цього плагіна можна подивитись на цій сторінці сайту, клікнувши по будь-якій ілюстрації нижче по тексту.

Закладка «Плагін» - Налаштування плагіна BK-MultithumbОтже. Після стандартної інсталяції плагіна в CMS «Joomla»3.3.X розпочнемо його налаштування. Переходимо до адмінпанелі «Розширення/Плагіни». На сторінці, яка відкрилась, відкриваємо форму налаштувань плагіна «Multithumb». Далі, за порядком, виконуємо наступні дії:

  1. У формі повинна бути активна закладка «Плагін»(див. скріншот);
  2. Робимо плагін активним – встановлюємо прапорець у положення «Включено»;
  3. Вибираємо спосіб відображення фотографій у модальному вікні. Як видно на скріншоті, перемикач «Popup method»повинен бути встановлений у положення «iLoad»;
  4. Перемикач «Proportions»повинен бути встановлений у положення «Crop to fit (cut one side)» («Обрізати у відповідності (скоротити одну сторону)»).У цьому випадку, всі картинки, які буде обробляти плагін BK-Multithumb, будуть відображатись на сайті однакового розміру, згідно налаштувань плагіна. При цьому зображення однією стороною буде повністю поміщатись у мініатюру. Наприклад, на сайті allo-lissabon.com у статях всі мініатюри фотографій мають розмір 300х200 пікселів незалежно від реального розміру зображення. У фотогалереях 197х197 пікселів. Ви можете встановити параметри відображення мініатюр фотографій в залежності від дизайну вашого сайту;
  5. Переходимо на вкладку «Article thumb»як показано на скріншоті.

Вкладка «Article thumb» - Налаштування плагіна BK-MultithumbВкладка «Article thumb»плагіна BK-Multithumb відповідає за параметри відображення мініатюр фотографій (thumbnail) у статтях Jooml’и 3.3.Х.

  1. Вкладка «Article thumb»повинна бути активною;
  2. Параметр «Thumbnails for articles»вказує, як визначаються елементи, з якими буде працювати плагін. У даному випадку вказано, що мініатюри (thumbnail) будуть створюватись тільки для зображень певних класів («Enable for following CLASSES only»). Всі інші зображення будуть відображатись у матеріалах «як є», тобто, без мініатюр і у реальний розмір;
  3. Параметр «Categories of articles»вказує, у матеріалах яких категорій будуть оброблятись фотографії. Якщо не вибрано жодної категорії, то зображення будуть оброблятись плагіном у всіх категоріях матеріалів. Якщо вибрана хоча б одна категорія, то фотографії будуть оброблятись тільки у цій вибраній категорії або у кількох вибраних категоріях, якщо ви вказали у даному параметрі кілька категорій матеріалів;
  4. Параметр «Image classes»вказує, до яких класів фотографій буде застосовуватись плагін. У даному випадку, мініатюри будуть створюватись тільки для фотографій класів «img_left»та «img_right». Вертикальна риска служить селектором для зазначення переліку всіх класів зображень, з якими буде працювати плагін;
  5. Якщо задати параметру «Use article image size»значенння «Так», то всі без виключення фотографії будуть відображатись на сторінках сайту у натуральну величину. Відповідно цей параметр повинен мати значення «Ні»;
  6. Параметр «Thumbs size»визначає розмір мініатюр, які буде розміщено у матеріалах сайту. У даному випадку мініатюри будуть відображатись з розміром 300 пікселів у ширину та 200 пікселів у висоту. Значення ширини і висоти без пропусків розділяються прописною латинською літерою «x».

Вкладка «Blog thumb parameters» - Налаштування плагіна BK-MultithumbВкладка «Blog thumb parameters»плагіна BK-Multithumb відповідає за параметри зображень у блогах CMS Joomla.

  1. Активна вкладка плагіна Multithumb «Blog thumb parameters»;
  2. Аналогічно з відповідним параметром вкладки «Article thumb»;
  3. Аналогічно з відповідним параметром вкладки «Article thumb»;
  4. Аналогічно з відповідним параметром вкладки «Article thumb»;
  5. Параметр «Blog mode»(режим блога) визначає, як буде вести себе мініатюра (thumbnail) першого зображення у матеріалі. У даному випадку, з параметром «Link to article», мініатюра (thumbnail) буде дублювати посилання «Детальніше…»;
  6. Параметр «Image tooltip»визначає, що буде відображатись у якості підказки при наведенні курсору на перше зображення статті;
  7. Аналогічно з відповідним параметром вкладки «Article thumb»;
  8. Аналогічно з відповідним параметром вкладки «Article thumb».

Вкладка «Border parameters» - Налаштування плагіна BK-MultithumbВкладка «Border parameters»плагіна BK-Multithumb відповідає за параметри відображення рамок у мініатюрах.

  1. Вкладка «Border parameters»повинна бути активна;
  2. Параметр «Border style»повинен мати значення «Preserve». У цьому випадку рамки у мініатюрах відображатись не будуть. Всі інші значення цього параметра будуть застосовуватись до всіх без виключення (!)зображень на сайті.

Вкладка «Caption parameters» - Налаштування плагіна BK-MultithumbВкладка «Caption parameters»визначає, чи будуть відображатись заголовки у мініатюрах чи ні.

  1. Вкладка «Caption parameters»повинна бути активна (див. скріншот);
  2. Параметр «Caption»у даному випадку має значення «Disable»(«Виключено»). Рекомендую у такому положенні його і залишити;
  3. Якщо все ж параметр «Caption»включений, тоді параметр «Caption from»визначає, звідки плагін BK-Multithumb буде отримувати дані для заголовка.

Вкладка «Grouping parameters» - Налаштування плагіна BK-MultithumbВкладка «Grouping parameters»визначає як будуть об'єднуватись фотографії для слайдшоу.

  1. Вкладка «Grouping parameters»повинна бути активна;
  2. Параметр «Group images»визначає, як будуть об'єднуватись зображення: «Всі зображення у статті/матеріалі», «Всі зображення на сторінці», «За атрибутом Alt». У нашому випадку, об'єднуються всі фотографії у матеріалі;
  3. Параметр «Group Preview #»визначає, скільки мініатюр (thumbnail) будуть відображатись у слайдшоу. «0»– відображаються всі;
  4. Параметр «Gallery grouping»може мати два значення «As above», «Separately». Якщо включено перший – «As above», у группу будуть включені всі фотографії статті незалежно від класів. Якщо параметр «Gallery grouping»ає значення «Separately», то у группу будуть включені тільки фото тих класів, які вказані на вкладці «Article thumb»у параметрі «Image classes»;
  5. Параметр «Galery Preview #»визначає, скільки мініатюр фотографій (thumbnail) будуть відображатись у галереї. «0»– відображаються всі;

Якщо параметр «Galery Preview #»має значення відмінне від «0», тоді працюють наступні два параметра: «More images»і «More images text».

  1. Параметр «More images»визначає, показувати чи ні кнопку (посилання) на інші фотографії, які відносяться до групи, але не відображені на сторінці;
  2. Параметр « More images text»визначає, який текст буде відображатись на кнопці (посиланні) «More images».

Я недарма сказав на початку статті про те, що плагін BK-Multithumb має налаштувань часом більше багатьох компонентів CMS «Joomla». Він працює і як інструмент для перегляду окремих фотографій, і групи фото. Але самим чудовим у цьому плагіні, це можливість дуже легко, просто і швидко створити фотогалерею. Спочатку розглянемо налаштування вкладки «Gallery parameters», а потім я детально зупинюсь, як буквально за кілька кліків мишкою створити фотогалерею з будь-якої кількості фотографій (у розумних межах).

Вкладка «Gallery parameters» - Налаштування плагіна BK-MultithumbВкладка «Gallery parameters»панелі плагіна BK-Multithumb має наступні налаштування:

  1. Вкладка «Gallery parameters»повинна бути активна;
  2. Параметр «Gallery thumb size»визначає, якого розміру будуть мініатюри фотографій (thumbnail) у галереї. Ширина та высота вказуються у пікселях. Значення ширини і висоти розділяються прописною літерою латинського алфавіту «x».
  3. Параметр «Columns #»визначає, у скільки стовпчиків будуть розміщуватись мініатюри фотографій (thumbnail). У даному випадку (див. скріншот) мініатюри будуть розміщуватись у три колонки;
  4. У модальному вікні, яке відкривається після кліку мишкою на будь-яку мініатюру (thumbnail) може відображатись найрізноманітніша інформація. Яку інформацію повинен витягнути плагін для відображення у модальному вікні і для скількох фотографій галереї – значення цих параметрів виставляються у вказаних полях форми.

Наразі, як і обіцяв, розкажу як швидко і просто на будь-якій сторінці матеріалів CMS «Joomla»створити фотогалерею, з будь-якої кількості фотографій.

Для початку, всі фотографії, з яких буде сформована галерея, потрібно розмістити на сервері в одну директорію (каталог). Тепер, трішки теорії.

HTML код для відображення у браузері будь-якого малюнка виглядає наступним чином:

<img src="" alt="" />

Тобто, ми бачимо два обов'язкових атрибута, необхідних для відображення фото: «src»і «alt». Атрибут «src»показує, де знаходиться зображення, яке повинно бути показане у браузері, а атрибут «alt»– є описом цього зображення.  mt_gallery - Налаштування плагіна BK-MultithumbТут я представлю скріншот параметрів другої по рахунку фотографії до статті «Синтра и Мыс Рока, загадка (фото)». Як бачимо, у атрибуті «alt»до фотографії («Альтернативний текст»), вказано параметр «mt_gallery» . ОСЬ І ВСЕ (!). Більше ніяких дій від вас не потребується! Ви вставляєте у текст тільки одну фотографію (після розділової риски «Детальніше…» або далі по тексту). Вказуєте у якості атрибуту до фотографії параметр «mt_gallery» , і фотогалерея автоматично формується із всіх зображень, які знаходяться у одній директорії (каталозі) з цією фотографією. Тепер ви можете додавати, видаляти будь-яку кількість фото з директорії – ці фотографії будуть автоматично додані або видалені з галереї. Потрібно тільки не видалити з сервера фотографію, з якої була сформована галерея.

Вкладка «Full-size image parameters» - Налаштування плагіна BK-MultithumbЩе одна досить важлива вкладка у настройках плагіна BK-Multithumb «Full-size image parameters». Тут нас цікавить всього один параметр – «Resize images»(див. скріншот).

  1. Вкладка «Full-size image parameters»у настройках плагіна Multithumb повинна бути активною;
  2. Якщо параметр «Resize images»включений, то всі зображення у модальних вікнах, після кліка по мініатюрі (thumbnail), будуть змінюватись під вказані у наступних полях параметрах. На скріншоті видно, що якби цей параметр було включено, то великі зображення зменшувалися б під розмір 800х600 пікселів, а маленькі, відповідно, збільшувалися б під цей розмір. Встановлюємо значення параметра «Resize images»«Disable».

Вкладка «iLoad parameters» - Налаштування плагіна BK-MultithumbПам’ятаєте, на самому початку цієї статті, на вкладці «Плагін»ми встановили перемикач «Popup method»у положення « iLoad» .Відповідно, всі настройки других методів відображення модальних вікон, нас не цікавлять. Тому, остання вкладка, з якою ми закінчимо налаштування плагіна BK-Multithumb – «iLoad parameters». Вона має ду́же багато параметрів. Щоб всі їх «переклацати», напевно і години буде мало. На ваше задоволення, параметрів, які нас цікавлять, не так вже й багато – всього 12 :).

  1. Вкладка «iLoad parameters»повинна бути активною;
  2. Значення параметру «iLoad headers»повинно бути встановлено «Load automatically»;
  3. Параметр «paddingFromScreenEdge»встановлює відстань між краями модального вікна та робочою областю браузера;
  4. Параметр «contentPadding»встановлює відстань між елементами тексту всередині модального вікна. Оскільки у нашому випадку там ніякого тексту не передбачається, встановлюємо цей параметр на «0»;
  5. Параметр «cornersSize»встановлює відступ між панеллю управління модальним вікном і, власне кажучи, самим модальним вікном;
  6. Параметр «overlayOpacity»встановлює ступінь прозорості фону модального вікна. У нашому випадку цей параметр має значення 70%;
  7. Параметр «panelType»встановлює вигляд панелі управління модальним вікном. У даному випадку вибрана велика панель, яка знаходиться за межами модального вікна. Маленька панель знаходиться всередині нижньої частини модального вікна, але користуватись нею, на мій погляд, дуже незручно: кнопочки маленькі; стрибають весь час у різні сторони разом із зміною розміру вікна. Я віддаю перевагу великій панелі «large panel», або не ставлю взагалі – фотографії у галереї прекрасно переключаються і мишкою, і клавіатурою, кому як зручно;
  8. Параметр «arrows»включає/відключає стрілочки збоку модального вікна. На мій погляд, користуватись ними незручно: змінюється ширина зображення – стрілки переходять на нове місце. Кожен раз її ловити курсором «заморачує». Ставлю перемикач у положення «Ні».
  9. Параметр «keyboard»включає/відключає управління модальними вікнами галереї за допомогою клавіатури. Як я вже сказав, часто це дуже зручно. Ставлю перемикач в положення «Так»;
  10. Параметр «info»включає/відключає відображення інформації про файл зображення. На вкладці «Gallery parameters»ми на все поставили «0», тому, ганяти скріпт за відсутньою інформацією марно – встановлюємо значення «Ні»;
  11. Параметр «Image name». Аналогічно з попереднім п.10 – встановлюємо значення «Ні»;
  12. Параметр «Image description». Аналогічно з попереднім п.10 – встановлюємо значення «Ні»
  13. Параметр «Set info». Аналогічно з попереднім п.10 – встановлюємо значення «Ні».

І останнє. Якщо ви хочете відкрити оригінал фотографії у новому вікні – наведіть курсор на мініатюру потрібного фото і клацніть коліщатком миші.

Отже. Як бачите, налаштувань самих різних досить багато, але і результат радує. Всі мініатюри зберігаються на сервері у окремій директорії, підгружаються в матеріали с кешу. Тому все працює досить шустро і сервер не особливо напрягає.

Скачати останню версію плагіна можна з сайту розробника.

Допомогла стаття – поділіться нею у соцмережах (кнопочки нижче). Хочете прокоментувати – форма перед вами.

Удачі, Миру і Добра.

Ваші коментарі / Обговорення