Як створити веб-сайт із фотографіями в Drupal, частина 3

В заключній частині цієї серії ми проведемо вас із завершальним етапом створення веб-сайту для фотографування з нуля за допомогою системи управління вмістом Drupal (CMS).

Веб-сайти, побудовані з використанням системи управління вмістом, є більш досконалими, ніж веб-сайти, що складаються з фіксованих або «статичних» сторінок тексту, і є важливими для відображення зображень.

Як CMS із відкритим кодом загального призначення, Drupal може похвалитися великим співтовариством розробників та користується популярністю серед урядів, некомерційних фірм та освітніх установ.

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

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

Щоб дійти до цієї точки, ми розпочали побудову нашого сайту в локальному середовищі, використовуючи локальний хост Acquia Dev Desktop.

Почніть із завантаження Acquia Dev Desktop та запуску інсталятора, а потім запустіть програмне забезпечення та виберіть Почати з нуля.

Використовуйте запропоновану за замовчуванням для пошуку файлів кодової бази у вашій системі, введіть назву вашого сайту та прийміть підказки за замовчуванням для версії PHP та імені бази даних. Виберіть v8.9.1 у розділі Встановити розповсюдження Drupal, введіть необхідну інформацію, і Drupal буде встановлений.

Далі встановіть модуль Media Gallery та тему Showcase Lite. Тоді починайте створювати свої галереї …

Що потрібно для створення веб-сайту з фотографіями в Drupal

  • Комп’ютер
  • Доступ в інтернет
  • Зображення готові до завантаження
  • Додаток для розробки (ми використовуємо Acquia Dev Desktop)
  • Час: 1 тиждень (збірка)

Три етапи розробки Drupal-сайту

1. Почніть із налаштування доменного імені

На відміну від wordpress.com, Drupal не пропонує варіант хостингу, тому вам доведеться самостійно домовитись про це.

Перш ніж розпочати, вам також потрібно буде придбати доменне ім’я для свого сайту - відвідайте Domain.com, Bluehost або www.123-reg.co.uk або шукайте в Інтернеті постачальника.

Введіть бажану назву сайту, і ви отримаєте список доступних розширень (.com, .co.uk тощо) та реєстраційні збори.

2. Розробіть свій сайт Drupal на власному комп’ютері

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

3. Розгорніть готовий сайт у свого хостинг-провайдера

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

Створіть веб-сайт із фотографій Drupal за 10 кроків

Використовуючи локальне середовище Acquia Dev Desktop, ми продовжуємо розробляти наші
сайт перед тестуванням і подальшим розгортанням на платформі хостингу веб-сайтів …

01 Створіть посилання на меню для галерей

Створивши кілька галерей, ми зв’язали їх з основною навігацією, щоб відвідувачі сайту могли їх легко переглядати. В області Адміністратор ми натиснули Структура, а потім Головне меню навігації та редагування.

Ми ввели заголовок для посилання в меню, потім набрали «/ media_gallery / 1» у полі «Посилання», повторивши цей крок для інших галерей, замінивши «/ 1» на «/ 2», «/ 3» тощо.

02 Покращення відображення зображень

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

Colorbox - це популярний плагін Lightbox, який працював з декількома версіями Drupal, тому він добре зарекомендував себе і активно підтримується.

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

03 Завантажте модуль Colorbox

З опису ви помітите, що у Colorbox є два окремі елементи - модуль та плагін, і плагін є окремим завантаженням.

Почнемо з модуля. Прокрутіть сторінку донизу та знайдіть версію Drupal 8 (це одна із двох зелених вікон), наведіть курсор на посилання tar.gz, клацніть правою кнопкою миші та виберіть Копіювати адресу посилання.

Повернувшись в область адміністратора сайту, натисніть вкладку Розширення, натисніть Встановити новий модуль, вставте URL-адресу та натисніть Встановити.

04 Завантажте плагін Colorbox

Поверніться на сторінку завантаження Colorbox; відразу в розділі Залежності натисніть посилання Colorbox Plugin 1.x. Це збереже стислий архівний файл у призначеному для вашого комп'ютера місці для завантаження.

Тепер вам потрібно створити у вашій системі каталог для вбудованих файлів Colorbox. Відповідно до інструкцій на сторінці завантаження Colorbox, створіть каталог, щоб шлях до файлів став (ім’я сайту) / libraries / colorbox /, а потім розпакуйте архів у цьому місці.

