Как использовать функцию адаптивных изображений из WP 4.4 в ваших темах
Я действительно не понимаю, как я могу использовать новую функцию отзывчивых изображений, которую WordPress предоставляет в моих темах.
Пример:
В моей теме я добавляю изображение заголовка. Поэтому я использую изображение пользовательского заголовка из настройщика ИЛИ миниатюру после публикации:
<figure id="header-image" class="uk-margin-remove">
<?php if ( ( is_single() || ! is_home() ) && has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
???
<?php endif; ?>
</figure>
Итак, в первом случае результат будет таким:
<img src="http://xxx.dev/wp-content/uploads/x.jpg" srcset="http://xxx.dev/wp-content/uploads/x-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/x-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/x-1024x241.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" alt="">
Что совершенно нормально. Но если я хочу отобразить изображение по идентификатору вложения, независимо от того, какую функцию я использую, я не получу результат, который я ожидать.
Пример:
В приведенном выше коде вы видите "???". В том месте я кое-что попробовал. Например, это:
<?php echo wp_get_attachment_image( get_custom_header()->attachment_id, 'full' ); ?>
, что приводит только к одному размеру (см. Атрибут размеров):
<img src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" class="attachment-full size-full" alt="Delft_IMG_6275" srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" height="451" width="1920">
Итак, каков правильный способ отображения изображений в теме, чтобы он выводил аналогичный результат, как the_post_thumbnail()?
3 answers
После нашего обмена комментариями я перечитал ваш вопрос и получил довольно простой ответ:
Похоже, все работает нормально.
Вас беспокоит атрибут sizes во втором примере, но вам следует обратить внимание на атрибут srcset, и он показывает все размеры вашего изображения:
<img
src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg"
class="attachment-full size-full" alt="Delft_IMG_6275"
srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w"
sizes="(max-width: 1920px) 100vw, 1920px"
height="451" width="1920">
Ваш браузер считывает атрибуты следующим образом:
1 - Посмотрите на атрибут sizes и найдите первое совпадение для текущая ширина видового экрана. В этом случае, если область просмотра имеет ширину до 1920px, используйте значение 100vw, преобразованное в px, в противном случае используйте 1920px.
2 - Посмотрите на атрибут srcset и выберите изображение, соответствующее значению из (1).
На красивом большом экране с окном во всю ширину браузер выбирает значение sizes 1920px. Это указывает браузеру на изображение, помеченное 1920w в атрибуте srcset, с URL-адресом вашего полноразмерного изображения.
На портретный iPad, где окно просмотра имеет ширину 768px, значение, полученное в (1), будет 100vw, которое для этого окна просмотра равно 768px. Просматривая srcset для 768w, мы получаем URL-адрес размера изображения medium_large (новый размер по умолчанию в WP4.4, который не отображается в интерфейсе администратора).
Если нет точного соответствия ширине окна просмотра, браузер должен выбрать следующий размер.
Теперь есть обстоятельства, при которых вам может потребоваться предоставить более длинный список изображений, которые вы можете добавить использование add_image_size() в вашей теме. WP создаст атрибут srcset, используя все изображения, соответствующие соотношению сторон выбранного вами размера изображения.
Также бывают обстоятельства, когда вам нужен пользовательский атрибут sizes, и вы можете отфильтровать атрибут для этого, но, поскольку ваш вопрос стоит, я не думаю, что это то, что вам нужно.
С одной стороны, вам ничего не нужно делать, с другой стороны, wordpress на самом деле не создает отзывчивые изображения.
Wordpress создаст атрибуты srcset всякий раз, когда вы используете API, связанные с изображениями, на основе зарегистрированных размеров изображений, со всеми изображениями, которые соответствуют соотношению сторон. Что вам нужно сделать, так это зарегистрировать соответствующие размеры изображений, чтобы wordpress мог генерировать изображения и использовать их в srcset.
В вашем "неудачном" примере полный изображения никогда не будут отзывчивыми, так как wordpress не будет генерировать изображения, которые больше исходного изображения (и в любом случае сложно закодировать генерацию изображений для размера, который меняется от одного изображения к другому).
Что вам нужно сделать в вашей теме, так это решить, какие размеры вы хотите поддерживать, и определить их в первую очередь. например, если вы хотите, чтобы миниатюра размером 150x150 также отображалась на сетчатке x2, вам нужно будет зарегистрировать как размер 150x150, так и размер 300x300. Если на мобильном телефоне вы выделите пространство 50x50 для миниатюры, затем вам также нужно будет зарегистрировать размеры 50x50 и 100x100 (для сетчатки), не уверен, что это разумно на практике, но такова теория.
Напыщенная речь: Называть то, что делает ядро wordpress, функцией - оскорбление интеллекта. Это подсластитель, который поможет вам избежать многих вызовов API, но он не поможет вам на самом деле определить, какой размер вам действительно нужен, и все равно будет утомительно настраивать wordpress для их использования.
Вы можете использовать массив в качестве размера:
wp_get_attachment_image( get_custom_header()->attachment_id, array('700', '600'));
РЕДАКТИРОВАТЬ:
@downvoter скажите, почему вы голосуете против. Я согласен, что был в некотором роде неправ, но вы могли бы сказать: "Да, вы можете использовать массив для определения размера изображения, НО по умолчанию он будет иметь только ближайший размер к определенному размеру изображения.
Определенные изображения либо задаются в разделе "МУЛЬТИМЕДИА" в разделе "НАСТРОЙКИ"-> "МУЛЬТИМЕДИА" в бэкэнд-администраторе, это будут "миниатюры", "средние" и "полные", ЛИБО с помощью пользовательского использования, и вы можете использовать add_image_size('name-you want-use', 340, 230, true); в вашем файле функций и т. Д. и т. Д.