Категорії

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 буде корисним для вас!

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

Також по темі

1

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

2

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

3

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

4

Інтернет-магазини у Drupal 8 — цікава тема для багатьох розробників. Наш Drupal-девелопер написала блог про модуль Commerce 2.x, який ми раді вам запропонувати....

5

Більшість з нас звикли максимально оптимізувати будь-який робочий процес, в чому нам допомагає велика кількість наявних технологій. Деяким з них (Drupal Composer шаблону і Phing) присвячений...

Давайте обговоримо ваш проект у всіх деталях

Шукаєте хороших Drupal-розробників? А ми тут! Яким би ви хотіли бачити проект своєї мрії? Зв’яжіться з нами і розкажіть про це. Із задоволенням втілимо вашу мрію в життя!

Приєднуйтесь до людей, які вже підписалися!

Хочете бути в курсі важливих і цікавих речей, що відбуваються? Ми інформуватимемо Вас про розвиток та нові події в Drupal, дизайні, тестуванні та ін.

Відпишіться у будь-який час