Як створити галерею в WordPress? Корисна інструкція для новачків. Основні стилі галереї. Плагін Gallery Carousel Without JetPack
В даному уроці ми розберемо процес створення адаптивної галереї мініатюр. Розглянемо, як домогтися вирішення певних завдань і обійти проблеми, які можуть проявитися в контексті великого проекту.
Вступ
Перш, ніж зануритися в процес, розглянемо, що ми отримаємо в результаті роботи. При показі демонстраційна сторінка потрібно змінити ширину вікна браузера, щоб побачити реакцію нашого коду.
Це повний плагін з безліччю варіантів для створення і управління галереями. Включає шаблони і доступ до сховища розширень, якщо ви хочете збільшити функціональність цього плагіна. Він сумісний з сітчастими екранами, ви можете додавати відео і керувати своїми зображеннями завдяки вбудованій бібліотеці. Це також має на увазі, що плагін є легким і може бути використаний розробниками без серйозної проблеми. Ви можете сортувати мініатюри в шпальтах або на основі сітки.
Ви також можете вибрати один з трьох тем: за замовчуванням, компактний і сітчастий. Просто завантажте свої проекти і покажіть їх на пов'язаної сторінці, використовуючи шаблони, що надаються плагіном, короткими кодами або тегами. Ви можете швидко публікувати і класифікувати свої проекти, а також включати додаткову інформацію, теги, деталі клієнтів, посилання і обкладинки. Щоб розширити функціональність, ви можете використовувати віджети і короткі коди, а також налаштовувати їх за допомогою шаблонів і фільтрів.
стиль контейнера
Почнемо створювати наш код CSS з завдання ширини контейнера і центрування його на сторінці. Таким чином, ми отримаємо відмінне, широкий простір для роботи з галереєю:
Container (width: 80%; margin: 30px auto; overflow: hidden;)
Зверніть увагу, що ширина встановлена в процентах. Так ми отримуємо використання всього доступного простору і гнучкий шаблон. Нам потрібно, щоб дизайн виглядав не тільки в декількох певних точках, а адаптувався до будь-якого вікна перегляду.
Завдяки своєму повному інтерфейсу ви можете без проблем керувати галереями, аудіо - та відеофайлами. Кожному елементу, який ви додаєте в свій портфель, ви можете додати заголовок, свідоцтва, обкладинку зображення і посилання на веб-сайт клієнта. Плагін автоматично створить шаблон для кожної категорії, що додається в ваші проекти.
Ви також можете відсортувати елементи свого портфоліо, додати фільтри і розбивку на сторінки, змінити розмір зображення за замовчуванням для кожного проекту в своєму портфоліо і багато іншого. Це створить сторінку з автоматично генеруються ескізами. Онлайн-демонстрацію, створену за допомогою цього підручника, можна знайти тут.
Основні стилі галереї
Тепер перейдемо до визначення стилів для класу galleryItem. Встановимо колір тексту, розмір шрифту і будемо зміщувати елементи вліво.
GalleryItem (color: # 797478; font: 10px / 1.5 Verdana, Helvetica, sans-serif; float: left;) .galleryItem h3 (text-transform: uppercase;) .galleryItem img (max-width: 100%; -webkit- border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;)
Також тут задані стилі для зображень. Встановлюючи властивість зображень max-width в значення 100%, ми отримуємо в результаті адаптацію розміру при зменшенні ширини вікна перегляду. Також для картинок скругляются кути.
Огляд: Діалогове вікно «Дивовижний слайдер»
Натисніть кнопку «Крок 1» на головній панелі навігації, в діалоговому вікні «Додати слайди» ви можете встановити розмір галереї.
Виберіть маску і налаштуйте її
Виберіть одне і налаштуйте його. Крок 4: Налаштуйте параметри галереї. Якщо їх багато, це може бути брудно. Ми збираємося навчити вас, як це зробити. Перше, що потрібно зробити, - створити повідомлення, в яке ми будемо вставляти галерею зображень. Після створення необхідно завантажити фотографії для використання. Робіть це як у випадку зображень, які розгортаються нормально.Працюємо з колонками
Це найбільш важлива частина нашого уроку. Потрібно розібратися як встановлювати ширину і поля для кожного елемента в галереї. Так все елементи розташовуються в контейнері, то потрібно використовувати процентні розмірності, щоб вони адаптувалися до змін вікна перегляду.
У дизайні демонстраційна сторінка ми будемо використовувати п'ять колонок. розберемося з математикою для розрахунку полів. Між колонками буде поле шириною 4%. Помноживши на 5, ми побачимо, що 20% ширини йде на поля. На утримання залишається тільки 80%. Тобто кожна колонка буде 16% шириною.
У цьому випадку він буде містити 6 фотографій. У тій же області, де ми завантажуємо фотографії, ми натискаємо «Створити галерею» і за допомогою миші вибираємо зображення, які хочемо потрапити всередину. Для прикладу ми будемо використовувати шість, але ви можете використовувати все, що хочете.
Якщо ви хочете, ви можете додати підпис до кожного зображення, хоча це необов'язково. Після цього перейдіть в нижній правий кут екрану і натисніть «Створити нову галерею». Аналогічно, нам потрібно буде відрегулювати нашу галерею, вибравши кількість стовпців, тобто кількість зображень, які будуть показані поруч в мініатюрах. Замовлення буде виглядати так, як ви бачите на екрані, але якщо ви хочете, ви можете вибрати випадковий варіант, вибравши цей параметр. Нарешті, ви можете запитати, щоб кожне зображення було прив'язане до сторінці вкладення.
Тепер ми можемо вставити дані значення в код CSS. кожен клас galleryItem представляє одну колонку, тобто ширина буде 16% і поле 2% для кожної сторони, що в сумі дасть 4%.
GalleryItem (color: # 797478; font: 10px / 1.5 Verdana, Helvetica, sans-serif; float: left; width: 16%; margin: 2% 2% 50px 2%;)
Даний набір стилів створить відмінний пятіколоночний шаблон, який буде добре виглядати на екранах розміру 13 дюймів і більше.
Часто візуальне уявлення має важливе значення для успіху веб-сторінок, як в блогах, так і в інтернет-магазинах. Неорганізовані тексти перешкоджають глядачам ще до того, як вони прочитають їх зміст. В цьому відношенні графіка і зображення є, таким чином, фундаментальною частиною кожної веб-сторінки і використовуються для ілюстрації або уточнення контенту, для досягнення певного особистого та емоційного рівня або для візуалізації переваг продуктів, які. Галереї зображень є популярними інструментами для простої інтеграції зображень в веб-сторінки.
Де шаблон буде виглядати кострубато?
На жаль, даний шаблон буде ламатися при зменшенні розміру сторінки. При ширині менше 500px він стає абсолютно нечитабельним і корявим.
Для вирішення завдання ми будемо використовувати медіа запити для перевизначення відповідного розміру колонок.
Однак така інтеграція ще простіше, якщо використовується система управління контентом. Коли ви натискаєте на зображення попереднього перегляду, велике зображення відкривається на затемненій веб-сторінці в якості шпалер. Сценарій таких характеристик може бути легко інтегрований в веб-сторінку і реалізований за допомогою інших функцій. Передумовою для цього є наявність поточної версії самого додатка, а також зображення та подання в мініатюрах, які ви хочете інтегрувати в веб-сторінку.
Крім того, такі рядки повинні бути вставлені в заголовок відповідної веб-сторінки. Наступний рядок повинна бути вставлена в останній рядок перед міткою. Кожне зображення, яке ви хочете візуалізувати за допомогою лайтбоксів, потребує відповідного атрибуті для нього в вихідному коді, щоб надати необхідну інформацію скрипту.
Визначення критичних точок
Існує безліч рішень для визначення критичних точок, на яких слід зосередитися при розробці дизайну. Ринок заповнений різними пристроями з різним розміром екрану, і дуже непросто врахувати всі можливі варіанти.
Для спрощення завдання відкинемо думки про те, який розмір екрану найбільш популярний, і дамо можливість нашим шаблоном самому визначати критичні точки. Якщо проаналізувати точки, в яких шаблон ламається, ми зможемо зафіксувати дані області і зробимо наш шаблон адаптирующимся під будь-який пристрій.
Приклад слайда з декількома зображеннями
Тепер Лайтбокс вже інтегрований в веб-сторінку. Не забувайте, що є інші можливості індивідуалізувати слайди або вiдтворення лайтбокси.
Резюме найбільш важливих варіантів
Загалом, використання інструментів дуже просто і інтуїтивно, і в більшості випадків вони мають редактор перетягування.При створенні своїх веб-сторінок багато компаній і фрілансери приймають рішення про систему управління контентом, яка має багато переваг. Завдяки такій загальній модульній структурі ці системи можуть бути реалізовані і адаптовані до індивідуальних потреб. Це можливо, насамперед, завдяки великої спільноти за багатьма системами і розробці численних розширень і плагінів.
Як визначити критичні точки?
самий кращий спосіб - відкрити сторінку в браузері і зменшувати розмір вікна. Технічно, наш шаблон ніколи не зламається, так як буде змінюватися масштаб. Однак, при розмірі вікна близько 940px колонка тексту стане занадто вузькою для гармонійного розміщення тексту:
Ось чому, зокрема, новачкам потрібна фаза адаптації, щоб навчитися використовувати всі свої функції. По завершенні цієї фази користувачі можуть використовувати не тільки основні функції, але і практичні функції, такі як включення водяних знаків або можливість завантаження відвідувачів. Його розвиток і здійснення знаходяться під контролем широкого спільноти. Серед його найбільш важливих особливостей - так званий турборежим, який дозволяє завантажувати зображення і галереї великих зображень без тривалих періодів зарядки і без цього негативно впливати на продуктивність.
Для виправлення ситуації в даній точці треба зробити чотири колонки замість п'яти. Змінивши ширину колонки до 21% ми вирішимо завдання. Так як використовуються обидва властивості "max-width" і "max-device-width", то дизайн буде змінюватися і при зміні вікна браузера і на пристроях з розміром екрану менше встановлених значень.
@media only screen and (max-width: 940px), only screen and (max-device-width: 940px) (.galleryItem (width: 21%;))
Деякі додаткові функції, такі як запит параметрів, функція водяного знака, перегляд списку і класифікація смарт-серверів - це лише невелика частина майже нескінченного списку розширень, до яких ви можете отримати доступ. Його головною перевагою є те, що розширення постійно розвивається і, отже, пропонує діючі стандарти.
Коли ви створюєте свій власний сайт, іноді ви стикаєтеся з різними труднощами, намагаючись представити свої фотографії або зображення найкращим чином. Іноді ваша галерея шаблонів недостатньо функціональна. В цьому випадку ви можете використовувати різні плагіни галерей, спеціально створені для вирішення цієї проблеми.
Додавання даного стилю вирішує завдання. Наш п'яти стовпчик дизайн відмінно працює на екранах ширше 940px, а для більш вузьких перетворюється в чотирьох стовпчик шаблон.
операцію повторити
Тепер повторюємо описаний вище процес знову і знову. Зменшуємо розмір вікна і дивимося, коли дизайн перестане функціонувати. Наступна точка виявляється на 720px. Потрібно змінити ширину колонки до 29.33%, щоб отримати трехколоночной шаблон:
З вашою допомогою ви можете відображати фотографії, зображення, ілюстрації, відео або будь-який інший контент. Основна мета галереї - додати професійний підхід до будь-якого веб-сайту. Галерея не тільки покращує дизайн вашого сайту, але і полегшує управління зображеннями.
Модулі в цій колекції пропонують кілька функцій: анімовані ефекти, можливості брендингу, включення суб-галерей і багато іншого. Портфоліо плагіна дозволяє вам створити сторінку з інформацією про ваших проектах. Галерея портфоліо - відмінний плагін для додавання спеціалізованого портфоліо чи галереї на ваш сайт. Існує кілька варіантів відображення зображень.
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px) (.galleryItem (width: 29.33333%;))
Продовжуємо процес до отримання однієї колонки (розмір вікна приблизно дорівнює розміру екрану iPhone). Ось повний набір медіа запитів.
/ * MМЕДІА ЗАПИТИ * / @media only screen and (max-width: 940px), only screen and (max-device-width: 940px) (.galleryItem (width: 21%;)) @media only screen and (max- width: 720px), only screen and (max-device-width: 720px) (.galleryItem (width: 29.33333%;)) @media only screen and (max-width: 530px), only screen and (max-device-width : 530px) (.galleryItem (width: 46%;)) @media only screen and (max-width: 320px), only screen and (max-device-width: 320px) (.galleryItem (width: 96%;). galleryItem img (width: 96%;) .galleryItem h3 (font-size: 18px;) .galleryItem p, (font-size: 18px;))
Ці плагіни дозволяють вам створити збільшену сторінку списку сітки, додати додаткові зображення і деталі, щоб представити свій портфель. Плагін дозволяє вам швидко і легко відображати ваш веб-сайт. Він також дозволяє вам використовувати кілька фільтрів і категорій для сортування вашого контенту.
Повний портфоліо для творчих людей! Одним з елементів, які зазвичай містять веб-сторінки, є галерея зображень. Ця галерея зображень надзвичайно проста, але якщо ми шукаємо щось без ускладнень, це нам дуже допоможе. Підпис до фотографії Напис підпис підпису.
висновок
Тепер у нас є відмінна адаптивна галерея мініатюр, яка чудово виглядає на будь-якому пристрої або в будь-якому вікні браузера.
Замість розробки шаблону під конкретний найбільш популярний медіа запит ми аналізували функціонування нашого дизайну при зменшенні вікна браузера і вносили зміни в критичних точках, щоб відновити зовнішній вигляд.
І після тега, ми можемо ввести текст, який буде знаходитися під великим фото. Як ви можете бачити, приклад галереї зображень повністю простий і простий в реалізації. Ви можете повторно використовувати цей код, просто змініть імена зображень і тексти написи.
Якщо у вас є сумніви, надішліть його тут. У галереї ви можете архівувати широкими штрихами: зображеннями, аудіо, відео та документами. Перший варіант, який ви знайдете всередині медіа-галереї, - це мультимедійна бібліотека. Там ви знайдете все файли, які у вас є у вашій установці, збережені в певний час; і ви можете вибрати, як їх переглядати, вибравши відповідний значок над зображеннями.
Створити звичайну галерею - занадто просто. Давайте зробимо її більш "живий" і цікавою, використовуючи властивості CSS3! До того ж, не застосовуючи до нього ніяких інших JS і JQeury.
У цьому прикладі я покажу, як зробити барвисту і оригінальну галерею, використовуючи лише HTML і CSS3 властивості.
Головною особливістю в даній галереї є збільшуються зображення, при кліці на них.
Насправді зробити це дуже просто, потрібно лише використовувати один HTML атрибут і один CSS псевдоклас.
Цей екран також дає вам можливість відображати тільки певні файли, просто вибираючи потрібний варіант з випадаючих меню. Крім того, якщо ви знаєте ім'я файлу або містить слово, ви можете виконати пошук за словами, використовуючи вікно пошуку, яке відображається праворуч на цьому екрані.
Використання кнопки «Додати новий» на екрані медіабібліотеки
Натискання на цю кнопку дасть вам можливість завантажити новий файл, Перетягнувши його або вибравши його з жорсткого диска вашого комп'ютера, для якого ви повинні натиснути «Вибрати файли».
З «Додати новий запис»
Якщо ви в будь-який час пишете новий запис в своєму веб-блозі або блозі, і вам потрібно включити зображення, якого у вас немає в вашій медіа-галереї, ви також можете зробити це в один і той же час, натиснувши кнопку «Додати об'єкт» , яка з'явиться над вами в поле, де ви пишете текст.HTML
Так, що б при кліці на зображення воно збільшилося, потрібно додати атрибут tabindex, в якому може знаходиться будь-яке ціле число, починаючи з нуля. До того ж, при натисканні на кнопку Tab, автоматично буде збільшено наступні зображення.
Насамперед варто оформити сам тег . Тут можна відразу додати прозорості, плавності, тіні, а так само відступи:
Після вибору натисніть кнопку «Вставити в запис» в правому нижньому кутку, і обраний вами файл буде вставлений всередині введеної записи. 
На цьому ж екрані ви можете створити галерею для вставки всередині свого повідомлення. Галерея представляє собою набір зображень, які будуть відображатися в рядках і стовпцях, як ви налаштовуєте.
При виборі опції «Створити галерею» ви повинні вибрати зображення, які у вас є в своїй бібліотеці, і ви хочете, щоб вони відображалися в запису. Після вибору натисніть кнопку в правому нижньому кутку, де ви покладете «Створити нову галерею», і вона буде автоматично вставлена в ваше повідомлення.
Gallery a img (/ * округлення старт * / -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; / * округлення кінець * / / * transition старт * / -webkit-transition : All 1s ease; -moz-transition: All 1s ease; -o-transition: All 1s ease; transition: all 1.0s ease; / * transition кінець * / / * Тінь старт * / -webkit-box-shadow: 0px 2px 4px 1px #DFDFDF; -moz-box-shadow: 0px 2px 4px 1px #DFDFDF; box-shadow: 0px 2px 4px 1px #DFDFDF; / * Тінь кінець * / / * Прозрачнсоть старт * / -moz-opacity: 0.70; opacity: 0.70; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha" (Opacity = 70); / * Прозрачнсоть кінець * / margin-right: 5px; / * Відступ справа * / padding: 10px; / * Внутрішні відступи * / display: inline-block; / * відображення * / height: 150px; / * Висота * /)
Тепер варто прибрати ефект прозорості при наведенні, а не при кліці:
Gallery a img: hover (-moz-opacity: 1; opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha" (Opacity = 100);)
Залишилося лише зробити, щоб при кліці збільшилася зображення. Для цього будемо використовувати псевдоклас. Але який? : Hover,: active,: link тут явно не підійдуть ... Для цього випадку підійде псевдоклас: focus, так як він спрацьовує як раз при кліці на об'єкт і зникає, коли відбувається інший клік.
Gallery a: focus img (position: relative; / * Позиціонування * / height: 300px; / * Висота * / cursor: pointer; / * Вид курсору * / / * transition старт * / -webkit-transition: All 1s ease; - moz-transition: All 1s ease; -o-transition: All 1s ease; transition: all 1.0s ease; / * transition кінець * / / * Тінь старт * / -webkit-box-shadow: 0px 4px 4px 1px #DFDFDF; -moz-box-shadow: 0px 4px 4px 1px #DFDFDF; box-shadow: 0px 4px 4px 1px #DFDFDF; / * Тінь кінець * /)
Практично готове. Але тепер, при кліці на зображення, біля нього утворюється жовта лінія, наприклад в браузері Google Chrome. Це легко виправляється додаванням властивостей з обведенням з нульовими значеннями:
Gallery a (outline: 0; border: 0;)