Thumbnail Responsivo

  • Resolvido laranjaldojari

    (@laranjaldojari)


    9 anos, 2 meses atrás

    A minha dúvida aparentemente parece ser muito simples mais estou quebrando a cabeça para resolver.

    Na minha front-Page.php onde fica o conteúdo principal do meu site tem um espaço para destacara as 4 últimas notícias. Elas estão em colunas na versão desktop e na versão mobile ficam uma em baixo da outra.

    Preciso que essas imagens independente do tamanho originais delas fiquem na mesma proporção e se ajustem conforme a resolução do dispositivo.

    Estou usando o bootstrap 3.5.5.

Visualizando 1 resposta (de um total de 1)
  • Criador do tópico laranjaldojari

    (@laranjaldojari)

    9 anos, 2 meses atrás

    Então depois de muito procurar encontrei o que precisava.
    Meu tema é feito utilizando o Bootstrap 3.5.5 e dentro da função que chama o thumbnail do post adicionei a clase ‘img-responsive’:

    <?php
the_post_thumbnail('thumbnail',array('class'=>'img-responsive'));
//img-responsive é uma classe do Bootstrap
?>

    O passo seguinte foi aumentar o tamanho do thumbnail, essa foi a parte mais fácil, fui em > Configurações > Mídia, e definir o tamanho que precisava, no meu caso em 700 x 450 e marquei a opção [X] Recortar a miniatura nas dimensões exatas (normalmente as miniaturas são proporcionais).
    Fiz isso para que conforme o layout se ajuste a resolução do dispositivo a imagem não sofra com perda de qualidade.

    Pronto, espero que esse artigo posso ajudar outros desenvolvedores.

    Inté+!

Visualizando 1 resposta (de um total de 1)
  • O tópico ‘Thumbnail Responsivo’ está fechado para novas respostas.