Як загрузити фото в текстовому редакторі. Як відобразити зображення блогу через модуль Colorbox. Поєднання модулів CKEditor + IMCE + Colorbox + Image resize filter. Добавлення кнопки "Огляд" для зображень в Друпалі

как загрузить фото документ в друпале кнопка обзор як загрузити фото
Оцінка матеріалу: 
Average: 4.8 (5 votes)

В процесі розробки сайту (сторінки новин), перед веб розробником постане проблема із загрузкою зображень в тіло новини чи запис блогу. Для вирішення цієї задачі в Друпалі є модуль IMCE. Після встановлення, заходимо в налаштування модуля CKEditor (Конфігурація » CKEditor ), вибираємо "Редагувати" формат вводу Full HTML

как загрузить фото документ в друпале кнопка обзор як загрузити фото

в НАЛАШТУВАННЯ ОГЛЯДАЧА ФАЙЛІВ вибираємо тип оглядача IMCE.

Як загрузити фото в текстовому редакторі. Як відобразити зображення блогу через модуль Colorbox. Поєднання модулів CKEditor + IMCE + Colorbox + Image resize filter. Добавлення кнопки "Огляд" для зображень в Друпалі

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

Як загрузити фото в текстовому редакторі. Як відобразити зображення блогу через модуль Colorbox. Поєднання модулів CKEditor + IMCE + Colorbox + Image resize filter. Добавлення кнопки "Огляд" для зображень в Друпалі

Однак при загрузці зображень в текст, взаємодії з ним не буде, воно просто є. Для гарного відображення зображень в Drulal є модуль Colorbox. Проблема в тому, що Colorbox використовується лише для окремо створених полів метеріалів, а хотілося б "прикрутити" його і до звичайних зображень, які ми вставляємо за допомогою модуля IMCE. І як завжди в Drupal це можна зробити дуже швидко і без знання Java, коли за допомогою спеціально написаного коду буде присвоюватися клас "colorbox". Для цього ми будемо використовувати модуль Image resize filter . Можливо у вас винекне питання, до чого тут цей модуль? Завдяки ньому ми буде автоматично, без зайвих рухів мишки, присвоювати клас "colorbox-load".

Для початку в налаштуваннях модуля Colorbox потрібно поставити галочку навпроти Colorbox load, що дозволить відкривати зображення через Colorbox.

Як загрузити фото в текстовому редакторі. Як відобразити зображення блогу через модуль Colorbox. Поєднання модулів CKEditor + IMCE + Colorbox + Image resize filter. Добавлення кнопки "Огляд" для зображень в Друпалі

Зберігаємось і йдемо в налаштування Image resize filter (Конфігурація » Текстові формати » Full HTML). Ставимо галочку навпроти Image resize filter

как загрузить фото документ в друпале кнопка обзор як загрузити фото

тепер добавляємо необхідний нам клас "colorbox-load":

Як загрузити фото в текстовому редакторі. Як відобразити зображення блогу через модуль Colorbox. Поєднання модулів CKEditor + IMCE + Colorbox + Image resize filter. Добавлення кнопки "Огляд" для зображень в Друпалі

Зберігаємося. Тепер усі зображенні, які ми вставили в текст у форматі  Full HTML редактора CKEditor, будуть відкриватися через Colorbox.