Aggiungi la dimensione dell'immagine dove viene generata la dimensione proporzionale più grande possibile


8

Vorrei aggiungere una dimensione dell'immagine in cui l'immagine risultante sarà la dimensione più grande possibile mantenendo le proporzioni 4: 3.

Supponiamo di aver aggiunto una dimensione dell'immagine in questo modo:

add_image_size( 'cover-image', 2048, 1536, true );

Per impostazione predefinita, WP creerà un'immagine con quella dimensione solo se l'immagine a dimensione intera è più grande di quelle dimensioni.

Ma supponiamo che la mia immagine a dimensione intera sia larga solo 1000 pixel. Vorrei comunque avere un'immagine ritagliata con il rapporto 4: 3 più grande possibile, che in questo caso sarebbe 1000x750.

Può essere fatto?

Risposte:


11

L'approccio

Penso che l'approccio migliore sia quello di creare una dimensione dell'immagine "al volo", appena prima che le immagini vengano ridimensionate.

Puoi farlo usando il 'intermediate_image_sizes_advanced'gancio del filtro. Ciò consente di modificare le dimensioni da generare, ma essendo consapevoli delle dimensioni dell'immagine corrente, memorizzate nell'array $metadatapassato dal filtro come secondo argomento.

La matematica

Prima di tutto scriviamo una classe che restituisce le dimensioni più grandi per un rapporto specifico.

class ImageRatio {

  private $ratio;

  function __construct($ratioW = 4, $ratioH = 3) {
    $this->ratio = array($ratioW, $ratioH);
  }

  function getLargestSize($imgW, $imgH) {
    $inverse = false;
    // let's try to keep width and calculate new height  
    $newSize = round(($this->ratio[1] * $imgW) / $this->ratio[0]);
    if ($newSize > $imgH) {
       $inverse = true;
       // if the calculated height is bigger than actual size
       // let's keep current height and calculate new width
       $newSize = round(($this->ratio[0] * $imgH) / $this->ratio[1]);
    }

    return $inverse ? array( $newSize, $imgH ) : array( $imgW, $newSize );
  }

}

Utilizzo della classe

L'uso della classe è abbastanza semplice:

$ratio = new ImageRatio(4, 3)

$ratio->getLargestSize(1000, 500); // return: array(667, 500)
$ratio->getLargestSize(1000, 800); // return: array(1000, 750)

In azione

A questo punto, possiamo utilizzare la classe per calcolare al volo una nuova dimensione di immagini, in base all'immagine che viene caricata

add_filter( 'intermediate_image_sizes_advanced', function( $sizes, $metadata ) {

   if (! empty( $metadata['width'] ) && ! empty( $metadata['height'] ) ) {
      // calculate the max width and height for the ratio
      $ratio = new ImageRatio( 4, 3 );
      list($width, $height) = $ratio->getLargestSize( 
         $metadata['width'],
         $metadata['height']
      );
      // let's add our custom size
      $sizes['biggest-4-3'] = array(
        'width'  => $width,
        'height' => $height,
        'crop'   => true
      );
   }

   return $sizes;

}, 10, 2 );

Utilizzando la nuova dimensione

$image = wp_get_attachment_image( $attachment_id, 'biggest-4-3' );

Nota

Ovviamente, questo funziona per tutte le immagini che carichi dopo che il codice è in atto. Per le immagini meno recenti, è necessario rigenerare le anteprime, al volo quando vengono utilizzate o in blocco utilizzando uno dei plug-in disponibili sul Web.


Funziona benissimo, grazie! Vorrei apportare una correzione minore: penso che non sia necessario impostare un rapporto predefinito nel costruttore, poiché in futuro potrei utilizzarlo per altri rapporti. Ha senso fornire sempre il rapporto desiderato all'istanza.
— Chris Montgomery,

Gli arg nel costruttore sono solo predefiniti. Puoi passare qualsiasi rapporto desideri, i
— valori
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.