O WordPress 3.9 saiu com muito poder extra sob o capô. Um novo recurso incrível entre muitos, é a capacidade adicional de agora controlar a posição de corte de imagens carregadas no WordPress – isso é realmente bom !!

Antes de prosseguir, um grande obrigado a Brad Touesnard , que fez essa contribuição incrível que agora foi incluída no núcleo do WordPress! Achei que esta seria uma ótima oportunidade para não apenas elaborar sobre como aproveitar esse novo recurso, mas também explorar e ter uma boa compreensão de todo o escopo dessa função.

O Começo – Adicionando ou Personalizando Tamanhos de Imagem

Por padrão, o WordPress gera 3x versões adicionais da sua imagem. Uma versão ‘Thumbnail’, uma ‘Medium’ e uma ‘Large’. O tamanho da imagem original carregado é referido como a versão ‘Completa’.

Personalizando os padrões

Você pode substituir os valores padrão de cada um desses tamanhos de corte com bastante facilidade. Você pode ir ao seu painel do WordPress, Configurações >> Mídia e alterar os valores lá ou pode fazê-lo através do seu tema ou arquivo de funções do plugin como este:

update_option(‘thumbnail_size_w’, 250);

update_option(‘thumbnail_size_h’, 250);

update_option(‘thumbnail_crop’, 1);

Adicionando tamanhos adicionais

Você pode colocar esta função de forma rápida e fácil em seu tema ou arquivo de funções de plugin:

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

Acabaria ficando mais ou menos assim:

add_image_size( ‘homepage-thumb’, 250, 250, true );

Dica: Lembre-se de dar a cada tamanho de imagem adicional seu próprio nome exclusivo ;-).

Tudo o que você precisa saber pode ser encontrado no WordPress Codex .

Alguns WordPress 3.9+ Magic – Controlando a posição do corte

O parâmetro $crop anteriormente era apenas um valor booleano, verdadeiro ou falso. Portanto, um corte proporcional suave ou um corte rígido se definido como verdadeiro (continue lendo mais para baixo para ver a diferença entre um corte duro e suave). No entanto, agora você pode usar um array para especificar o posicionamento da área de corte (x_crop_position, y_crop_position). Eu gosto de imagens cortadas do centro, então, por exemplo, sua função pode ficar assim agora:

add_image_size( ‘homepage-thumb’, 250, 250, array( ‘center’, ‘center’ ) );

O parâmetro $crop ainda aceita valores true/false e, de acordo com Brad, é totalmente compatível com versões anteriores. A sintaxe é idêntica àquela da propriedade background-position do CSS, então é familiar tanto para designers quanto para desenvolvedores, mas aqui estão elas para maior clareza.

parte superior esquerda

centro esquerdo

inferior esquerdo

bem no topo

centro direito

Inferior direito

parte superior central

centro centro

centro inferior

Então eu tenho cortado, agora como faço para usá-lo?

A grande notícia… é exatamente a mesma!! Para uma análise completa, como sempre, consulte o WordPress Codex . Aqui está um lembrete em qualquer caso. Para chamar essa imagem personalizada em seu tema ou plugin. No exemplo que estamos usando, veja como:

the_post_thumbnail(‘homepage-thumb’);

ou…

wp_get_attachment_url( get_post_thumbnail_id($post->ID, ‘homepage-thumb’) );

Mas e todas as minhas imagens existentes?

Como você provavelmente sabe, os tamanhos de corte são alternados e gerados no momento do upload. Isso agora significa que, depois de usar esse novo recurso, adicionando nossa posição de corte personalizada ou alterando/adicionando um novo tamanho de corte, ficamos com o que foi gerado no momento do upload e nenhuma dessas novas versões de imagem está disponível para nós, não é legal!

Aaah, mas espere… Felizmente, há pessoas muito inteligentes e incríveis na comunidade WordPress para salvar o dia, aqui está o plugin regenerar thumbnails . Este plugin já existe há muito tempo, é fantástico! Ele percorrerá todas as suas imagens carregadas existentes e gerará novamente todos os novos tamanhos de imagem que você adicionou ou personalizou. Uhuuuuu problema resolvido

Difícil vs. Colheita Macia – Você Decidiu

Colheita dura

A imagem será dimensionada e cortada nas dimensões exatas que você especificou. Dependendo da proporção da imagem em relação ao tamanho do recorte, as chances são de que a imagem sempre seja cortada.

Corte Suave

Um corte suave nunca cortará nenhuma imagem, ele reduzirá a escala da imagem até que ela caiba dentro das dimensões especificadas, mantendo sua proporção original.

Algo que vale a pena saber…

Caso qualquer dimensão da imagem carregada (largura ou altura) seja menor que o tamanho de corte definido, ela será ignorada e uma versão para esse tamanho não será feita! O WordPress percorrerá todos os tamanhos de imagem definidos e criará apenas as versões dessas imagens maiores do que a versão que está tentando gerar. Nesse caso, quando uma imagem está sendo recuperada dentro do seu tema ou plugin e não existe, ela será padronizada para a imagem ‘Full’ original como um fallback.

Aproveite a implementação deste ótimo novo recurso em seus temas e plugins. Hora de chutar uns traseiros e cortar algumas imagens