bildstorlekar förklarade

när du laddar upp en bild till din WordPress – webbplats skapas dess kopior-bilder med ytterligare storlekar. Varför behöver vi dem? Eftersom vi inte använder samma storlek bild överallt på webbplatsen:

• i inlägg,
• i portfölj,
• i popup-fönster,
• som postminiatyrer på arkivsidor,
• i widgets,
• i administrationsområde etc;

så, till exempel WordPress kan du använda full storlek bild på inlägg sidor och 150 150 (till exempel) bilder på arkivsidor.

men vänta på att ju fler registrerade bildstorlekar du har, desto fler filer kommer att finnas på din webbplats och mer tid kommer att behövas för att bearbeta bilder under uppladdning.

standard WordPress bildstorlekar

WordPress stöder flera bildstorlekar som standard. Du kan hitta och ändra dem i administrationsområdet i ”Inställningar > Media”.

så, till exempel kan du ändra WordPress miniatyrstorlek på den här sidan.

vad händer om du inte använder dem och inte vill att WordPress ska generera en kopia för var och en av dessa storlekar. Du kan infoga följande krok i ditt tema functions.php.

men kom alltid ihåg att om ditt WordPress-tema får Uppdateringar, Använd bättre ett barntema eller ett anpassat 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 bildstorleken dök upp i WordPress 4.4 tillsammans med responsiva bilder. Den har fast bredd 768 och proportionell höjd.

du kan inaktivera medium_large Storlek så enkelt som med den här koden:

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

Hur får man alla bildstorlekar?

ibland måste du ta reda på vad som är listan över tillgängliga bildstorlekar på webbplatsen. Tyvärr finns det inget vanligt sätt att göra det för både standard-och anpassade bildstorlekar, så:

• om du behöver listan med standardbildstorlekar kan du använda get_intermediate_image_sizes(), som returnerar en matris med standardbildstorlekar, exempel:

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

• om du måste lista registrerade bildstorlekar får du dem från $_wp_additional_image_sizes global variabel, och jag kan teel dig mer, du kan också få bilddimensioner därifrån, exempel:

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

funktioner

det är enkelt att använda WP – bildstorlekar i administrationsområdet-allt du behöver göra är att välja en bildstorlek du behöver i rullgardinsmenyn. Låt oss bättre titta på funktioner då.

the_post_thumbnail ()

topp 1 i min lista, eftersom jag använder den oftare än någonting annat.

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

Observera att den här funktionen skriver ut en <img> – tagg, inte en URL.

$ Storlek här är vad du kan använda som parametervärde:

• bildstorleksidentifierare – namn) – medium, custom etc, som standard thumbnail,

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

• anpassad storlek array( width, height ), exempel:

  the_post_thumbnail( array( 100, 100 ) );

  om du använder den visas den lämpligaste bildstorleken.

• du kan överföra full värde till denna parameter och en originalbild visas.

$attr du kan skicka alla HTML-attribut här som en array, du kan till och med skriva omsrcattribut! 😁

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

get_the_post_thumbnail ()

denna funktion är mycket lik the_post_thumbnail (), skillnaden är att:

• den första get_the_post_thumbnail() är ett post-ID, allt annat är detsamma,
• den returnerar en bild, inte skriver ut den.

exempel:

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

wp_get_attachment_image_src ()

funktionen gör det möjligt att få en bild-URL.

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

Observera att ett bifogat ID inte är ett post-ID. Men du kan enkelt få det, till exempel om du behöver ett utvalt bild-ID kan du använda funktionen get_post_thumbnail_id().

exempel:

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

om parametern $size och en storlek array läs lite ovan.

så här lägger du till dina anpassade bildstorlekar

denna process är mycket enkel och består av två steg. Det första steget krävs.

add_image_size()

för att registrera en bildstorlek i WordPress kan du använda den här funktionen i ditt nuvarande tema functions.php eller i ett barntema functions.php eller i ett anpassat plugin.

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

$size_name du kan inte använda reserverade bildstorleksnamn, här är de:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $bredd bredd i pixlar, Ställ in 0-obegränsad bredd. $ höjd höjd i pixlar, set 0-obegränsad höjd, exempel:

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

$Beskär tidigare denna parameter kunde acceptera kunde bara accepterafalseellertruemen nu är det mycket mer utökat, så här är de möjliga värdena:

Låt oss ta en titt på exemplet:

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

för att hålla sakerna enkla bestämde jag mig för att använda en kvadratstorlek i det här exemplet. Så det är lätt att säga att om originalbilden är horisontell kommer den vänstra delen av bilden att förbli, men den högra delen kommer att beskäras, och detsamma kan jag säga om vertikala bilder – den nedre delen av bilden kommer att beskäras.

det är också möjligt att göra manuell beskärning med hjälp av ”Manual Image Crop” plugin.

men skapa inte många bildstorlekar också:

• ju fler bildstorlekar du skapar – desto fler filer kommer att finnas i mappen uppladdningar,
• och desto mer tid kommer att behöva ladda upp en bild till din webbplats.

så här lägger du till din anpassade Bildstorlek till Media Uploader och Gutenberg

när du infogar bilder till widgets och inlägg kan WordPress (3.5+) välja vilken bildstorlek du vill använda:

som ni kan se, är det möjligt att lägga till dig anpassad storlek där:

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

det coola är att den här kroken också fungerar för Gutenberg image block.

hur man regenererar bilder efter att ha ändrat storlek eller ändrat ett tema

kanske vet du situationen när du ändrar add_image_size() parametrar eller efter att ha ändrat ditt webbplatstema WordPress genererar inte bildstorlekar automatiskt och bilder med gamla upplösningar visas fortfarande på webbplatsen.

Vad ska du göra i den här situationen? Om det bara finns 2-3 bilder i mappen uppladdningar kan du helt enkelt ladda upp dem igen. Men vad ska man göra om det finns 2-3 tusentals bilder?

det finns två sätt att lösa denna situation-med plugins och med kod:

regenerera miniatyrer med Plugins

Ok, jag kan rekommendera dig två enkla plugins:

• Ajax Thumbnail Rebuild
• Force Regenerate Thumbnail

var och en av dem har sina egna fördelar och nackdelar, så kanske för olika situationer kan du välja vad plugin mer passar för dig.

regenerera miniatyrer programmatiskt

här vill jag bara visa dig koden som gör det möjligt att regenerera bilder, hur du kommer att använda den – det är ditt val.

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

hur man skapar vissa Bildstorlek miniatyrer för anpassade posttyper endast

så, låt oss föreställa oss att din webbplats har 10 registrerade anpassade posttyper, och var och en av dem använder 2-3 bildstorlekar på webbsidor. Det är lätt att förstå att när vi laddar upp någon bild på webbplatsen skapar WordPress 20-30 kopior av det!

det finns inget sätt att använda add_image_size() för en anpassad posttyp men här är en liten bit kod som löser detta problem. Den här koden berättar för WordPress när den måste skapa en viss upplösningskopia av bilden och när den inte gör det.

både intermediate_image_sizes och intermediate_image_sizes_advanced krokar är OK för den här uppgiften. Ett super enkelt exempel nedan, efter att du har lagt in koden till dina functions.php filminiatyrer my-image-size-name kommer inte att skapas för bilder, uppladdade från anpassad posttyp page.

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

lite mer komplicerat exempel, men det är också korrekt:

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

Jag älskar WordPress, WooCommerce och Gutenberg så mycket. 12 års erfarenhet.

behöver du hjälp med anpassad Utvecklare? Kom i kontakt