- Модулі WordPress для створення галереї картинок
- Фоторама - фотогалерея для блогу на WordPress
- Додавання водяного знака на зображення сайту
День добрий, шановні читачі wmbn.ru ! Сьогодні хотілося б торкнутися теми про зображення, як їх можна виводити і в якому варіанті на сторінки сайту, блогу, що працює під управлінням движка WordPress . Вже не новина, що зображення на сайті грають важливу роль - будь це фотоблог, або присвячений спортивній тематиці. Зображення розряджають текст, даючи читачеві хоч мить на відпочинок.
Так само, як можна помітити на багатьох блогах, зображення грає роль вступу до посту, даючи наочно зрозуміти про що буде йти мова, але це знову ж таки залежить від автора. Однак завантаживши зображення і вставивши його в тіло записи не означає, що все готово - потрібно оптимізувати зображення , А потім його надати. Можна обійтися простим відкриванням зображення в новій вкладці, додавши в нього властивість target = "blank", а можна зробити різні ефекти для зображення, а так само його відкриття. Такий підхід надасть сайту красу і динаміку - дані ефекти все ж краще виглядають, ніж його просте відкриття, особливо якщо тема сайту пов'язана з фотографіями, або на блозі використовуються мініатюри.
Модулі WordPress для створення галереї картинок
Давайте розглянемо плагіни WordPress, за допомогою яких можна задати ефект галереї для зображень. Їх дуже зручно використовувати, якщо потрібно відкривати зображення на блозі як вконтаке або Facebook, а так само Twitter . Такий підхід додасть функціонал блогу і зробить прибуття на ньому більш приємним.
Приступимо до першого плагіну, який я використовую на своєму блозі для відкриття зображень - Lightbox Plus. Встановити його можна, скачавши архів з офіційного сайту WordPress , А потім розпакувати його в папку на сервері, де розташовані плагіни (wp-content / plugins). Після в панелі адміністратора потрібно активувати плагін і можна почати роботу з ним. Другий спосіб - установка прямо з панелі адміністратора.
У пункті меню Модулі виберіть Додати новий, а потім в пошуковий рядок введіть назву плагіна - Lightbox Plus. Після установки в меню Зовнішній вигляд з'явиться пункт настройки плагіна Lightbox Plus (я вже згадав налагодження даного плагіна , Але тільки згадав, зараз же слід описати як його налаштувати). На сторінці налаштувань в блоці General Settings налаштовується зовнішній вигляд рамки для зображень:
- Lightbox Plus Style - вибір стилю рамки. Може бути як простий стиль без будь-яких ефектів, так і з різною анімацією, додатковим фоном і кнопками;
- Use Custom Styles - поставивши галочку навпроти даного пункту, можна налаштувати стиль виведення картинки на сторінці;
- Disable Lightbox CSS - даний пункт відключає всі стилі для плагіна, привласнюючи йому стандартний, тобто без всяких рамок;
Перейдемо до таких установок - Base Settings:
- Transition Type - змінюється поведінка відкриття вікна із зображенням (еластичний, прозорий і без ефектів);
- Resize Speed - швидкість зміни зображення для рамки;
- Далі йдуть пункти width і height, в яких налаштовується довжина і ширина вікна, а так само відступи всередині нього;
- Overlay Opacity - настройка прозорості фону рамки зображення;
- Pre-load image - попередня завантаження зображення до наступного перегляду зображення;
- В поле Grouping Labels змінюємо текст для уточнення яке зображення із загального числа;
- Previous, Next, Close - відповідно Попереднє, Наступне та Закрити перегляд зображення;
Тепер приступимо до налаштування слайд шоу (Slideshow) - для початку включаємо перший пункт, щоб включити можливість перегляду зображень у режимі слайд шоу на WordPress. У Autostart Slideshow ставимо галочку, якщо хочемо, щоб зображення автоматично переключалися, вказавши часовий інтервал для перегортання. Нижче вказуємо текст для кнопок Уперед (Next) і Назад (Previous).
Далі змінюються додаткові опції, які закривають від відвідувача назву зображення, включають і відключають галерею і так далі. Однак на основний функціонал дані опції ніяк не впливають і для простого виведення зображення в окремій рамці в WordPress змінювати ці параметри буде зайве. Всі зміни можна подивитися в блоці Demo.
Другий плагін Fancybox Plus дозволяє створювати такий же показ зображень, як і в Lightbox Plus, відмінності тільки в оформленні. Але можливо комусь сподобається більше сподобається Fancybox, ніж Lightbox - це справа смаку. встановлюється плагін на WordPress точно таким же способом, тільки в пошуковому рядку потрібно ввести назву іншого плагіна. Перш почну з налаштувань плагіна - сторінка налаштувань знаходиться в меню Параметри.
В налаштуваннях можна підключити бібліотеку jQuery від Google, а так само включити перегляд галереї WordPress спільно з даними плагіном. Далі є можливість включення підтримки завантаження відео з Youtube , Де ролик буде переглянутий за допомогою плагіна Fancybox Plus. Показ відео роликів так само супроводжується налаштуванням - відображення посилання, розмір відео. Далі вказуємо ефекти для відкриття і закриття вікна з переглядом зображення.
Відмінності Fancybox від Lightbox в зовнішньому вигляді і кількості налаштувань - якщо перший плагін простий в налаштуваннях і має мало стилів, то другий має багато налаштувань і різних стилів. Далі, в Fancybox можна завантажувати відео з Youtube , Вказавши його ID. Це зручно, так як немає необхідності завантажувати сторонні плагіни і встановлювати скрипти з Youtube.
Фоторама - фотогалерея для блогу на WordPress
Хотілося б докладніше розглянути одну дуже гарну галерею зображень для WordPress - Фоторама (fotorama). Дізнався я про дану роботу від Orcinus Orca, автора блогу orcinus.ru . На той момент він ще практикував використання скрипта фоторами, показавши його використання на своєму сайті, який ведеться вже досить довгий (дуже довгий) час. Автор же самій ідеї і творець фоторами - Артем Полікарпов .
Мої перші враження були позитивними - красиво оформлений дизайн, все зображення одного розміру та й сам скрипт працював без проблем, але знову ж таки тільки при поверхневому вивченні. Шкода, але я не помітив попереднього завантаження мініатюр - вони вантажилися тільки тоді, коли було доступно вихідне зображення. Такий недолік фоторами дуже добре помітний на низкоскоростном інтернеті (той же USB модем, який перетворився на справжній гаджет, оповитий ізолентою). Але ось буквально при написанні статті перевірив - тепер першими завантажуються мініатюри, так що недолік даний від фоторами відпадає.
Другий недолік, викликаний моїми зусиллями встановити скрипт - складна прив'язка фоторами до сайту. Хоча це в більшій мірі пов'язане з Linux (Ubuntu) і неправильно виставленими правами (Sudo взагалі ніяк не допомагав). Але все ж одного разу вийшло прикрутити фотораму до простенькому сайту, проте зображення так і завантажити не вийшло.
Вирішити проблему допоміг, як не дивно, простий плагін для WordPress, який створює фотогалерею з допомогою фоторами. на сторінці завантаження плагіна фоторами зазначено, що автор роботи Анна Шішлякова, за що їй величезне спасибі. Завантажуємо плагін з сайту, встановлюємо його в папку з плагінами (можна завантажити за допомогою FTP менеджера або засобами панелі управління хостингом), попередньо створивши для нього папку, куди файли слід розпакувати.
Після завантаження заходимо на сторінку плагінів (Модулі - Встановлені) і активуємо Fotorama. Після цього в меню Параметри з'явиться посилання на сторінку налаштувань плагіна. Насамперед налаштовується поведінку фоторами, а саме спосіб перемикання зображень - можна перетягувати мишкою або ж просто клікати на зображення. Нижче вказуємо тип навігації - стрічка превьюшек (попередньо загруженноие мініатюри галереї), кнопочки в стилі iPhone або прибрати взагалі навігацію.
Потім вибираємо показувати підписи до зображень чи ні. Якщо так, то можна їх поставити над зображеннями або під фоторамой. Є функція слайд шоу, що просто відмінно для журналу свого - ставимо галочку навпроти пункту слайдшоу, вказуємо час перемикання зображень. Нижче встановлюємо розмір зображень (статичний або по першій картинці) і на розсуд включаємо повноекранний режим.
Після всіх налаштувань можна приступити до створення фотогалереї в WordPress. Для цього буде потрібно створити просту запис і попередньо завантажити в неї кілька зображень. Наступним кроком буде відкриття галереї в вікні завантажувача, де як раз в галерею фоторами потраплять завантажені картинки. Не роблячи цього, фоторама працювати не буде і картина просто відкриється в новому вікні. Залишилося лише додати галерею в тіло поста і насолоджуватися роботою фоторами.
Зроблю невелику відсебеньки:
- Можна додати в галерею і інші ефекти переходу - затінення, розчинення і інші;
- При перемиканні зображення, якщо воно знаходиться далеко від активного, можна було не робити карусель, бо помітний гальмо. Думаю виправити можна такий ефект тим же затінюванням або загасанням;
- Можна зробити таку цікаву річ, як додати по боках як би половину попереднього і наступного зображення, а краще третину, зробивши їх правий і лівий край з загасаючим переходом;
Начебто все, більше ідей по додаванню ефектів не приходять. Може у кого-то виникла відсебеньки - можете вказати її в коментарях.
Додавання водяного знака на зображення сайту
А тепер поговоримо трохи про водяних знаках на зображеннях ну і, власне, як додати водяний знак на зображення без застосування особливих зусиль. Першим способом можна вважати ручне накладення таких знаків на картинку за допомогою редакторів. Суть полягає не в тому, щоб додати якусь прозору напис, яка дуже схожа на ті, що закріплені на банкнотах, а просто вказати на зображенні, що воно ваше. Хоча на сайтах, де переважно контентом є авторське зображення, накладається прозорий водяний знак на все зображення.
Зробити водяний знак можна в Photoshop або Gimp - досить мати два шари, на якому буде розташовано вихідне зображення і знак, на який ставимо ефект прозорості. Процес не складний і займає мало часу, проте для великої кількості зображення таке створення водяного знака буде дуже трудомістким. Вирішити дану проблему можна за допомогою плагіна Watermark Reloaded.
Завантажуємо плагін з сайту WordPress і розпаковуємо його в папку з плагінами, або ж на сторінці установки в пошуковому рядку пишемо Watermark Reloaded. Активуємо плагін і приступаємо до налаштування (меню Параметри - Watermark Reloaded). Спочатку вказуємо на які зображення виставляти водяний знак і його положення на картинці. Потім текст знака та його параметри - розмір шрифту, назва, колір. Після цього на зображенні, після завантаження за допомогою стандартних засобів , З'явиться той напис що ви вказали в налаштуваннях.
В принципі все - плагіни для створення галереї розглянуті, накладені водяні знаки. Хочу додати, що при використанні водяних знаків не варто ставити їх на ті зображення , Які вам не належать.
