Мамбот hsimage (зображення з міні ескізом)

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

Хочу відзначити, що на нашому сайті використовується далеко не остання версія даного розширення. Другий момент - даний мамбот не працює з версіями Joomla 1.5.XXX. Втім, останнім непорозуміння можливо і буде виправлено автором згодом.

У рамках даної статті ми з вами розглянемо одну з останніх версій плагіна, проте справедливості заради, на сервері Ячайніка я виклав для скачування дві версії: Мамбот HSImage (зображення з міні ескізом) - версія 1.0.3і Мамбот HSImage (зображення з міні ескізом) - версія 1.1.2.3. Перша - більш рання, але і більш стабільна. Друга (саме її ми сьогодні і вивчимо) володіє розширеним набором функцій і дозволяє на сайті здійснювати справжні чудеса з графікою.

Відео: 3d КАЧЕНЯ з гумок Rainbow Loom Bands. Урок 197 | Duck Rainbow Loom

Щоб ви отримали наочне уявлення про можливості мамбота, я хотів би щоб ви заглянули на цей сайт - https://fotonix.ru/

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

Тепер про найголовніше. Як домогтися вищеописаного ефекту?

Ще раз напомнінаю, що нам потрібно працювати з версією hsimage_v.1.1.2.3, скачати яку можна тут.

Після завантаження та установки, вибираємо в головному меню пункт Мамботи - Мамботи Сайту і клікаєм по ньому.

Нашому увазі відкриється список встановлених в системі мамботов. Знаходимо плагін під назвою «Зображення з міні ескізом» і натискаємо за назвою мамбота.

Ми потрапляємо на сторінку налаштувань даного плагіна.

Відео: Підготовка фото для гравіювання в фотограв Preparing for photo engraving in fotograv

Тепер хочеться зробити невеличкий відступ. Справа в тому, що робота з плагіном «Зображення з міні ескізом» може відбуватися за двома нижчеописаних схемами:

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

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

Різниця в роботі полягає в написанні тега, а також в тому, що вихідні параметри зображення виставляються в налаштуваннях мамбота, і навіть в тілі самого тега.

Слід враховувати, що міняти параметри можна і на вкладці «Картинки», проте пріоритет при формуванні HTML віддається прописних параметрам. Тобто тим параметрам, що ви впишете в тіло тега. Але про це читаємо нижче.

Однак, вистачить демагогії. Предлагаю приступити безпосередньо до практики. У нас як не можна до речі відкрита сторінка з настройками мамбота. Насамперед звертаємо увагу на текстове поле «Розмір ескізу». За замовчуванням там стоїть значення 100. Це означає що всі зображення вставлені за допомогою тега hsimage будуть спочатку відображатися з шириною в 100 пікселів. Якщо вас влаштовує таке значення, то залишаємо дане текстове поле незмінним. При необхідності міняємо параметр на необхідний.

Звертаємо увагу на ліву частину сторінки і включаємо мамбот в робочий стан, шляхом натискання навпроти напису «Включено» в положення «Так».

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

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

Розглянемо статтю, де 3 малюнка вставлені за допомогою нашого мамбота. Зверніть увагу на рисунок:

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

Пропоную розібрати конструкцію тега трохи докладніше. Всі параметри тега поділяються прямою лінією, а сам тег і його параметри укладені у фігурні дужки.

Hsimage - це власне назва тега, яке вказує, що в даному місці статті вставляється мамбот «Зображення з міні ескізом».

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

Ми пам`ятаємо, що в параметрах мамбота виставили ширину міні ескіза дорівнює 100 пікселів. А що ж робити, якщо в певному конкретному випадку потрібно виставити ширину і висоту ескізу відмінними від заданого в настройках параметра.

Відео: Використовуємо Anchors в Swift для створення інтерфейсу через код

В такому випадку конструкція тега буде виглядати наступним чином:

Ми бачимо, що перед параметром вирівнювання зображення з`явилося два значення. Перше - це ширина, а другий - висота нашого міні ескізу. Щоб в нашій голові ще раз відклалася робота з тегом, я пропоную озвучити його вміст показане на останньому малюнку.

Параметри вказані на малюнку всередині фігурних дужок повідомляють системі, що в даному місці статті виводитиметься за допомогою мамбота «Зображення з міні ескізом» малюнок, під ім`ям «Баня з оциліндрованих колод. Проект №2 ». Ескіз картинки буде виводитися з шириною і висотою рівними 200 пікселів і виводитися він буде по центру екрана.

Наостанок я б хотів нагадати, як додаються зображення. Ми тільки що вказали тегами в яких місцях потрібно виводити картинки. А тепер непогано було б вказати Джумла - а ЯКІ картинки потрібно виводити.

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

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

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

Другий варіант вставки «Зображення з міні ескізом» - перехоплення тега IMG

На початку статті я показував сайт https://fotonix.ru/ де зображення з міні ескізом вставлені в модуль.

Яким же чином це досягнуто? Адже ми пам`ятаємо, що при редагуванні модуля не з`являється блок «Управління зображеннями». Справа в тому, що в останніх версіях наш вельмишановний мамбот дозволяє перехоплювати тегu IMG, то є зображення вставлені самим звичайним способом, за допомогою кнопки «Вставити редагувати зображення» в редакторі joomlaFCK будуть також відображатися в види міні ескізів, які при кліці по ним мишкою будуть збільшуватись до початкового розміру.

Щоб включити перехоплення тега IMG, нам необхідно повернутися в налаштування мамбота і включити параметр «Заміна IMG» в положення «Так».

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

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

Щоб система управління контентом Joomla розуміла, що дане зображення не потрібно обробляти мамбота, в тіло тега IMG ми повинні додати параметр rel = "nohsimage" так, як показано на малюнку:

Якщо подивитися на цю сторінку - https://fotonix.ru/kompyuteryi/index.php, то видно що все зображення всередині статті тегом не обробляються, хоча ескізи в нижньому модулі по колишньому функціонують завдяки мамбота «Зображення з міні ескізом».

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

З повагою, Гоша Комп`ютерний.