Vi è mai capitato di dover far apparire la vostra gallery di WordPress prima del flusso testuale? Questo articolo fa al caso vostro!
In questo esempio userò il plugin Owl Carousel per visualizzare le immagini caricate nella gallery di WordPress sotto forma di “slider”. In teoria potete usare le immagini come meglio credete (potete anche visualizzarle con la classica griglia di WordPress per intederci).
Struttura e funzionamento
L’idea è “usare” la gallery inserita nell’editor di WordPress e renderizzarla estrapolandola dal flusso nativo del testo.
Implementiamo le librerie Owl carousel
[button link=”http://owlgraphic.com/owlcarousel/” color=”blue” target=”blank” size=”large”]Download Owl Carousel[/button]
Questo passaggio ovviamente è facoltativo. In Header.php inserite questo codice:
<!-- OWL -->
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/owl-carousel/owl.theme.css">
Nel vostro Style.css aggiungete:
#carousel .item img{
display: block;
width: 100%;
height: auto;
}
In footer invece aggiungete dopo il wp_footer() questo codice:
<!-- jQuery 1.7+ -->
<script src="jquery-1.9.1.min.js"></script>
<script src="<?php bloginfo('template_url') ?>/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#carousel").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});//OWL
});//DOM
</script>
NOTA: Il modo migliore per agigungere gli script è questo, ti consiglio di darci un occhiata 😉
Creiamo la gallery estrapolandola dal testo
A questo punto apriamo il file content-single.php del vostro tema e sopra il richiamo the_content() che richiama il contenuto aggiungiamo il seguente codice:
<?php
// Verifichiamo che il post abbia una galleria impostata
if( ! has_shortcode( $post->post_content, 'gallery' ) ){} else{
// Recupero le immagini della galleria
$galleries = get_post_galleries_images( $post );
//Imposto i div contenitore di owl carousel
$image_list = '<div id="carousel" class="owl-carousel owl-theme">';
// Ciclo la galleria
foreach( $galleries as $gallery ) {
// Ciclo ciascuna immagine
foreach( $gallery as $image ) {
//Render dell'immagine
$image_list .= '<div class="item"><img src="'.esc_url( home_url( '/' ) ).'' . str_replace("-150x150", "", $image). '" /></div>';
}// Ciclo ciascuna immagine
}//Ciclo Gallery
//Chiusura div contenitore owl carousel
$image_list .= '</div>';
//Visualizzo la galleria
echo $image_list;
}//Else Verifica Galleria
?>
Come sempre vi invito a visionare i commenti al codice per una guida “passo-passo”. Ecco una breve analisi:
– Per prima cosa verifico che nel post sia presente una galleria caricata
– Recupero le immagini
– Apro eventuali contenitori della gallery ( nel nostro caso owl carousel)
– Inizio cicli per le immagini
– Recupero le immagini della gallery. Di default wordpress renderizza la versione 150x150px pertanto ho inserito un str_replace per “filtrare” e recuperare l’immagine completa. Volendo potete anche recuperare la dimensione dell’immagine più adatta in base al vostro tema.
– Chiudo eventuali contenitori
– Visualizzo la gallery
Conclusioni
Spero che questo articolo sia utile per iniziare a “lavorare” con le gallery di WordPress e ritengo sia un buon punto di partenza per tutti i novizi che vogliono personalizzare al massimo il proprio tema. Se ti è stato utile segnala l’articolo sui tuoi social network preferiti oppure commenta qui sotto per lasciare la tua idea o suggerimento.
Immagine Gallery disponibile su Shutterstock
