Як створити адаптивні галереї у вигляді сітки за допомогою плагіна Final Tiles Grid Gallery

Сьогодні ми познайомимося з чудовим плагіном Final Tiles Gallery. За його допомогою ви зможете створювати галереї у вигляді адаптивних сіток у WordPress. Однією з головних особливостей цього плагіна є те, що дозволяє завантажувати зображення абсолютно будь-якого розміру. Він відображатиме їх у вигляді сітки, елементи якої не будуть обмежені чіткими розмірами рядків або стовпців, не змінюючи початкові розміри зображення або просто зберігаючи пропорції.

Опис | демо | Купити за $19

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

Дивіться також:

• Найкращі плагіни для створення галереї у WordPress
• NextGEN Gallery - найпопулярніший WordPress плагін для фото
• 7 плагінів для фотогалереї на WordPress
• Як вставити фотогалерею WordPress у довільному місці вашої теми
• 8 безкоштовних WordPress плагінів для фотогалерей Instagram

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

Можливості плагіна

Це досить потужний плагін, нижче надано короткий огляд його основних функцій:

• Ефекти при наведенні
• Можливість зміни ефектів
• Іконки у підписі зображень
• Фіксовані підписи
• Смуга процесу завантаження
• Не обрізає зображення: на відміну від багатьох інших подібних галерей, в даному варіанті немає автоматичного обрізання зображення (якщо ви не вирішите використовувати прив'язку до сітки з точними параметрами)
• Адаптивність
• Додавання кількох зображень: ви зможете вибрати та додати велику кількість зображень з панелі WordPress за один раз
• Встановлення параметрів ширини галереї
• Додавання користувацьких CSS
• Скрипти користувача: ви можете додати свої скрипти, які запустяться після ініціалізації галереї
• Портфоліо: ідеальний інструмент для створення портфоліо та фотогалереї
• Зміна розміру зображення: встановіть розмір зображення після додавання до галереї.
• Інтеграція із соціальними мережами: кожним зображенням можна поділитися на своїй сторінці у Twitter, Google+, Facebook, Pinterest тощо.
• Декілька галерей: ви можете додавати будь-яку кількість галерей у свої пости
• Підписи користувача: налаштування прозорості підпису, кольору, анімації та її тривалості
• Розширений UI адміністратора
• 5 лайтбоксів: підберіть необхідний лайтбокс серед 5 запропонованих варіантів (Magnific, ColorBox, FancyBox, PrettyPhoto, Swipebox)
• Віджет: Ви можете вставити галереї в текстові віджети
• Контроль розміру зображень: встановлювати параметри всіх зображень одночасно
• Дефолтний розмір зображення: використовується при додаванні зображення до галереї
• Управління галереями: кожну галерею буде збережено в базі даних WordPress, так що ви в будь-який час зможете редагувати їх
• Кастомні лінки: кожне зображення може бути пов'язане з кастомним URL
• Зум: кожне зображення може відображатися у більшому форматі
• Фільтри: завдання власних фільтрів для кожної галереї
• Стиль кордону: задавайте необхідні параметри кордону (кольори, розмір та радіус)
• Тінь: налаштовуйте розмір та колір тіні
• Вимкнення збільшення зображення: ви можете заборонити автоматичне збільшення зображення
• Перемішування: є можливість увімкнення/вимкнення функції відображення зображень у випадковому порядку
• Оформлення: у вас є контроль над полями та прив'язками сітки
• CSS3 анімація / JS fallback: скрипт виявлятиме, чи підтримує браузер нативну анімацію CSS і, якщо так, то використовує її для апаратного прискорення, інакше будуть використані анімації JavaScript
• Мобільні пристрої: скрипт чудово працює на всіх пристроях, навіть мобільних телефонах, які працюють зі стандартним браузером
• Гарантована підтримка

Використання плагіна

Після того, як ви завантажили та активували плагін, він додасть нове меню до вашої панелі адміністратора WordPress під назвою “Final Tiles Gallery”. Натиснувши на перше посилання, ви перейдете на головний екран плагіна, де побачите пропозицію додати першу галерею.

Після переходу на наступну сторінку ви побачите вікно, в якому зможете задати ім'я галереї та її опис:

Далі ви можете вибрати джерело зображення для вашої галереї. Ви можете вибрати з: медіа-бібліотеки, останніх постів чи продукції WooCommerce.

Потім можна вибрати варіанти підпису зображень. Ви можете вимкнути їх, використовувати в заголовку зображення, додати опис зображення та вибрати один із ряду ефектів.

У наступному вікні ви зможете вибрати потрібний розмір зображень і розпочати завантаження (пізніше ви також зможете змінити ці параметри).

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

Якщо ви натиснете кнопку “Редагувати”, ви зможете перейти до вашої галереї і в цьому вікні побачите набагато більше важливих налаштувань:

• Загальні
• Посилання та Лайтбокс
• Підписи
• Ефекти при наведенні
• Ефекти для зображень
• Стиль
• Кастомізація
• Зображення

Обов'язково перегляньте кожен із цих пунктів і ви знайдете багато цікавих налаштувань. Наприклад, у вкладці “Links & Lightbox” ви зможете налаштувати параметри та надати можливість ділитися зображеннями з галереї у Twitter, Facebook, Pinterest та Google+.

У вкладці “Hover Effects” ви зможете додати функцію повороту або збільшення, коли відвідувачі сайту наводитиму курсор мишки на зображення:

Тестування вашої галереї

Як тільки ви зробите всі необхідні налаштування, ви можете розміщувати галерею на вашому сайті. Для цього перейдіть на початкову сторінку, де буде список доступних галерей, натисніть кнопку “Show Shortcode”, копіюйте код та вставте його на сторінку чи пост.

Ось як наша галерея виглядає у стандартній темі WordPress. Ми додали кнопки для соціальних мереж та зум 150% при наведенні курсору.

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

інші приклади

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

Висновок

Це чудовий плагін, який допоможе вам створювати акуратні та красиві галереї. Він надає набагато більше можливостей, ніж вбудована галерея Wordpress, ідеально підходить і для створення професійних портфоліо, і просто для домашньої галереї. Вартість складає $19.

Джерело: wplift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/