MENU It's me: Mário!

Thumbnails Wordpress

Como usar imagens em diferentes tamanhos nos temas WordPress

WordPress 04 de dezembro de 2013 12 comentários
WordPress
  • 04 - 12 - 13
  •        
  • 12

Opa! Tudo bom?

Muitas vezes estamos criando nossos temas para WordPress ou simplesmente modificando algum que já gostamos e precisamos inserir uma imagem em algum lugar do tema. Contudo essa imagem tem que ser gerada automaticamente, logo pensamos em criar um “tamanho de imagem” específico para aquele lugar no tema.

 

E fazer isso é bem mais simples do que você imagina… Vamos lá?

 Criando um “Tamanho de Imagem”

As imagens no WordPress vem em 3 tamanhos padrão que você pode conferir em Configurações > Mídia.

Tamanhos padrão de corte das imagens no WordPress

Além desses tamanhos que já vem, podemos criar novos tamanhos com a função add_image_size. Mas antes de aprender isso, vamos aprender como habilitar o tamanho post-thumbmnails ou miniatura de posts ou imagem destacada.

Habilitando Post Thumbnails

Sabe aquelas miniaturas (ou, como temos na versão pt_BR, Imagem Destacada) dos posts?

Fica ali no canto, abaixo da caixa de escolha de Tags, com o título Imagem Destacada e você pode escolher uma clicando em “Usar uma Imagem Destacada” ou alterar a atual clicando nela.

Para que serve? Basicamente é a imagem de “capa” do post/artigo e que não aparece no corpo do texto. Muito útil para temas como o nosso que usam slides ou caixas para destaque delas ou aqueles temas que vêm com a miniatura do artigo ao lado do título. Conhece algum? Deixe nos comentários  nome…

E como ativar isso dai?

Basta ir no functions.php do seu tema e acrescentar:

add_theme_support( 'post-thumbnails' );

Simples né? Criar tamanhos de imagens então… nível monkey =D

Agora sim!
Criando um tamanho de imagem personalizado no WordPress

Do mesmo jeito que você ativou os post-thumnails no seu tema! Vá no functions.php e digite o código:

add_image_size( $name, $width, $height, $crop );

Sendo os parâmetros:

$name

É uma string obrigatória e serve para indicar o nome do novo tamanho de imagem.

$width

É um inteiro opcional e serve para indicar a largura da imagem do novo tamanho. Default: 0

$height

É um inteiro opcional e serve para indicar a altura da imagem do novo tamanho. Default: 0

$crop

É um booleano (não sabe o que é isso?) ou uma array opcional. Indica se a imagem deve ser cortada (true) ou não (false). Caso você queira cortar e ainda indicar a posição do corte, você usa a array e não o booleano true, dessa forma, se quiser cortar as imagens a partir do cando direito inferior o valor desse parâmetro ficaria assim: array(‘right’, ‘bottom’). Os valores aceitos são: left, center e right para o corte no eixo X e top, center e bottom para o corte no eixo Y.

Veja alguns exemplos:

// Vai cortar a imagem para exatamente 600 px de largura por 400 px de altura.
add_image_size( 'imagem-do-slide', 600, 400, true );

// Vai gerar uma imagem com 300 px de largura e altura proporcional sem distorcer nada.
add_image_size( 'foto-do-autor', 300, 0);

Nomes de Tamanhos Reservados

Nem tudo são flores… você não pode usar alguns nomes reservados para os novos tamanhos de imagem.

São eles: thumb, thumbnail, medium, large e post-thumbnail.

Lembrando que thumb e thumnail são apenas alias, sendo a mesma coisa.

Maaaas… WordPress é uma mãe! Então se você precisar, pode usar essas palavras juntamente com outras:

add_image_size( 'thumbnail-of-category', 500, 500, true );
add_image_size( 'medium_menu', 400, 0, false);

Como usar esses novos tamanhos de imagem?

Para usar as Imagens Destacadas com seus tamanhos de imagem personalizados no seu tema, basta escrever o nome no seu código, quando necessário, por exemplo:

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'seu-tamanho-personalizado' );
}

Ou então… você pode tornar isso visível na administração do site (na hora de inserir num post, por exemplo), acrescentando na array do tamanho padrão. Para isso, use o hook image_size_names_choose escolhendo um nome legal:

add_filter( 'image_size_names_choose', 'meus_tamanhos' );
function meus_tamanhos( $sizes ) {
    return array_merge( $sizes, array(
        'seu-tamanho-personalizado' => 'TESTE'
    ) );
}

Fiz tudo e não deu certo!

Calma, jovem gafanhoto…

O WordPress corta as imagens após o upload. Se você criou um tamanho de imagem e quer utilizá-lo em imagens antigas, vai precisar gerar novamente essas imagens.

