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.