tamanhos de imagens explicadas

quando você carrega uma imagem para o seu site WordPress, suas cópias – imagens com tamanhos adicionais serão criadas. Porque precisamos deles? Porque não usamos a mesma imagem em todo o lado no site:

• em posts,
• em portfólio,
• em popups,
• como post thumbnails on archive pages,
• em widgets,
• na área de administração etc;

assim, por exemplo, o WordPress permite que você use imagens de tamanho completo em páginas de posts e 150×150 (por exemplo) imagens em páginas de arquivo.

mas espere ✋ – tenha em mente que quanto mais tamanhos de imagem registrados você tem, mais arquivos estarão em seu site e mais tempo será necessário para processar imagens durante o upload.

tamanhos padrão de imagens WordPress

WordPress suporta vários tamanhos de imagens por padrão. Você pode encontrá-los e alterá-los na área de administração em “Settings > Media”.

assim, por exemplo, você pode mudar o tamanho da miniatura WordPress nesta página.

e se você não usá-los e não quer que o WordPress para gerar uma cópia para cada um destes tamanhos. Você pode inserir o seguinte gancho em seu tema functions.php.

mas tenha sempre em mente que se o seu tema WordPress recebe atualizações, então melhor usar um tema infantil ou um plugin personalizado.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes'); function misha_turn_off_default_sizes( $default_image_sizes) { unset( $default_image_sizes); // turn off thumbnail sizeunset( $default_image_sizes); // turn off medium sizeunset( $default_image_sizes); // turn off large size return $default_image_sizes; }

medium_large

o tamanho da imagem medium_large apareceu no WordPress 4.4 juntamente com a funcionalidade de imagens responsivas. Tem Largura Fixa 768 e altura proporcional.

Você pode desativar medium_large tamanho tão simples como com este código:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large'); function misha_deactivate_medium_large( $default_image_sizes ){ $default_image_sizes;return $default_image_sizes; }

Como Obter Todos os Tamanhos de Imagem?

às vezes você tem que descobrir qual é a lista de tamanhos de imagem disponíveis no site. Infelizmente não há nenhuma maneira comum de fazê – lo tanto para o tamanho padrão e personalizados de imagens, então:

• se precisar da lista de tamanhos de imagem predefinidos, pode usar get_intermediate_image_sizes(), que devolve uma lista com tamanhos de imagem predefinidos, por exemplo:

  print_r( get_intermediate_image_sizes() );/* Array ( => thumbnail => medium => medium_large => large ) */

• Se você tem a lista registrado tamanhos de imagem, você obtê-los a partir de $_wp_additional_image_sizes variável global, e posso teel mais, você também pode obter dimensões da imagem a partir daí, exemplo:

  global $_wp_additional_image_sizes;print_r( $_wp_additional_image_sizes );/*Array( => Array ( => 400 => 400 => 1 ) => Array ( => 2000 => 1200 => 1 ))*/

Funções

é fácil o suficiente para usar o WP tamanhos de imagem na área de administração – tudo o que você tem a fazer é selecionar um tamanho de imagem que você precisa a partir da lista pendente. Então é melhor dar uma vista de olhos às funções.

the_post_thumbnail ()

Top 1 na minha lista, porque o uso mais frequentemente do que qualquer outra coisa.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

por favor, note que esta função imprime uma etiqueta <img>, Não uma URL.

$tamanho Aqui é que você pode usar como um valor de parâmetro:

• tamanho da imagem identificador (nome) – medium, custom etc, por padrão thumbnail,

  // prints the featured image, size large of a current post in the loopthe_post_thumbnail( 'large' );

• tamanho personalizado array( width, height ), exemplo:

  the_post_thumbnail( array( 100, 100 ) );

  Se você usá-lo, o mais apropriado, o tamanho da imagem será exibida.

• você pode passar full valor para este parâmetro e uma imagem original será exibida.

$attr você pode passar todos os atributos HTML aqui como um array, você pode até reescreversrcatributo! 😁

the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

get_the_post_thumbnail()

Esta função é muito semelhante ao the_post_thumbnail(), a diferença é que:

• O primeiro get_the_post_thumbnail() é a ID do post, tudo o resto é a mesma,
• devolve uma imagem, não imprime.

Exemplo:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src()

A função permite obter o URL de uma imagem.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

por favor, note que uma ID de anexo não é uma ID de post. Mas você pode facilmente obtê-lo, por exemplo, se você precisa de um ID de imagem de destaque, você pode usar get_post_thumbnail_id() função.Exemplo:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );echo $image_array;

sobre o parâmetro $size e uma matriz de tamanho lido um pouco acima.

como adicionar os seus tamanhos de imagem personalizados

este processo é muito simples e consiste em dois passos. O primeiro passo é necessário.

add_image_size ()

para registar um tamanho de imagem no WordPress você pode usar esta função no seu tema actual functions.php ou num tema infantil functions.php ou num plugin personalizado.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

