WordPress: usare i CSS per il crop delle immagini

Gestire grandi immagini con le sole funzioni di resize di WordPress può essere problematico. Ma se le combiniamo con i CSS possiamo ottenere effetti molto interessanti.

Definiamo subito nel file functions.php la nostra dimensione delle immagini personalizzata:

add_action( 'init', 'my_register_image_sizes' );
 
function my_register_image_sizes() {
    add_image_size( 'huge', 940,900, true ); // crop
}

Quindi inseriamo l'immagine nel nostro tema:

<div id="headline">
<?php the_post_thumbnail('huge', array('class' => 'scale-with-grid')); ?>
</div>

A questo punto usiamo i CSS per fare in modo che solo una parte dell'immagine venga visualizzata (in altezza):

#headline {
    max-height: 400px;
    overflow: hidden;
}