Drupal-модуль Field image tooltips для зображень з pop-up підказками

13.12.2016
Drupal-модуль Field image tooltips для зображень з pop-up підказками
Автор:

Розробники InternetDevels, які працюють над проектом всесвітньої мережі магазинів JYSK, продовжують дарувати Drupal-спільноті нові модулі. У минулому блозі ви мали змогу ознайомитись із модулем Gridstack field. Цього разу на черзі — модуль Field image tooltips, що також готовий для Drupal 7 та Drupal 8. Про нього, уже за гарною традицією, розповість сам автор.

Деякий час тому команда розробників нашої компанії, яка є частиною великої команди проекту JYSK, отримала оригінальне і дуже цікаве завдання. Проект, над яким працює команда розробників, — це великий інтернет-магазин для багатьох країн, що включає також розділи новин, статей і тому подібні сторінки. Тому замовники забажали, щоб ми створити можливість додавати на сторінку велику картинку з декількома товарами, які продаються на сайті, і позначати на цій картинці точки, при натисненні на які покупці мали б змогу переглянути усю інформацію про певний товар або додати цей товар собі в кошик.

У пошуках рішення для цієї задачі розробники переглянули список готових модулів Drupal та jQuery-плагінів. Не знайшовши нічого, що могло б знадобитися в побудові функціоналу для даної фічі, розробники розпочали побудову власного рішення. Так народився Drupal-модуль Field image tooltips.

Field image tooltips — це готова збірка полів на основі Drupal-модуля Paragraphs, яка містить у собі поле для завантаження картинки, що буде показуватись користувачам з розміщеними tooltip іконками; поле для завантаження самої іконки; а також Entity reference автокомпліт поле, через яке можна прив’язати певний контент до точки на головній картинці.

Отож, якщо Вам потрібно буде зробити щось схоже, виконайте наступні дії:

  • Завантажте і встановіть модуль Field image tooltips і усі необхідні модулі, як це Ви зазвичай робите.
  • Відкрийте сторінку налаштування полів потрібного Вам типу контенту і додайте до нього поле з типом Paragraphs.

Drupal-модуль Field image tooltips для зображень з pop-up підказками

  • На сторінці налаштування цього поля у частині “Дозволені Paragraphs бандли” оберіть “Image with tooltips”.

Drupal-модуль Field image tooltips для зображень з pop-up підказками

  • Збережіть налаштування поля та перейдіть на сторінку створення нової ноди.
  • Задайте назву для нового матеріалу.
  • Натисніть на кнопку “Додати Image with tooltips”.
  • Завантажте зображення іконки, яке буде використовуватись в якості tooltip на основній картинці.
  • Завантажте основну картинку.
  • У полі “Tooltips content” оберіть ноду, яку Ви хочете показати, коли користувач натисне на tooltip.
  • За допомогою мишки змініть положення tooltip на основній картинці.

Drupal-модуль Field image tooltips для зображень з pop-up підказками

  • При бажанні додайте інші tooltip.
  • Збережіть контент.

Результатом Ваших маніпуляцій буде сторінка на зразок цієї:

Drupal-модуль Field image tooltips для зображень з pop-up підказками

Сподіваємось, Drupal-модуль Field image tooltips буде корисним для вас!

3 votes, Рейтинг: 5

Також по темі

1

Сьогодні — день подвійної користі! По-перше, є Drupal-модуль, створений розробниками InternetDevels, які працюють над проектом всесвітньої мережі магазинів JYSK. По-друге, одна з авторів модуля...

2

На черзі — новий блог від одного з наших Drupal-розробників про Drupal 8. Вони уже присвятили немало постів новій версії CMF — про...

3

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

4

Бути потужним, безпечним та функціональним — це “те, що лікар прописав” для будь-якого хорошого сайту! Тому Drupal — це “здорова” ідея і для медичних сайтів у тому числі. Сьогодні ми підібрали...

5

Сьогодні ми знову пропонуємо вам блог одного з наших Drupal-розробників, а це означає багато важливих деталей та практичних порад — цього разу щодо кешування в Drupal 7....