Ändra storlek på bilder programmatiskt i WordPress

Om du någonsin har behövt arbeta med att ändra storlek på bilder programmatiskt i WordPress, kan du ha stött på funktionen image_resize.

Dessutom kanske du vet att det har fasats ut (med tanke på att detta visas högst upp på skärmen):

Denna funktion har föråldrats. Använd wp_get_image_editor() istället.

Och med dess utfasning, som är sant för alla dem som gör ett bra jobb med att avskaffa funktionalitet, är den inte utan att den ersätts.

I det här fallet pratar vi om WP Image Editor. Detta är en klass i WordPress som vi kan använda för att utföra samma operationer för att ändra storlek på bilder programmatiskt som vi en gång kunde med den ursprungliga funktionen.

För att vara tydlig är det här inlägget inte en fullständig handledning om hur man använder WP_Image_Editor.

Istället är det en enkel guide för hur man använder den för att ändra storlek på bilder istället för en föråldrad funktion tillsammans med några förklaringar på vägen om hur man hanterar fall där det kan finnas fel.

Hitta bilden att använda

Beroende på vad du gör kan du kanske hämta filens filnamn från själva WordPress; Men för det här exemplet ska jag helt enkelt hårdkoda sökvägen till en fil.

Det här är det enklaste sättet att förklara hur man använder klassen kontra att gå iväg på en tangent för hur man programmatiskt hämtar en bild, får dess sökväg, skickar den till editorklassen och så vidare.

Så låt oss anta att den givna vägen till bilden är ungefär så här:

<?php

$filename = '/Users/tommcfarlin/Projects/acme/wp-content/uploads/2018/06/original-image.jpg';
if (!file_exists($filename)) {
  return;
}

Med det kommer vi att lagra den i en variabel som vi kan överföra till en annan funktion om vi vill använda originalfilen flera gånger.

Hämta en instans av bildredigeraren

Därefter måste du skaffa en instans av bildredigeringsklassen så att du kan arbeta på bilden som ligger på vägen ovanför. I sin mest grundläggande form är det inget annat än att skicka ett filnamn till en funktion och sedan en rad argument.

I det här inlägget är jag inte bekymrad över mängden argument – ​​bara med att få en instans av redigeraren som jag kan använda för att ändra storlek på en bild.

För att ta tag i en instans av nämnda editor, gör helt enkelt så här:

<?php

// Grab the editor for the filename of the image. 
$filename = '/Users/tommcfarlin/Projects/acme/wp-content/uploads/2018/06/original-image.jpg';
if (!file_exists($filename)) {
  return;
}

$editor = wp_get_image_editor( $filename, array() );

Detta kommer att returnera antingen en instans av redigeraren av en instans av **[WP_Error](https://developer.wordpress.org/reference/classes/wp_error/)**(tillsammans med ett felmeddelande och annan information som du kan använda för att fastställa problemet). Det är alltid bra att kontrollera om värdet som returneras är ett fel och stoppa eventuella framtida operationer.

<?php

// Grab the editor for the file and the size of the original image.
$filename = '/Users/tommcfarlin/Projects/acme/wp-content/uploads/2018/06/original-image.jpg';
if (!file_exists($filename)) {
  return;
}

$editor = wp_get_image_editor( $filename, array() );
if (is_wp_error($editor)) {
   // handle the problem however you deem necessary.
}

Förutsatt att det inte finns något fel kan du dock börja arbeta med att ändra storlek på bilden.

Ändra storlek på bilden

Lyckligtvis är detta något som är lätt att göra. Du behöver tre uppgifter:

1. bredd,
2. höjd,
3. och om du vill beskära bilden eller inte.

Enligt min erfarenhet är det nästan alltid bättre att beskära bilden än inte eftersom det undviker någon konstig sträckning eller förvrängning vid udda bildförhållanden.

När jag ändrar storlek på bilden vill jag alltid få bildens nuvarande storlek och sedan använda en multiplikator för att skapa de nya dimensionerna som jag vill ändra storlek på bilden med.

Låt oss till exempel säga att jag har en bild och jag vill ändra storleken på bredden med 40 % och höjden med 30 %. För att göra detta måste jag:

1. få storleken på den aktuella bilden,
2. använd den nya bredden och höjden för att ändra storlek på bilden.

Programmässigt skulle du göra så här:

<?php

// Grab the editor for the file and the size of the original image.
$filename = '/Users/tommcfarlin/Projects/acme/wp-content/uploads/2018/06/original-image.jpg';
if (!file_exists($filename)) {
  return;
}

$editor = wp_get_image_editor( $filename, array() );
if (is_wp_error($editor)) {
   // Handle the problem however you deem necessary.
}

// Get the dimensions for the size of the current image.
$dimensions = $editor->get_size();
$width = $dimensions['width'];
$height = $dimensions['height'];

// Calculate the new dimensions for the image.
$newWidth = 0.4 * $width;
$newHeight = 0.3 * $height;

// Resize the image.
$result = $editor->resize($newWidth, $newHeight, true);

Lätt nog att följa, eller hur?

Sparar bilden

Slutligen är allt som återstår att spara bilden. I det här fallet kommer bilden att skrivas ut till uppladdningskatalogen (och vanligtvis år och månad som WordPress tillhandahåller).

<?php

// Grab the editor for the file and the size of the original image.
$filename = '/Users/tommcfarlin/Projects/acme/wp-content/uploads/2018/06/original-image.jpg';
if (!file_exists($filename)) {
  return;
}

$editor = wp_get_image_editor( $filename, array() );
if (is_wp_error($editor)) {
   // handle the problem however you deem necessary.
}

// Get the dimensions for the size of the current image.
$dimensions = $editor->get_size();
$width = $dimensions['width'];
$height = $dimensions['height'];

// Calculate the new dimensions for the image.
$newWidth = 0.4 * $width;
$newHeight = 0.3 * $height;

// Resize the image.
$result = $editor->resize($newWidth, $newHeight, true);

// If there's no problem, save it; otherwise, print the problem.
if (!is_wp_error($result)) {
  $editor->save($editor->generate_filename());
} else {
   // Handle the problem however you deem necessary.
}

Du kan sedan se den slutliga versionen ändrad storlek (och namngiven på lämpligt sätt) baserat på dess utdata.