afbeeldingsformaten uitgelegd

wanneer u een afbeelding uploadt naar uw WordPress – website, worden kopieën-afbeeldingen met extra formaten gemaakt. Waarom hebben we ze nodig? Omdat we niet overal op de site dezelfde afbeelding gebruiken:

• in posts,
• in portfolio,
• in popups,
• als post thumbnails op archiefpagina ‘ s,
• in widgets,
• in administration area etc;

dus, bijvoorbeeld WordPress staat u toe om full size afbeelding te gebruiken op postpagina ’s en 150×150 (bijvoorbeeld) afbeeldingen op archiefpagina’ s.

maar wacht ✋ – houd er rekening mee dat hoe meer geregistreerde afbeeldingsformaten je hebt, hoe meer bestanden op je website zullen staan en meer tijd nodig zal zijn om afbeeldingen te verwerken tijdens het uploaden.

standaard WordPress-afbeeldingsformaten

WordPress ondersteunt standaard meerdere afbeeldingsformaten. U kunt ze vinden en wijzigen in het administration area in “Settings > Media”.

u kunt bijvoorbeeld de grootte van de WordPress-miniatuur op deze pagina wijzigen.

wat als u ze niet gebruikt en niet wilt dat WordPress een kopie genereert voor elk van deze formaten. U kunt de volgende haak invoegen in uw thema functions.php.

maar houd er altijd rekening mee dat als uw WordPress thema ontvangt updates, dan beter gebruik maken van een kind thema of een aangepaste 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

de medium_large afbeeldingsgrootte verscheen in WordPress 4.4 samen met de functie responsive images. Het heeft een vaste breedte 768 en een proportionele hoogte.

u kunt medium_large Grootte zo eenvoudig als met deze code deactiveren:

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

Hoe krijg ik alle afbeeldingsformaten?

soms moet u uitzoeken wat de lijst is met beschikbare afbeeldingsgroottes op de website. Helaas is er geen gemeenschappelijke manier om het te doen voor zowel standaard als aangepaste afbeeldingen maten, dus:

• Als u de lijst met standaard afbeeldingsgroottes nodig hebt, kunt u get_intermediate_image_sizes() gebruiken, die een array met standaard afbeeldingsgroottes retourneert, voorbeeld:

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

• Als je naar de lijst van geregistreerde afmetingen van de foto, je krijgt ze van $_wp_additional_image_sizes globale variabele, en kan ik teel je meer, je kunt ook de afmetingen van het beeld van er, bijvoorbeeld:

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

Functies

Het is gemakkelijk genoeg om te gebruiken WP-image formaten in de administratie – alles wat je hoeft te doen is om een resolutie te selecteren uit de dropdown. Laten we dan maar eens naar de functies kijken.

the_post_thumbnail ()

Top 1 in mijn lijst, omdat ik het vaker gebruik dan iets anders.

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

let op: deze functie drukt een <img> tag af, geen URL.

$size hier is wat u kunt gebruiken als parameter waarde:

• image size identifier (name) – medium, custom etc, standaard thumbnail,

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

• aangepaste grootte array( width, height ), voorbeeld:

  the_post_thumbnail( array( 100, 100 ) );

  als u het gebruikt, wordt de meest geschikte afbeeldingsgrootte weergegeven.

• u kunt de waarde full doorgeven aan deze parameter en er wordt een originele afbeelding weergegeven.

$ attr u kunt hier alle HTML-attributen doorgeven als een array, u kunt zelfssrcattribuut herschrijven! 😁

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

get_the_post_thumbnail()

deze functie lijkt erg op de_post_thumbnail (), het verschil is dat:

• de eerste get_the_post_thumbnail() is een post ID, al het andere is hetzelfde,
• het geeft een afbeelding terug, niet drukt het af.

voorbeeld:

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

wp_get_attachment_image_src ()

de functie maakt het mogelijk om een afbeelding-URL te krijgen.

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

houd er rekening mee dat een attachment ID geen post ID is. Maar u kunt het gemakkelijk krijgen, bijvoorbeeld als u een aanbevolen image-ID nodig hebt, kunt u de get_post_thumbnail_id() – functie gebruiken.

voorbeeld:

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

over de $size parameter en een grootte array lees iets hierboven.

Hoe voeg ik uw aangepaste afbeeldingsformaten toe

dit proces is zeer eenvoudig en bestaat uit twee stappen. De eerste stap is vereist.

add_image_size ()

