Intereting Posts
Почему WordPress ограничивает количество попыток pingbacks за сообщение? The_post_thumbnail без srcset? Как изменить частоту архива медиафайла в папке uploads для wordpress blog Переводы, не возвращающие переведенные строки author.php показывает профили всех пользователей, а не только авторов WordPress (класс wpdb) и хранимые процедуры mysql Плагин расширенных настраиваемых полей: как использовать флажок, чтобы сообщение отображалось в желаемой «зоне»? Помощь Определить источник кэширования почему эти правила rewrite_tags и правила не работают? Сжатие JS и CSS Как мы можем получить идентификатор автора по имени Как запросить пользовательский тип сообщения на два термина? WordPress.com Like Button Экспортировать персонализированные сообщения типа Post со всеми настраиваемыми полями и пользовательской Texonomy, связанной с ним Тип пользовательского сообщения WordPress Повторение 404 ошибок

Я хочу разный размер эскиза в зависимости от размера медиа

У меня есть следующий код на моей домашней странице

<?php echo '<img class="img-responsive" src="', wp_get_attachment_image_src( get_post_thumbnail_id(), 'Large' )[0], '">'; ?> 

Большие размеры в этом случае – 1920×245. Это прекрасно работает в браузере, но когда изображение уменьшается на меньших экранах, оно слишком тонкое для моего вкуса. Я хотел бы использовать изображение с другим соотношением сторон в этом сценарии.

Как настроить указанный выше PHP-код, чтобы он реагировал на размер носителя?

Solutions Collecting From Web of "Я хочу разный размер эскиза в зависимости от размера медиа"

Вы можете использовать функцию [wp_calculate_image_srcset()][1] , вспомогательную функцию, чтобы вернуть значение атрибута srcset для идентификатора изображения, различные размеры должны существовать, иначе функция возвращает false.

Вот как выглядит ссылка с srcset,

 <img class="alignnone size-full wp-image-122491 " src="http://example.com/wp-content/uploads/2016/03/C0101-012.jpg" alt="C0101-012" width="2000" height="1200" srcset="http://example.com/wp-content/uploads/2016/03/C0101-012.jpg 2000w, http://example.com/wp-content/uploads/2016/03/C0101-012-656x394.jpg 656w, http://example.com/wp-content/uploads/2016/03/C0101-012-1024x614.jpg 1024w, http://example.com/wp-content/uploads/2016/03/C0101-012-1080x648.jpg 1080w" sizes="(max-width: 2000px) 100vw, 2000px" /> 

С помощью srcset браузер выполняет работу по выяснению, какой образ лучше всего. В браузерах без поддержки srcset значение атрибута src будет использоваться как изображение изображения src изображения (основная поддержка srcset для браузера).

Вот небольшой пример, мне нужно было добавить случайное изображение большого сечения и создать новый атрибут для этого изображения. Средства из общего массива, я упрощаю все в одной функции,

 function enqueue_front_page_srcset_js(){ $random_array = array('id'=>'1234', 'url'=>'http://example.com/wp-content/uploads/2016/03/C0948b-162.jpg', ...); $random_key = array_rand($images_array, 1); $random_image = $images_array[$random_key]; $size_array = array(array(656, 394), array(1024, 614),array(1080, 648)); $image_src = $random_image['url']; $image_meta = wp_get_attachment_metadata( $random_image['id'] ); $img_srcset = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $random_image['id'] ); wp_register_script( 'brozzme-random-image', get_stylesheet_directory_uri() . '/js/jquery.b7e.random.image.js', array( 'jquery' ), false, true ); wp_localize_script( 'b7e-random-image', 'randomImage', array( 'newSrc'=> $image_src, 'randomSrcset'=> $img_srcset ) ); wp_enqueue_script('b7e-random-image'); } add_action('wp_enqueue_scripts', 'enqueue_front_page_srcset_js'); 

Сценарий jQuery

 jQuery(document).ready(function ($) { var newSrc = randomImage.newSrc; var newSrcset = randomImage.randomSrcset; $( ".et_pb_fullwidth_image_0 img" ).attr( "src", newSrc ); $( ".et_pb_fullwidth_image_0 img" ).attr( "srcset", newSrcset ); }); 

Надеюсь, поможет!

Как это часто бывает (с моими вопросами в любом случае!), Ответ прост. Я добавил параметр минимальной высоты в 85 пикселей к стилю для изображения, и он обрезает изображение, когда оно достигает этой высоты. Именно такое поведение я хотел.

 .img-responsive{ display:block; max-width: 100%; height:auto; min-height: 85px; }