velikost obrázků vysvětlena

když nahrajete obrázek na svůj web WordPress, vytvoří se jeho kopie – obrázky s dalšími velikostmi. Proč je potřebujeme? Protože nechceme používat stejnou velikost obrazu všude na webu:

• v příspěvcích,
• portfolio
• vyskakovací okna,
• jako post náhledy na archivní stránky,
• widgety
• v oblasti správy atd.;

takže například WordPress umožňuje používat obrázek v plné velikosti na stránkách příspěvků a 150×150 (například) obrázky na archivních stránkách.

Ale počkejte ✋ – mějte na paměti, že více registrovaných velikosti obrázku, více souborů, bude na svých webových stránkách a bude potřeba více času na zpracování snímků během nahrávání.

výchozí velikosti obrázků WordPress

WordPress ve výchozím nastavení podporuje několik velikostí obrázků. Můžete je najít a změnit v administrační oblasti v „nastavení > média“.

takže například můžete změnit velikost náhledů WordPress na této stránce.

co když je nepoužíváte a nechcete, aby WordPress vygeneroval kopii pro každou z těchto velikostí. Do motivu functions.phpmůžete vložit následující háček.

ale vždy mějte na paměti, že pokud vaše téma WordPress obdrží aktualizace, pak lépe použijte podřízené téma nebo vlastní plugin.

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

medium_large velikost obrazu se objevil v WordPress 4.4 spolu s odezvou obrázky funkce. Má pevnou šířku 768 a proporcionální výšku.

velikost medium_large můžete deaktivovat stejně jednoduše jako u tohoto kódu:

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

Jak získat všechny velikosti obrázků?

někdy musíte zjistit, jaký je seznam dostupných velikostí obrázků na webových stránkách. Bohužel neexistuje žádný obecný způsob, jak to udělat pro oba výchozí a vlastní velikosti obrázků, takže:

• Pokud potřebujete seznam výchozí velikosti obrazu, můžete použít get_intermediate_image_sizes(), která vrací pole s výchozí velikostí obrazu, například:

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

• Pokud máte do seznamu registrovaných velikosti obrazu, dostanete je od $_wp_additional_image_sizes globální proměnné, a můžu mi je vás více, můžete také získat rozměry obrazu od tam, příklad:

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

Funkce

To je snadné použití WP velikosti obrazu v oblasti administrace – vše, co musíte udělat, je vybrat obrázek na velikost, kterou potřebujete z rozevíracího seznamu. Pojďme se tedy podívat na funkce.

the_post_thumbnail ()

Top 1 v mém seznamu, protože ho používám častěji než cokoli jiného.

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

Upozorňujeme, že tato funkce vytiskne značku <img>, nikoli adresu URL.

$velikost, Tady je to, co můžete použít jako hodnoty parametru:

• velikost obrazu identifikátor (jméno) – medium, custom atd, ve výchozím nastavení thumbnail,

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

• vlastní velikost array( width, height ), například:

  the_post_thumbnail( array( 100, 100 ) );

  Pokud jej používáte, nejvhodnější velikost obrázku se zobrazí.

• tomuto parametru můžete předat hodnotu full a zobrazí se původní obrázek.

$attr zde můžete předat libovolné atributy HTML jako pole,můžete dokonce přepsat atributsrc! 😁

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

get_the_post_thumbnail()

Tato funkce je velmi podobná the_post_thumbnail(), rozdíl je, že:

• první get_the_post_thumbnail() je ID příspěvku, vše ostatní je stejné,
• To vrací obraz, ne tisky.

Příklad:

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

wp_get_attachment_image_src()

funkce umožňuje získat adresu URL obrázku.

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

Vezměte prosím na vědomí, že ID přílohy není ID příspěvku. Ale můžete ji snadno získat, například pokud potřebujete doporučené ID obrázku, můžete použít funkci get_post_thumbnail_id().

Příklad:

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

O $size parametr a velikost pole číst trochu výše.

jak přidat vlastní velikosti obrázků

