Menu

Como criar tamanhos de imagem adicionais no WordPress

Tutorial traduzido do site – http://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/

Neste artigo vamos mostrar como adicionar tamanhos de imagem adicional no WordPress.

WordPress tem uma funcionalidade nativa para usar images em miniaturas. Há também um a função nativa add_image_size() que permite que você especifique tamanhos de imagem e dar-lhea opção de recorte. Usando estas funções básicas em seu tema pode essencialmente eliminar a necessidade de um script de terceiros, como TimThumb na maioria dos casos.

Registrando tamanhos de imagem adicionais para o seu tema

Você terá que começar adicionando o suporte de miniaturas colocando o seguinte código no seu arquivo functions.php:

Uma vez que você habilitar o suporte para miniaturas, agora você pode usar a funcionalidade de registro de tamanhos de imagem adicional com a função add_image_size(). O uso da função add_image_size é assim:
add_image_size (‘nome-do-tamanho, largura, altura, recorte);

Abaixo um exemplo do uso da função:

Agora, se você observar, temos três tipo diferente de tamanhos de imagem. Cada um tem diferentes modos tais como Hard Crop Mode, Soft Crop Mode, e Unlimited Height Mode. Então vamos ver sobre cada exemplo e como e quando você pode usá-los.

Hard Crop Mode – Como você observa, há um valor “verdadeiro”, acrescentado depois da altura. O valor verdadeiro diz para o WordPress para cortar a imagem para o tamanho que temos definido (neste caso 120 x 120px). Este é o método que usamos muito em nossos projetos de tema para se certificar que tudo é proporcional e não “quebre” nosso layout. Esta função irá automaticamente cortar a imagem ou a partir dos lados ou a partir da parte superior e inferior, dependendo do tamanho. A desvantagem de recorte é que você não pode controlar qual parte da imagem é exibida.

Correção por Mike Little – Quando você tiver feito o upload de uma imagem e antes de inserir no post, você pode clicar em “editar imagem” e a partir daí mudar a miniatura ou o toda a imagem, escala, girar ou inverter a imagem, e para a miniatura selecionar a parte exata da imagem que você deseja.

Soft Crop Mode – Este modo está ativo por padrão é por isso que você não vê qualquer valor adicional após a altura. Este método redimensiona a imagem proporcionalmente sem distorcê-la. Então você não pode ter as dimensões que você queria. Normalmente, ela corresponde à dimensão de largura e as alturas são diferentes com base na proporção de cada imagem. Veja um exemplo:

Unlimited Height Mode – Há momentos em que você tem imagens grandes que deseja usar em seu projeto, mas você quer ter certeza de que a largura é limitada. O principal uso que encontramos para este tipo de tamanho da imagem é em posts de infográfico. Infográficos tendem a ser muito longo e cheio de informações. Hard Crop Mode em uma página com um post único não é uma ótima idéia. Mas por natureza infográficos são mais largos do que a largura de conteúdo. Então o que você pode fazer é especificar uma largura que não vai quebrar o seu projeto, deixando a altura a ser ilimitado, para que todos infográfico pode ser mostrado sem qualquer distorção. Veja um exemplo:

Exibindo tamanhos de imagem adicionais em seu tema WordPress

Agora que você adicionou a funcionalidade para os tamanhos de imagem desejada vamos dar uma olhada em como exibi-las em seu tema WordPress. Abra o arquivo de tema em que deseja exibir a imagem e cole o seguinte código:

Nota: Este trecho de código deve ser colado dentro do loop post.

Isso é tudo o que você realmente tem que fazer para mostrar o tamanho de imagem adicional em seu tema WordPress. Você provavelmente deve envolvê-la por aí com o estilo que se adapta à sua necessidade.

Regenerando tamanhos adicionais de imagem

Se você não está fazendo isso em um site novo, então você provavelmente terá de se regenerar miniaturas. O jeito que a função add_image_size forma () funciona somente a partir do ponto em que foi adicionado no tema. Assim, todas as imagens que foram adicionadas depois da inclusão desta função não terá o novo tamanho. Então o que precisamos fazer é regenerar o tamanho da imagem nova para imagens dos velhos post. Isto é facilitado pelo plugin chamado Thumbnails Regenerate. Uma vez que você instalar e ativar este plugin, uma nova opção é adicionada no menu: Ferramentas » Regen. Thumbnails.

Clique no icone Regenerate Thumbnail e aguarde o plugin fazer o trabalho dele.

Habilitando tamanhos adicionais de imagens para o conteúdo do seu post

Mesmo que você tenha habilitado mais tamanhos de imagem em seu tema, o uso é limitado apenas ao seu tema que não faz qualquer sentido. Todos os tamanhos de imagem estão sendo gerados independentemente, então por que não torná-lo disponível para o autor do post para usá-lo dentro do conteúdo do post. Você pode fazer isso usando um plugin chamado Simple Image Sizes.

Uma vez que você instalar e ativar o plugin será adicionado a nova opção em Configurações » Media page. Você verá uma lista de tamanhos que você definiu no seu tema. Tudo que você tem a fazer é verificar a caixa que diz “Show in post insertion”.

Uma vez que você marcar esta caixa, os tamanhos adicionais estarão disponíveis para serem usadas no conteúdo do post.

Repare na imagem acima, temos todos os tamanhos de imagem que definimos no nosso tema disponível para serem usados no conteúdo do post.

O plugin Simple Image Sizes também permite criar tamanhos de imagem personalizada diretamente do painel do WordPress.

Acreditamos que este método deve ser adicionado por todos os desenvolvedores de tema WordPress. O que acham?

[lomadeewpro category=’3482′ keywords=’WordPress, Jquery, HTML, CSS’]

2 comentários em “Como criar tamanhos de imagem adicionais no WordPress

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">