Однією з проблем, з якими стикаються веб-розробники, є правильне оформлення зображень для адаптивного дизайну. Ми змінюємо розміри зображень відповідно до розмірів екранів, на яких вони відображатимуться. При цьому враховується швидкість їх завантаження, роздільна здатність екрану та багато інших факторів.
Приклад того, що ми створюватимемо | Переглянути вихідні
На щастя, незабаром елементкартина> буде впроваджено основні браузери, але з цього ще треба попрацювати. Що ж до оформлення зображень на WordPress, тут все набагато простіше.
Дивіться також:
Принцип роботи завантажувача файлів Media Uploader
Спочатку скажемо кілька слів про використання вбудованого завантажувача Media Uploader. Цей завантажувач доступний в адмінці для декількох розділів, включаючи пости, сторінки, типи постів, які підтримують його формат (простіше кажучи, редактор), і меню мультимедіа.
Єдина відмінність меню мультимедіа від інших у тому, що зображення буде асоціюватися з постом або сторінкою, якщо воно завантажено з редактора.
Після завантаження зображення WordPress за промовчанням пропонує 4 основних розміри:
- маленький (150 x 150)
- середній (300 x 300)
- великий (640 x 640)
- повний (початковий розмір зображення)
Можна додавати власні варіанти розмірів за допомогою функції add_image_size(). Наприклад, якщо потрібно додати зображення розміром 700 х 450 пікселів, необхідно зробити таке:
add_image_size( 'product-img', 700, 450, false );
Це означає створення нового зображення із заданими нами розмірами. Тут важливо врахувати, чи зображення має бути обрізаним.
Якщо встановлено false, Розміри зображення будуть змінені пропорційно без обрізання. Якщо встановити правда, то воно буде обрізане або з обох боків, або зверху/знизу, і для кожного зображення буде різний результат.
Вставка зображень
Існує два способи додавання зображення до посту або на сторінку. Перший - через Media Uploader, як показано нижче на зображенні:
У другому варіанті використовуються мініатюри картинок. Їх можна активувати за допомогою додавання цього коду до файлу functions.php використовуваної вами теми або на початку ваших плагінів:
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}В результаті мініатюри додадуться до всіх постів, сторінок і типів постів, які їх підтримують.
Можна зробити те щоб тільки пости підтримували такі изображения:
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails', array('post' );
}Останнє, що потрібно зробити - це розмістити код у циклі шаблону, який ви використовуєте, де зображення повинно показуватися.
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
}За замовчуванням розмір зображення має назву post-thumbnail. Тепер ви можете додавати мініатюру запису через це вікно:
Якщо ви завантажуєте на сторінку кілька зображень, вони додаються у вигляді галереї за допомогою шорткоду [галерея], дивіться тут.
Поліпшення у версії 3.9
З виходом WordPress 3.9 відбулися деякі оновлення зображень та галереї. Крім покращення візуального редактора у вигляді можливості перетягувати зображення, тепер завдяки add_image_size() стало можливим вказувати, де саме ви хочете обрізати їх - з боків або зверху/знизу.
У вас може виникнути питання, яке це стосується адаптивних зображень?
Використання Media Uploader
Суть елементакартина> у тому, що ми, як розробники, робимо кілька копій одного зображення, яке відображатиметься у точках зупинки. Наприклад, image-small.jpg для смартфонів та image-full.jpg для екранів з великою роздільною здатністю. Але для впровадження його в браузери знадобиться ще якийсь час. На цей випадок є інша функція.
picturefill.js
Існує файл JavaScript від розробників Filament Group під назвою picturefill.jsякий виконує ті ж функції, що ікартина>.
Його синтаксис виглядає так:
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</span>Зверніть увагу, що тут є data-src запис для кожного зображення, яке ми хочемо використовувати, і не існує жодних обмежень щодо кількості зображень/точок зупинки для завантаження.
На даний момент це один із єдиних способів досягти такого ж результату, як і за допомогоюкартина>. Можна припустити, що якщо ця функція буде впроваджена в браузери, то найкращий спосіб кодування адаптивних зображень буде:картина> → picturefill.js →носкрипт>. Це дозволить використовувати найновіший код HTML у сучасних браузерах.
За допомогою picturefill.js та зображень, які створюються за допомогою Media Uploader, ми можемо автоматизувати процес створення адаптивних зображень на сайтах WordPress.
Прямо зараз у WordPress немає такої нативної можливості. Можливо, вона з'явиться разом із виходом підтримки елементакартина>.
Примітка: неважко помітити, що в кінці функцій використовується префікс jlc_. Його рекомендовано використовувати, щоб уникнути конфліктів з іншими темами чи плагінами.
Заміна мініатюр зображень
Як замінити мініатюри зображень за допомогою розмітки picturefill.js? Це здійснюється завдяки фільтру post_thumbnail_html, який замінить стандартну розмітку на вибрану нами. Для початку потрібно поставити в чергу picturefill.js (що можна зробити в functions.php або у плагіні):
function jlc_script() {
wp_register_script( 'picturefill', get_stylesheet_directory_uri() . '/js/picturefill.js');
wp_enqueue_script( 'picturefill' );
}
add_action( 'wp_enqueue_scripts', 'jlc_script' );Не забудьте змінити шлях, щоб створити місце для збереження файлу picturefill.js. Після збереження можна додати функцію заміни:
function jlc_get_featured_image( $html, $aid = false ) {
$sizes= array( ‘thumbnail’, ‘medium’, ‘large’, ‘full’ );
$img= ‘<span data-picture data-alt=”’.get_the_title().’”>’;
$ct = 0;
$aid = ( ! $aid ) ? get_post_thumbnail_id() : $aid;
foreach ( $sizes as $size ) {
$url = wp_get_attachment_image_src( $aid, $size );
$width = ( $ct < sizeof( $sizes ) - 1 ) ? ( $url[1] * 0.66 ) : ( $width / 0.66 ) + 25;
$img .= ‘<span data-src=”’. $url[0] .’”’;
$img .= ( $ct > 0) ? ‘ data-media=”( min-width: ‘. $width .’px)”></span>’ :’></span>’;
$ct++;
}
$url= wp_get_attachment_image_src( $aid, $sizes[1] );
$img.= ‘<noscript>
<img src=”’.$url[0] .’” alt=”’.get_the_title().’”>
</noscript>
</span>’;
return $img;
}Ось, чого ми досягли цим кодом:
- Ми маємо кілька розмірів зображень, які ми хочемо додати (за назвами). За бажанням їх можна додавати та видаляти.
- Ми встановили розмітку picturefill.js.
- Створили цикл зображень з URL для кожного розміру для додавання його як вход js елемент.
- Ми проаналізували, де можуть виникнути точки зупинки на основі розмірів зображень.
- Ми створили середній розмір зображень для користувачів, які не мають JavaScript.
Наступним кроком буде додавання нашого фільтра, який можна додати безпосередньо під функцією.
add_filter( ‘post_thumbnail_html’, ‘jlc_get_featured_image’);
І тепер наша функція jlc_get_featured_image() буде використовуватися для post_thumbnail замість стандартної розмітки.
Готовий плагін
Все це реалізовано в одному простому плагіні Responsive Featured Image, який можна завантажити з Github:
інші способи
Як бачите, обробка зображень є досить складним процесом, коли йдеться про адаптивний дизайн. Функція буде працювати лише з мініатюрами записів, а не з усіма зображеннями посту.
Для цього можна використовувати не тільки плагіни, але і шорткод з використанням URL зображення або його ID для генерування коду, наприклад: [jlc_picturefill_image aid=x].
На жаль, без копання в коді через Media Uploader не можна буде завантажувати зображення на пости, оскільки у версії WordPress 3.9 це може спровокувати конфлікт.
Джерело: code.tutsplus.com
Коментарі до запису: 0