MENU Mário Valney

Como usar imagens em diferentes tamanhos nos temas WordPress

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

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 preocupe: 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.