tento proces je velmi jednoduchý a skládá se ze dvou kroků. Je nutný první krok.

add_image_size()

rejstřík velikost snímku v WordPress můžete použít tuto funkci v aktuálním tématem functions.php nebo u dítěte téma functions.php nebo ve vlastní plugin.

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

$size_name nelze použít rezervovaná velikost obrazu jmen, tady jsou:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $šířka šířka v pixelech, nastavit 0-neomezená šířka. $výška výška v pixelech, sada 0-neomezená výška, příklad:

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

$plodiny Dříve tento parametr může přijmout, může přijmout pouzefalsenebotrueale teď to je mnohem více rozšířena, takže zde jsou možné hodnoty:

Pojďme se podívat na příklad:

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

udržet věci jednoduché, rozhodl jsem se použít čtverec velikosti v tomto příkladu. Je tedy snadné říci, že pokud je původní obrázek vodorovný, levá část obrazu zůstane, ale pravá část bude oříznuta a totéž mohu říci o vertikálních obrázcích – spodní část obrazu bude oříznuta.

je také možné provést ruční oříznutí pomocí pluginu“ Manual Image Crop“.

Ale ne vytvořit spoustu velikostí obrazu stejně:

• více velikostí obrazu můžete vytvořit — více souborů, bude vaše obrázky složky,
• a více času bude muset nahrát obrázek na váš web.

Jak Přidat Vlastní Velikost Obrazu pro Media Uploader a Gutenberg

Když vložíte snímky do widgety a příspěvky, WordPress (3.5+) umožňuje vybrat, co velikost snímku k použití:

Jak můžete vidět, je možné přidat si tam vlastní velikost:

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;}

super věc je, že tento háček funguje také pro Gutenberg obrazu bloku.

Jak obnovit Obrázky po Změně jejich Velikosti nebo Mění Téma

Možná znáte situaci, kdy po změně add_image_size() parametry nebo po změně své webové stránky téma WordPress není vytvořit obraz velikosti automaticky a obrázky se starými usnesení jsou stále zobrazeny na webu.

co byste měli dělat v této situaci? Pokud jsou ve složce pro nahrávání pouze 2-3 obrázky, můžete je jednoduše znovu nahrát. Ale co dělat, pokud existují 2-3 tisíce obrázků?

tuto situaci lze vyřešit dvěma způsoby – pomocí pluginů a kódu:

Regenerovat Miniatury s Pluginy

Ok, mohu vám doporučit dvě jednoduché pluginy:

• Ajax Náhled Obnovit
• Platnost Regenerovat Miniatury

Každý z nich má své vlastní výhody a nevýhody, takže možná pro různé situace si můžete vybrat, co plugin se více hodí pro vás.

programově regenerujte miniatury

zde vám chci ukázat kód, který umožňuje regenerovat obrázky, jak je budete používat – je to vaše volba.

$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 );

Jak Vytvořit Určitou Velikost Obrázku Miniatury pro Vlastní Typy Post Pouze

Takže, pojďme si představit, že váš web má 10 registrovaných typů vlastní příspěvek, a každý z nich použít 2-3 velikosti obrázku na webové stránky. Je snadné pochopit, že když nahrajeme jakýkoli obrázek na web, WordPress vytvoří 20-30 kopií!

neexistuje žádný způsob, jak použít add_image_size() pro vlastní typ příspěvku, ale zde je malý kousek kódu, který tento problém řeší. Tento kód říká WordPress, když musí vytvořit určitou kopii rozlišení obrázku a když ne.

oba intermediate_image_sizes a intermediate_image_sizes_advanced háčky jsou pro tento úkol v pořádku. Super jednoduchý příklad níže, po vložení kódu do functions.php miniatury souboru my-image-size-name nebudou vytvořeny pro obrázky nahrané z vlastního typu příspěvku page.

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

trochu složitější příklad, ale je to také správné:

/* * 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

mám rád WordPress, WooCommerce a Gutenberg tolik. 12 let zkušeností.

potřebujete nějakou vlastní pomoc pro vývojáře? Kontaktujte nás