billedstørrelser forklaret

når du uploader et billede til din hjemmeside, oprettes dets kopier – billeder med yderligere størrelser. Hvorfor har vi brug for dem? Fordi vi ikke bruger billedet i samme størrelse overalt på siden:

• i indlæg,
• i portefølje,
• i popups,
• som Post miniaturer på arkiv sider,
• i kontroller,
• i administrationsområde osv;

så, for eksempel giver Dig mulighed for at bruge fuld størrelse billede på indlæg sider og 150 venstre 150 (for eksempel) billeder på arkiv sider.

men vent på, at jo flere registrerede billedstørrelser du har, jo flere filer vil være på din hjemmeside, og mere tid vil være nødvendig for at behandle billeder under upload.

standard billedstørrelser

understøtter flere billedstørrelser som standard. Du kan finde og ændre dem i administrationsområdet i “Indstillinger > medier”.

så du kan f.eks. ændre miniaturestørrelse på denne side.

hvad hvis du ikke bruger dem og ikke ønsker at generere en kopi for hver af disse størrelser. Du kan indsætte følgende krog i dit tema functions.php.

men husk altid, at hvis dit tema modtager opdateringer, så brug bedre et undertema eller et brugerdefineret 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

den medium_large billedstørrelse dukkede op i 4.4 sammen med responsive billeder funktion. Den har fast bredde 768 og proportional højde.

du kan deaktivere medium_large Størrelse så enkel som med denne kode:

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

Hvordan får man alle billedstørrelser?

nogle gange skal du finde ud af, hvad der er listen over tilgængelige billedstørrelser på hjemmesiden. Desværre er der ingen almindelig måde at gøre det på for både standard-og brugerdefinerede billedstørrelser, så:

• hvis du har brug for listen over standard billedstørrelser, kan du bruge get_intermediate_image_sizes(), som returnerer et array med standard billedstørrelser, eksempel:

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

• hvis du skal liste registrerede billedstørrelser, får du dem fra $_wp_additional_image_sizes global variabel, og jeg kan teel dig mere, du kan også få billeddimensioner derfra, eksempel:

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

funktioner

Det er nemt nok at bruge billedstørrelser i administrationsområdet – alt hvad du skal gøre er at vælge en billedstørrelse, du har brug for fra rullemenuen. Lad os bedre se på funktioner derefter.

the_post_thumbnail()

Top 1 i min liste, fordi jeg bruger det oftere end noget andet.

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

bemærk, at denne funktion udskriver et <img> tag, ikke en URL.

$størrelse her er hvad du kan bruge som parameterværdi:

• billedstørrelsesidentifikator – navn) – medium, custom etc, som standard thumbnail,

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

• brugerdefineret størrelse array( width, height ), eksempel:

  the_post_thumbnail( array( 100, 100 ) );

  hvis du bruger det, vises den mest passende billedstørrelse.

• du kan overføre full værdi til denne parameter, og et originalt billede vises.

$attr du kan videregive alle HTML-attributter her som et array, du kan endda omskrivesrcattribut! 😁

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

get_the_post_thumbnail ()

denne funktion er meget lig the_post_thumbnail (), forskellen er, at:

• den første get_the_post_thumbnail() er et post-ID, alt andet er det samme,
• det returnerer et billede, ikke udskriver det.

eksempel:

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

funktionen gør det muligt at få et billede URL.

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

Bemærk venligst, at et vedhæftet id ikke er et post-ID. Men du kan nemt få det, for eksempel hvis du har brug for et featured image ID, kan du bruge get_post_thumbnail_id() funktion.

eksempel:

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

om parameteren $size og et størrelsesarray læses lidt ovenfor.

Sådan tilføjes dine brugerdefinerede billedstørrelser

denne proces er meget enkel og består af to trin. Det første trin er påkrævet.

add_image_størrelse()

for at registrere en billedstørrelse kan du bruge denne funktion i dit aktuelle tema functions.php eller i et underordnet tema functions.php eller i et brugerdefineret plugin.

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

$du kan ikke bruge reserverede billedstørrelsesnavne, her er de:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $bredde bredde i billedpunkter, sæt 0-ubegrænset bredde. $højde højde i billedpunkter, sæt 0-ubegrænset højde, eksempel:

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

$Beskær tidligere denne parameter kunne acceptere kunne kun accepterefalseellertruemen nu er den meget mere udvidet, så her er de mulige værdier:

lad os se på eksemplet:

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

for at holde tingene enkle besluttede jeg at bruge en firkantet størrelse i dette eksempel. Så det er let at sige, at hvis det originale billede er vandret, forbliver den venstre del af billedet, men den højre del beskæres, og det samme kan jeg sige om lodrette billeder – den nederste del af billedet beskæres.

Det er også muligt at lave manuel beskæring ved hjælp af “manuel billedbeskæring” plugin.

men lav ikke mange billedstørrelser også:

• jo flere billedstørrelser du opretter-jo flere filer vil være i din uploads mappe,
• og jo mere tid bliver nødt til at uploade et billede til din hjemmeside.

Sådan tilføjes din brugerdefinerede billedstørrelse til Media Uploader og Gutenberg

når du indsætter billeder i kontroller og indlæg, giver ordtryk (3.5+) dig mulighed for at vælge, hvilken billedstørrelse du vil bruge:

som du kan se, er det muligt at tilføje dig brugerdefineret størrelse der:

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 seje er, at denne krog også fungerer til Gutenberg image block.

sådan regenereres billeder efter ændring af deres størrelser eller ændring af et tema

måske kender du situationen, når du efter ændring af add_image_size() parametre eller efter ændring af din hjemmeside tema ikke genererer billedstørrelser automatisk, og billeder med gamle opløsninger vises stadig på siden.

Hvad skal du gøre i denne situation? Hvis der kun er 2-3 billeder i din uploads-mappe, kan du blot genindlæse dem. Men hvad skal man gøre, hvis der er 2-3 tusindvis af billeder?

der er to måder at løse denne situation på – med plugins og med kode:

regenerere miniaturer med Plugins

Ok, Jeg kan anbefale dig to enkle plugins:

• Force Regenerate Thumbnail

hver af dem har sine egne fordele og ulemper, så måske i forskellige situationer kan du vælge, hvilket plugin der passer mere til dig.

regenerere miniaturer programmatisk

her vil jeg bare vise dig koden, der gør det muligt at regenerere billeder, hvordan du vil bruge det – det er dit valg.

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

Sådan oprettes visse miniaturebilleder af billedstørrelse kun til brugerdefinerede posttyper

så lad os forestille os, at din hjemmeside har 10 registrerede brugerdefinerede posttyper, og hver af dem bruger 2-3 billedstørrelser på hjemmesidens sider. Det er let at forstå, at når vi uploader et billede på hjemmesiden, opretter vi 20-30 kopier af det!

der er ingen måde at bruge add_image_størrelse() til en brugerdefineret posttype, men her er et lille stykke kode, der løser dette problem.

både intermediate_image_sizes og intermediate_image_sizes_advanced kroge er OK til denne opgave. Et super simpelt eksempel nedenfor, efter at du har indsat koden til dine functions.php fil miniaturer my-image-size-name vil ikke blive oprettet til billeder, uploadet fra brugerdefineret posttype page.

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

et lidt mere kompliceret eksempel, men det er også 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

jeg elsker så meget. 12 års erfaring.

brug for nogle brugerdefinerede Udvikler hjælp? Kontakt os