Home » WordPress » Como adicionar tamanho de imagem personalizado ao WordPress e blocos WordPress (imagem, galeria)

Como adicionar tamanho de imagem personalizado ao WordPress e blocos WordPress (imagem, galeria)

Se você estiver construindo um site WordPress personalizado, você pode ter a necessidade de adicionar um tamanho de imagem personalizado. Isso não é nada difícil, e eu lhe mostrarei como fazer isso.

Há, no entanto, um senão – apenas adicionando novos blocos WordPress de tamanho de imagem não lhe permitirá selecionar esses tamanhos de imagem em Image, Gallery ou outros blocos editor do WordPress Gutenberg. Portanto, hoje vou lhe mostrar todos os passos necessários para utilizar plenamente estes novos tamanhos de imagem. Aqui está o que você aprenderá a fazer:

O exemplo que vou mostrar a vocês foi adicionado ao tema Amostra de Gênesis. Mas deve funcionar em todos os temas do WordPress. Vamos começar com o primeiro passo.

Como adicionar um novo tamanho de imagem no WordPress

A adição de um novo tamanho de imagem no WordPress leva apenas uma linha de código. O que você precisa fazer é ir para Appearance >> Editor de Arquivo Temático no painel de administração do WordPress, e abrir funções de arquivo .php.

Vá até o fundo do arquivo, e adicione uma linha de código:

add_image_size( 'custom-550', 550, 500, true );

O que esta linha significa:

  • custom-550 é um exemplo de novo nome de tamanho de imagem. Você pode usar qualquer nome que quiser.
  • 550 no exemplo é a nova largura da imagem em pixels.
  • 500 no exemplo é a nova altura da imagem em pixels.
  • o último – verdadeiro, mostra que a nova imagem tem que ser cortada. Portanto, mesmo que a nova imagem seja construída a partir da imagem vertical, este novo tamanho precisa ser recortado para aquele tamanho específico que você inseriu.

Você pode usar quaisquer números e nomes que precisar.

Mais informações sobre a função add_image_size podem ser encontradas na documentação do WordPress.

Após adicionar esta linha às funções do seu tema do WordPress (ou ainda melhor – tema infantil).php e salvar alterações, o novo tamanho personalizado está pronto para uso em temas e plugins. Mas não é isso – precisamos de mais dois passos para ter certeza de que podemos usar a imagem nos blocos do WordPress.

Próximo passo – para gerar as imagens reais para aquele tamanho de imagem personalizado.

Como gerar novos tamanhos de imagem ou regenerar todas as imagens no WordPress

Uma vez adicionado um novo tamanho de imagem personalizado no WordPress, você também deve gerar novas imagens de tamanho para arquivos de mídia já carregados – o WordPress não gera todas as imagens automaticamente uma vez que você adicione um novo tamanho de imagem personalizado.

Para gerar novas imagens de tamanho no WordPress, vá para Plugins >> Add New, e digite regenerar as miniaturas na caixa de busca no topo. Escolha Regenerar miniaturas do plugin e Instale Agora.

generate new image sizes in wordpress

Uma vez instalado e ativado o plugin, vá em Ferramentas >> Regenerar Miniaturas, e clique em Regenerar Miniaturas para Todos os Anexos.

how to generate new size images in wordpress

Dependendo da velocidade de seu servidor, tamanho da imagem e número total de imagens, pode levar de poucos segundos a minutos. Uma vez feito isso, você pode ir para a etapa final – para garantir que o novo tamanho da imagem apareça nos blocos do WordPress.

Como adicionar tamanhos de imagem personalizados aos blocos do WordPress – Imagem, Galeria, e outros

Após adicionar um novo tamanho de imagem e gerar novos tamanhos de miniaturas você pode pensar que um novo tamanho de imagem também estará disponível no editor de blocos do WordPress. Mas, na verdade, ainda não será visível. O novo tamanho de imagem precisa ter um título para aparecer nos blocos de Gutenberg.

Para adicionar o tamanho da imagem ao bloco, vá para Appearance >> Editor de Arquivos Temáticos e abra novamente o arquivo functions.php, e adicione este código na parte inferior:

add_filter( 'image_size_names_choose', 'imakeitwork_image_sizes' ); 
function imakeitwork_image_sizes($sizes) {
    return array_merge($sizes, array(
        'custom-550' => __('ImakeITwork image size')
    ));
}

Certifique-se de substituir custom-550 pelo mesmo nome de tamanho de imagem que você usou na função add_image_size_size sobre a qual eu escrevi anteriormente. E fique à vontade para substituir o tamanho da imagem ImakeITwork pelo título que você deseja que apareça nos blocos do WordPress.

add custom image size to wordpress image and gallery blocks

Após adicionar a função addimagesize e o filtro imagesizenames_choose você poderá usar um novo tamanho de imagem em qualquer bloco do WordPress que permita selecionar o tamanho da imagem – como Gallery e Image block.

Fathom analytics