om een afbeeldingsgrootte in WordPress te registreren kunt u deze functie gebruiken in uw huidige thema functions.php of in een dochterthema functions.php of in een aangepaste plugin.

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

$size_name u kunt geen gereserveerde afbeeldingsgrootte namen gebruiken, hier zijn ze:thumb,thumbnail,post-thumbnail,medium,medium_large,large

,full. $width Width in pixels, stel 0 in-onbeperkte breedte. $height Hoogte in pixels, stel 0 in-ongelimiteerde hoogte, voorbeeld:

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

$gewas Eerder deze parameter kan accepteren kon accepteren alleenfalseoftruemaar nu is het veel meer uitgebreid, dus hier zijn de mogelijke waarden:

Laten we een kijkje op het voorbeeld:

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

Om de dingen eenvoudig ik besloten om een vierkant formaat in dit voorbeeld. Dus, het is gemakkelijk om te zeggen, dat als de oorspronkelijke afbeelding horizontaal is, het linkerdeel van de afbeelding zal blijven, maar het rechterdeel zal worden bijgesneden, en hetzelfde kan ik zeggen over verticale Afbeeldingen – het onderste deel van de afbeelding zal worden bijgesneden.

het is ook mogelijk om handmatig bijsnijden te maken met behulp van de plugin “Manual Image Crop”.

maar maak ook niet veel afbeeldingsformaten:

• hoe meer afbeeldingsformaten u maakt-hoe meer bestanden in uw uploadmap,
• en hoe meer tijd nodig is om een afbeelding naar uw site te uploaden.

uw aangepaste afbeeldingsgrootte toevoegen aan Media Uploader en Gutenberg

wanneer u afbeeldingen invoegt aan widgets en berichten, kunt u met WordPress (3.5+) kiezen welke afbeeldingsgrootte u wilt gebruiken:

zoals u kunt zien, is het mogelijk om u aangepaste grootte daar toe te voegen:

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

het leuke is dat deze haak ook werkt voor Gutenberg image block.

Hoe beelden te regenereren na het veranderen van hun grootte of het veranderen van een thema

misschien kent u de situatie wanneer na het veranderen van add_image_size() parameters of na het veranderen van uw website thema WordPress geen afbeeldingsgroottes automatisch genereert en afbeeldingen met oude resoluties worden nog steeds weergegeven op de site.

Wat moet u doen in deze situatie? Als er slechts 2-3 foto ‘ s in uw uploadmap, kunt u ze gewoon opnieuw uploaden. Maar wat te doen als er 2-3 duizenden beelden?

er zijn twee manieren om deze situatie op te lossen – met plugins en met code:

miniaturen regenereren met Plugins

Ok, Ik kan u twee eenvoudige plugins aanbevelen:

• Ajax miniatuurweergave
• Forceer miniatuurweergave

elk van hen heeft zijn eigen voor-en nadelen, dus misschien kunt u voor verschillende situaties kiezen welke plugin meer bij u past.

programmatisch miniaturen regenereren

hier wil ik u alleen de code laten zien die het mogelijk maakt om afbeeldingen te regenereren, hoe u deze wilt gebruiken – het is uw keuze.

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

Hoe maak je bepaalde afbeeldingsgrootte miniaturen voor aangepaste Post Types alleen

dus, laten we ons voorstellen dat uw website heeft 10 geregistreerde aangepaste post types, en elk van hen gebruik maken van 2-3 beeldformaten op de website pagina ‘ s. Het is gemakkelijk te begrijpen dat wanneer we een foto uploaden op de website WordPress maakt 20-30 kopieën van het!

er is geen manier om add_image_size() te gebruiken voor een aangepast berichttype, maar hier is een klein stukje code dat dit probleem oplost. Deze code vertelt WordPress wanneer het een bepaalde resolutie kopie van de afbeelding moet maken en wanneer het dat niet doet.

beide intermediate_image_sizes en intermediate_image_sizes_advanced hooks zijn OK voor deze taak. Een super eenvoudig voorbeeld hieronder, nadat u de code in uw functions.php bestand miniaturen my-image-size-name zal niet worden gemaakt voor afbeeldingen, geüpload van aangepaste post type page.

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

een beetje ingewikkelder voorbeeld, maar het is ook correct:

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

Ik hou zoveel van WordPress, WooCommerce en Gutenberg. 12 jaar ervaring.

hulp nodig voor aangepaste ontwikkelaars? Neem contact op met