E temos um plugin para isso:

Regenerate Thumbnails

Esse plugin gera novamente as miniaturas para os formatos de imagem personalizados (e padrão também) do WordPress. Isso é uma mão na roda se você mudou algo em Configurações > Média ou se criou um tamanho novo de imagem.

Fonte:  https://codex.wordpress.org/Function_Reference/add_image_size

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



Não se preoculpe, não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


Deixe seu comentário! Dúvida sobre como comentar
ou vai postar código? Leia antes.

  • Álefe

    Ótimo Artigo, me ajudou muito novamente, hehe!

  • Davi Menezes

    Nem to acreditando q achei esse post, eh 06:42 estava lendo no site pra não dormir e pimba! Encontrei por acaso a resposta que procurava a dias para uma coisa que nem sabia q podia ser feita hhahaha internet como te amo hahaha . vlw Mario

    • Opa! Que massa Davi!
      Fico feliz que ajudei e cara… dá pra fazer tudo com WordPress ;)
      (Dá uma relida aqui porque estava com um erro de diagramação na parte “Criando um tamanho de imagem personalizado no WordPress”, pode ser que talvez tenha passado uma parte do texto despercebida);

      • Davi Menezes

        O parametro da função add_theme_support deve ter este nome ‘post-thumbnails’ ou deve ser o nome personalizado?

        • add_theme_support serve para adicionar algumas funcionalidades ao seu tema, no caso, “post-thumbnails” é o nome da funcionalidade. Há outras: https://codex.wordpress.org/Function_Reference/add_theme_support

          Você não usa isso para adicionar tamanhos personalizados de imagens. :D

          • Davi Menezes

            Humm certo hahaha. Blz. Quero que apareça no painel ADM para ser configurado um tamanho para esse novo tamanho. Fiquei na duvida se eh com add filter q faz isso, pq coloquei esse add filter (acima) e entrou em loop infinito

            • Cara, mil desculpas!
              Tinha um erro no código, mas já arrumei, dá uma relida e vai funcionar ;)

              (ah! lembrando que não aparece em “Configurações => Mídia”)

  • João Victor

    Quando ocorre o corte na imagem para dimensionar, ele corta centralizado, e se eu quiser cortar a partir do topo? Como deve ficar o código?

    • João, basta usar o parâmetro $crop .
      Quando escrevi o artigo eu não citei essa possibilidade, mas acabei de editar o texto ensinando como fazer, dá uma conferida lá… abraços!

  • odirlon

    Oi! Primeiramente porque parou de escrever no site?
    Segundamente :D
    Gostaria de saber se vc conhece alguma função diferente dessa. Sabe porque?
    Estou trabalhando para um cliente que possui um site de notícias, esse site, possui várias áreas ( slide de destaques, noticias laterais, notícias em listas, blogs, etc… )
    Meu problema é que cada imagem mando para o wordpress, ele cria umas 7 miniaturas, bem pouco espaço vai usar, mas isso daqui 6 anos? já tem 4 :| daqui 6 anos terá 10 e mais um monte de imagem :D

    Em um projeto estou usando o aq_resizer, porém ele não corta imagens menores que o tamanho setado, o timthumb cortava, era perfeito, mas depois de ler o desenvolvedor pedindo pra não usar, usei nativamente, até porque o photon do jetpack… ( se uma solução que use o photon tb ia ser foda! )

    Se o aq_resizer tivese um esquema com o photon, ou o photon um esquema de recorte direto no cdn deles a partir da original, pqp ia ser foda.

    Um abraço.

    • Olá, Odirlon, tudo bem?
      Estou escrevendo menos por questão de tempo mesmo. Infelizmente.
      Além disso, todo o conteúdo de WordPress daqui vai migrar para um novo site (mais notícias em breve… haha)

      Respondendo seu segundamente, a questão é que o WordPress (e essa função) cortam as imagens para facilitar sua vida (pra você não ter que cortar manualmente várias imagens para vários propósitos no seu site), a vida da sua hospedagem (economiza banda) e do seu usuário (economiza banda e melhora a performance). Imagine que seu site mostra imagens grandes e pequenas. Se toda vez seu tema chamasse a imagem em tamanho grande lá se vai a banda e performance no front-end.

      Então como equilibrar? Bem… sugiro pegar o site e escolher uns 3 tamanhos/proporções diferentes, inclusive, você pode alterar a dimensão dos tamanhos que já são usados pelo WordPress e assim evita que se criem vários arquivos. Aí depois é só CSS na hora de mostrar no site. Não tem problema uma imagem um pouco maior do que o tamanho que será mostrado ser carregada, o problema é uma imagem ter, por exemplo, 1900×600 e ser carregada numa miniatura de tamanho 95×30 ou usar imagens de proporções diferentes em lugares diferentes.

      Abraços