05 Розмістіть нестиснуті плагіни

Якщо архів не стиснутий, ви зможете побачити 14 файлів у каталозі, включаючи найважливіший файл JavaScript jquery.colorbox-min.js.

Якщо у вашій папці відображається щось інше, переконайтесь, що ви шукаєте в потрібному місці - папка (sitename) / modules / colorbox містить синтаксис, який дуже схожий. (Ця папка повинна містити 22 файли, включаючи вісім підпапок - див. Врізку вище.)

06 Увімкніть модуль Colorbox

Вже встановивши модуль Colorbox, тепер нам потрібно його ввімкнути. (Цей процес не відбувається автоматично.) Поверніться в область адміністратора вашого веб-сайту та натисніть вкладку Розширення.

Прокрутіть дві третини сторінки вниз; у розділі ЗМІ поставте галочку ліворуч від Colorbox. Унизу сторінки натисніть Встановити.

Перейдіть до звітів та створіть звіт про стан: якщо Colorbox відсутній у списку знайдених помилок, то все добре.

07 Перевірте ефект нашого нового лайтбоксу

Тепер давайте подивимось, яку різницю зробив лайтбокс із зображенням. Клацніть Повернутися на сайт у верхньому лівому куті екрана та викликайте одну з галерей, яку ви додали до основної навігації.

Клацніть на зображення, і воно відкриється у спливаючому накладенні. Пара кнопок у нижньому лівому куті дозволяє вам переміщатися по зображеннях у галереї, тоді як X у нижньому правому куті закриває спливаюче вікно - все працює нормально.

08 Перегляньте інформацію про підписи зображення

Ще однією особливістю Colorbox є здатність відображати підпис до зображень, який з’являється внизу зображення, яке переглядається, коли ви наводите на нього курсор.

В даний час ми використовуємо альтернативний текст (короткий опис, який використовується програмами для зчитування з екрана або коли зображення не завантажується), який ми вводимо для кожної фотографії під час завантаження файлів зображень. Щоб змінити будь-які підписи, відкрийте файл зображення в меню Вміст / Файли.

09 Додайте інші ключові сторінки на сайт

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

Клацніть на вкладці Вміст, натисніть Додати вміст і виберіть Основна сторінка. Введіть потрібний текст та вбудоване зображення, обрізане до відповідного розміру. (Ми використовували 200 х 200 пікселів.) Інші сторінки для створення включають сторінку привітання.

10 Оцініть прогрес та додайте інші елементи

Отже, зараз у нас є повноцінно функціонуючий веб-сайт із фотографіями, об’єднаний у серію галерей, які відображають зображення у спливаючому накладі з інформацією про підписи.

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

Заключні кроки: розгорніть свій локальний сайт у мережі

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

1. Знайдіть постачальника послуг хостингу

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

Першим кроком є ​​пошук хостинг-провайдера. Переконайтеся, що ваш хостинг-провайдер може підтримувати PHP та MySQL, як того вимагає Drupal.

2. Завантажте FTP-клієнт на свій комп’ютер

Протокол передачі файлів (FTP) - це засіб, за допомогою якого ви завантажуєте файли місцевого сайту до свого провайдера веб-хостингу. Одним з найпопулярніших FTP-клієнтів є FileZilla, який працює як на Windows, так і на macOS. Ви можете знайти FileZilla тут.

3. Завантажте файли за допомогою Панелі керування

Ваш постачальник надасть вам доступ до панелі керування для управління сайтами "все в одному місці" - cPanel є популярним варіантом. Дотримуйтесь інструкцій свого постачальника щодо розгортання, але пам’ятайте, що передача файлів та налаштування налаштувань може зайняти цілий день.

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

Найкращі веб-сайти для фотографів: отримайте своє портфоліо в Інтернеті
Найкращі безкоштовні варіанти хмарного сховища для фотографів: платформи та додатки
Найкращі онлайн-курси фотографії - від путівників для початківців до майстер-класів
Найкращі конструктори веб-сайтів для фотографів
Кращі менеджери паролів
Кращий студентський ноутбук
Найкраще програмне забезпечення для редагування фотографій

Цікаві статті...