Il plugin jQuery Backstretch serve per ridimensionare le immagini di sfondo in modo proporzionale così da occupare tutto lo spazio disponibile. Dato che spesso il ridimensionamento delle immagini in evidenza di WordPress produce risultati non accettabili a livello di design (ad esempio l'immagine non occupa tutta la larghezza del post), possiamo usare questo plugin come soluzione leggera e alternativa.
Per prima cosa includiamo jQuery, Backstretch e un nostro script nel nostro tema. Ovviamente se jQuery è già presente non è necessario includerla. Il seguente codice presuppone che nella directory del vostro tema esista una sottodirectory chiamata js e va aggiunto in functions.php:
function add_scripts() {
if(!is_admin()) {
wp_enqueue_script('jquery');
wp_register_script('backstretch', get_template_directory_uri() . '/js/jquery.backstretch.js', '1.0', array('jquery'), false);
wp_enqueue_script('backstretch');
wp_register_script('mioscript', get_template_directory_uri() . '/js/mioscript.js', '1.0', array('jquery'), false);
wp_enqueue_script('mioscript');
}
}
add_action('wp_print_scripts', 'add_scripts');
A questo punto occorre analizzare la struttura dei post e localizzare l'immagine in evidenza e gli elementi (o l'elemento) che la contengono. Ad esempio:
<div class="featured-image">
<?php the_post_thumbnail('large'); ?>
</div>
Il plugin andrà ad assegnare l'immagine di sfondo al genitore dell'immagine in evidenza (nel nostro caso featured-image). Quindi nel file CSS principale del nostro tema dobbiamo definire degli stili adeguati:
.featured-image {
margin: 1em 0;
width: 100%;
height: 180px; /* altezza massima */
}
.featured-image img {
display: none;
}
Il nostro codice jQuery dovrà semplicemente estrarre l'URL dell'immagine dall'attributo src e passarlo al plugin Backstretch:
(function($) {
var setFeaturedImage = function() {
if($('div.featured-image').length) {
$('div.featured-image').each(function() {
var $div = $(this),
$img = $('img', $div),
src = $img.attr('src');
$div.backstretch(src);
$img.remove();
});
}
};
$(document).ready(function() {
setFeaturedImage();
});
})(jQuery);
Si tratta, come vedete, di una soluzione lato client facilmente implementabile e che non richiede l'uso di plugin o librerie che modifichino l'assetto di WordPress.