Intereting Posts
wp_create_user неправильно вводит пароль перерегистрировать пользовательский тип сообщения с настраиваемыми возможностями Использование пользовательской таксономии при регистрации нового настраиваемого типа сообщений Имеет ли WordPress счетчик посещений? Добавление полезных тем в темы У меня есть таблица, которую я создал, как я могу сделать форму для фильтрации данных? Умышленное принудительное сбой Вход в систему WordPress как я могу ссылаться на страницу подменю «Подключаемый модуль» после обработки форматирования Как вставить CSS в функцию? Спецификация сервера Когда я вставляю медиа из библиотеки в сообщение, могу ли я затем безопасно удалить этот носитель? Можно ли использовать $ _SERVER ? Какие функции включены в apply_filter ('the_content') Обнаружение, если плагин был включен в определенную страницу Добавить тэг таксономии типа публикации в класс статьи

Пользовательский отзывчивый размер «показанного изображения»

На моей домашней странице есть карусель изображений с изображениями (уменьшенных изображений). Карусель использует примерно две трети ширины экрана, а Google Page Speed ​​Analyzer жалуется, что мои изображения слишком велики.

То, что я хотел бы вставить в свой код бутстрапа карусели, будет примерно таким:

<img src="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion.jpg" class="attachment-front_page_lg size-front_page_lg wp-post-image" alt="Oysters at A-fusion" srcset="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-525x270.jpg 525w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-420x320.jpg 420w" sizes="66vw" /> 

Я не совсем уверен в элементе размеров.

Я пытаюсь решить это, объявив размер пользовательских изображений

 /* Image Sizes Large : 525 x 270 iPhone6 210 * 180 and then 2x that? */ add_image_size( "card", 400, 400, false ); add_image_size( "front_page_sm", 420, 360, true ); add_image_size( "front_page_lg", 520, 270, true ); 

Моя первая проблема заключается в том, что, хотя я часто запускаю регенеративные миниатюры, я не получаю эти размеры (хотя я вижу изображения размером 400, которые я использую в другом месте).

Регенерация изображений внезапно начала работать! Следующий код создает тег img

 function getFeaturedImage($resto) { global $table_prefix; global $wpdb; $query = "..."; $queryResult = $wpdb->get_results($query); $post_id = $queryResult[0]->post_id; return get_the_post_thumbnail($post_id, 'front_page_lg'); } 

Это действительно правильно задает $ post_id, но приводит к

 <img width="405" height="270" src="//localhost:3000/wp-content/uploads/2016/10/Restaurant-Breda-Amsterdam-1.jpg" class="attachment-front_page_lg size-front_page_lg wp-post-image" alt="restaurant-breda-amsterdam-1" /> 

Это настоящая проблема, поскольку она использует оригинальную (большую) версию изображения.

Однако, и в некоторых случаях я получаю

 <img width="270" height="270" src="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion.jpg" class="attachment-front_page_lg size-front_page_lg wp-post-image" alt="Oysters at A-fusion" srcset="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion.jpg 768w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-150x150.jpg 150w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-500x500.jpg 500w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-400x400.jpg 400w" sizes="(max-width: 270px) 100vw, 270px" /> 

Ясно, что этот srcset будет для меня ценным и, насколько мне известно, генерируется wordpress, а не плагином. Но это происходит только для нескольких сообщений и с неиспользуемыми размерами.

Как я могу получить набор src с двумя своими пользовательскими размерами?

Solutions Collecting From Web of "Пользовательский отзывчивый размер «показанного изображения»"

Во-первых, я не совсем уверен, зачем вам привлекать класс wpdb только для создания тега img. Если вы хотите получить get_the_post_thumbnail() изображение, вы можете использовать функции WordPress get_the_post_thumbnail() и the_post_thumbnail() которые позволяют вам указать зарегистрированный размер, который вы хотите, и вернуть разметку следующим образом:

 // In the loop: the_post_thumbnail( 'front_page_lg' ); // echos the markup // Outside the loop: $img_markup = get_the_post_thumbnail( $post->ID, 'front_page_lg' ); 

Оттуда у вас есть два разных крючка для настройки этой разметки:

  • Фильтр wp_calculate_image_srcset
  • Фильтр wp_calculate_image_sizes

Вот пример использования wp_calculate_image_srcset :

 function wpse_custom_image_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ){ $w = 768; // setup a custom width here, repeat below for as many custom widths as you want, linking to your URL $sources[$w] = array( 'url' => 'myfolder/myimage.jpg', 'descriptor' => 'w', 'value' => $w, ); return $sources; } add_filter( 'wp_calculate_image_srcset', 'wpse_custom_image_srcset', 10, 5 ); 

и вот пример использования wp_calculate_image_sizes :

 function wpse_post_thumbnail_sizes_attr( $attr, $attachment, $size ) { //Calculate Image Sizes by type and breakpoint if ($size === 'front_page_lg') { $attr['sizes'] = '(max-width: 768px) 92vw, (max-width: 992px) 450px, (max-width: 1200px) 597px, 730px'; } return $attr; } add_filter( 'wp_get_attachment_image_attributes', 'wpse_post_thumbnail_sizes_attr', 10 , 3 ); 

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