$size_name Você não pode usar reservados tamanho da imagem nomes, eles estão aqui:thumb,thumbnail,post-thumbnail,medium,medium_large

,large,full. largura $em pixels, definir 0-Largura ilimitada. $altura em pixels, definir 0-altura ilimitada, exemplo:

add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter

$safra Anterior, este parâmetro pode aceitar poderia aceitar apenasfalseoutruemas agora é muito mais alargado, então aqui estão os valores possíveis:

Vamos fazer uma olhada no exemplo:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

Para manter as coisas simples, eu decidi usar um quadrado de tamanho neste exemplo. Assim, é fácil dizer, que se a imagem original é horizontal, a parte esquerda da imagem vai permanecer, mas a parte será cortada, e o mesmo posso dizer sobre imagens verticais – a parte inferior da imagem será cortada.

também é possível fazer recorte manual usando o plugin “Manual Image Crop”.

Mas não criar um monte de tamanhos de imagem bem:

• mais tamanhos de imagem que você criar, mais arquivos serão na sua pasta uploads,
• e mais tempo terá para fazer upload de uma imagem para seu site.

Como Adicionar a sua Imagem Personalizada Tamanho Media Uploader e Gutenberg

Quando você inserir imagens para widgets e postagens, WordPress (3.5+) permite-lhe escolher o tamanho da imagem para usar:

Como você pode ver, é possível adicionar-lhe há tamanho personalizado:

add_filter('image_size_names_choose', 'misha_new_image_sizes'); function misha_new_image_sizes($sizes) {$addsizes = array("my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)");$newsizes = array_merge( $sizes, $addsizes );return $newsizes;}

O legal é que esta rotina também funciona para Gutenberg bloco de imagem.

como regenerar imagens depois de mudar os seus tamanhos ou mudar um tema

talvez você conheça a situação quando depois de mudar os parâmetros add_image_size() ou depois de mudar o tema do seu site WordPress não gera tamanhos de imagem automaticamente e imagens com resoluções antigas ainda são exibidas no site.O que você deve fazer nesta situação? Se houver apenas 2-3 imagens em sua pasta uploads, você pode simplesmente atualizá-las. Mas o que fazer se houver 2-3 milhares de imagens?

há duas maneiras de resolver esta situação – com plugins e com código:

Gerar Miniaturas com Plugins

Ok, eu posso recomendar dois simples plugins:

• Ajax Miniatura Reconstruir
• Força Gerar Miniatura

Cada um deles tem suas próprias vantagens e desvantagens, por isso, talvez, para diferentes situações, você pode escolher o plugin mais se encaixa para você.

regenerar miniaturas programaticamente

aqui eu só quero mostrar o código que permite regenerar imagens, como você irá usá-lo-é sua escolha.

$attachment_id = 5; // pass your attachment ID here $path = get_attached_file( $attachment_id );$meta = wp_generate_attachment_metadata( $attachment_id, $path );wp_update_attachment_metadata( $attachment_id, $meta );

como criar certas Miniaturas De Tamanho de imagem para tipos de Post personalizados apenas

então, vamos imaginar que o seu site tem 10 tipos de post personalizados registrados, e cada um deles usar 2-3 tamanhos de imagem nas páginas do site. É fácil de entender que quando fazemos upload de qualquer imagem no site WordPress cria 20-30 cópias dele!

não há nenhuma maneira de usar add_image_size () para um tipo de post personalizado, mas aqui está um pequeno pedaço de código que resolve este problema. Este código diz ao WordPress quando ele tem que criar uma certa cópia de resolução da imagem e quando não o faz.

ambos os ganchos intermediate_image_sizes e intermediate_image_sizes_advanced estão OK para esta tarefa. Um exemplo super simples abaixo, depois de inserir o código nas suas miniaturas functions.php de ficheiros my-image-size-name, não será criado para imagens, enviadas do tipo de post personalizado page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){ if( isset( $_REQUEST ) && 'page' == get_post_type($_REQUEST ) ) {unset( $sizes );} return $sizes; } );

um exemplo um pouco mais complicado, mas também é correto:

/* * this hook will be fired while you uploading a picture */add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' ); function misha_reduce_image_sizes( $sizes ){/* * $sizes - all image sizes array Array ( => thumbnail => medium => large => post-thumbnail ) * get_post_type() to get post type */$type = get_post_type($_REQUEST); // $_REQUEST post id the image uploads to foreach( $sizes as $key => $value ){ /* * use switch if there are a lot of post types */if( $type == 'page' ) {if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages unset( $sizes ); }} else if ( $type == 'region' ) {if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335' unset( $sizes ); }} else {if( $value != 'thumbnail' ){ // turn off everything except thumbnail unset( $sizes ); }}}return $sizes;}

Misha Rudrastyh

eu amo o WordPress, WooCommerce e Gutenberg tanto. 12 anos de experiência.

necessita de ajuda personalizada do programador? Entre em contacto