Tamanhos responsivos personalizados da “imagem destacada”

Minha página inicial tem um carrossel de “imagens em destaque (miniaturas)” das postagens. O carrossel usa cerca de dois terços da largura da canvas e o Google Page Speed ​​Analyzer reclama que minhas imagens são muito grandes.

O que eu gostaria de inserir no meu código de carrossel bootstrap seria algo como:

Oysters at A-fusion 

Não tenho certeza sobre o elemento de tamanhos.

Estou tentando resolver isso declarando tamanhos de imagem personalizados

 /* 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 ); 

Meu primeiro problema é que, no entanto, eu costumo executar miniaturas regeneradas. Não obtenho esses tamanhos (embora vejo imagens do tamanho 400, que uso em outros lugares).

A regeneração da imagem começou a funcionar de repente! O código a seguir cria a tag 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'); } 

Isso obtém o $ post_id corretamente, mas resulta em

 restaurant-breda-amsterdam-1 

Este é um problema real, pois está usando a versão original (grande) da imagem.

No entanto, e em alguns casos eu recebo

 Oysters at A-fusion 

Claramente, este srcset vai ser valioso para mim e – tanto quanto eu sei – está sendo gerado pelo wordpress em vez de um plugin. Mas isso acontece apenas para algumas postagens e com tamanhos inúteis.

Como posso obter um conjunto de src com meus dois tamanhos personalizados?

Solutions Collecting From Web of "Tamanhos responsivos personalizados da “imagem destacada”"

Primeiro, não tenho certeza de por que você precisa envolver a class wpdb apenas para criar a tag img. Se você quiser obter a imagem em destaque, você pode usar as funções do WordPress get_the_post_thumbnail() e the_post_thumbnail() que permitem que você especifique o tamanho registrado e deseja retornar a marcação da seguinte forma:

 // 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' ); 

A partir daí, você tem dois ganchos diferentes para personalizar essa marcação:

  • filtro wp_calculate_image_srcset
  • filtro wp_calculate_image_sizes

Aqui está um exemplo de usar 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 ); 

e aqui está um exemplo de usar 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 ); 

Isso deve dar-lhe uma vantagem, mas, obviamente, você terá que ajustar isso até que você obtenha a marcação que você procura com seus tamanhos de imagem e pontos de interrupção personalizados. Aqui estão mais alguns resources que devem ajudar: