/ / Tamanho da imagem em miniatura não está funcionando - html, css, wordpress, imagem, shortcode

Tamanho da imagem em miniatura não funciona - html, css, wordpress, imagem, shortcode

Estou criando um plug-in de depoimento onde é possível consultar as postagens personalizadas em um código curto. Preciso criar uma galeria de miniaturas onde as imagens sejam responsivas. Aqui estão os códigos primeiro:

add_image_size("rwpt_thumb", 150, 150, true);

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "rwpt_thumb" );
$url = $thumb["0"];
$idd = get_the_ID();
$return_string .= "<li class="rwpt_".$idd.""><a href=" "><img src="/images/".$url."" alt="".$client." - ".$client_info."" /></a></li>";

Onde o <li> width é 20% de seu contêiner. portanto, se eu obtiver o tamanho da imagem cortada 150 * 150 px, defino o CSS img width:100%;height:auto; então a imagem é responsiva. Mas não obtenho o tamanho da miniatura 150 * 150.

Alguma sugestão por favor?

Respostas:

1 para resposta № 1

Várias coisas podem estar acontecendo:

  • Sua imagem original é menor que 150x150. O WordPress não aumentará suas imagens além do tamanho original.
  • Você está tentando redimensionar imagens retrospectivamente. Se você não adicionou esse tamanho de imagem antes de enviar uma imagem, suas imagens não serão redimensionadas. Se você deseja regenerar todas as suas miniaturas, há um plugin para isso.
  • Você mencionou que o <li> é 20% do contêiner. Qual é a largura em pixels? Se estiver abaixo de 150, o problema será seu. Se você estiver usando o Chrome, poderá inspecionar o elemento (clique com o botão direito do mouse no <li>) e fornecerá a largura do pixel, mesmo que seja definido como uma porcentagem.

Além disso, verifique qual é o tamanho da miniatura. Se você inspecionar o elemento na imagem, verá dois tamanhos nas Ferramentas do desenvolvedor: o tamanho em que está na tela e o tamanho original. Se o tamanho original for 150x150 então você sabe que é um problema de estilo. Se não, então você sabe que é um problema de configuração / WordPress.