Я создал нестандартные размеры изображений в WordPress для использования с плагином отзывчивых изображений, установленным WordPress по умолчанию. Размеры изображений, которые я добавил:
add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);
add_image_size('portrait-case-study-md', 415, 622, true);
Затем я собираю изображения из PHP с помощью плагина metabox.io и устанавливаю загруженное изображение для отображения как Portrait-Case-Study-LG. Затем я загружаю srcset, используя функцию из metabox.io, и я создал свои собственные размеры, где я хочу, чтобы изображения менялись.
$images = rwmb_meta('su_project-featured-portrait-left', array('limit' => 1,
'size' => 'portrait-case-study-lg'), $post->ID);
<a href="<?php echo $image['full_url']; ?>" itemprop="contentUrl" data-size="<?php echo $image['width']; ?>x<?php echo $image['height'];?>">
<img class="scene_element scene_element--fadeinup" src="<?php echo $image['url']; ?>" srcset="<?php echo esc_attr($image['srcset']); ?>"sizes="(max-width:40em) 767px, (min-width: 40.063em) and (max-width: 64em) 455px, (min-width: 64.063em) and (max-width: 90em) 455px, (min-width: 90.063em) 505px, 100vw" itemprop="thumbnail" alt="Image description" >
</a>
Результат выглядит так:
<img class="scene_element scene_element--fadeinup"src="http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-505x757.jpg" srcset="http://localhost:8888/wp-
content/uploads/2017/11/chelsea-sw3-apartment-bedroom-300x200.jpg 300w,
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-768x512.jpg 768w, http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-1024x683.jpg 1024w,
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-355x238.jpg 355w, http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-955x637.jpg 955w,
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-940x627.jpg 940w" sizes="(max-width:40em) 767px,
(min-width: 40.063em) and (max-width: 64em) 455px,
(min-width: 64.063em) and (max-width: 90em) 455px,
(min-width: 90.063em) 505px, 100vw" itemprop="thumbnail" alt="Image
description">
У меня проблема в том, что теперь он загружает ландшафтное изображение с шириной и высотой 768×512 вместо загрузки изображения 505×757. Кто-нибудь может мне помочь? Я очень плохо знаком с адаптивными изображениями, и когда мне показалось, что я его взломал. Затем он начинает выбирать неправильное изображение 🙁
Заранее спасибо.
Я взломал это. Я не добавлял нестандартные размеры изображений в набор WordPress 🙂
Других решений пока нет …