Transformer sa gallerie en slider sans plugin

Aujourd’hui on va voir comment on peut, grace au fonctions tirées du codex, transformer la gallerie classique de wordpress en slider.
Mon idée de base n’est pas de modifier l’apparence de la gallerie, c’est à dire pour en changer la taille ou y rajouter simplement des titres, des ‘captions’ ou autre, mais simplement, pour une question de gain de place, d’en faire un slider.L’idéal serait de pouvoir transformer automatiquement toutes mes galleries en slider: ce qui me permettrait une grande économie de place sur la page.

Replacer sa gallerie dans le contenu

Ne sachant pas trop au final quelle place je voulais leur donner dans l’article, j’ai testé plusieurs bouts de code, dont ce premier code du codex  qui utilise la fonction get_post_gallery_images( $post ); 

function pw_show_gallery_image_urls( $content ) {

 	global $post;
 	// Only do this on singular items
 	if( ! is_singular() )
 		return $content;
 	// Make sure the post has a gallery in it
 	if( ! has_shortcode( $post->post_content, 'gallery' ) )
 		return $content;
 	// Retrieve the first gallery in the post
 	$gallery = get_post_gallery_images( $post );
	$image_list = '<ul>';
	// Loop through each image in each gallery
	foreach( $gallery as $image_url ) {
		$image_list .= '<li>' . '<img src="' . $image_url . '">' . '</li>';
	}
	$image_list .= '</ul>';

	// Append our image list to the content of our post
	$content .= $image_list;
 	return $content;
 }
 add_filter( 'the_content', 'pw_show_gallery_image_urls' );

puis ce deuxième code:  qui utilise la version pluriel de la fonction get_post_galleries_images( $post ) , pour plusieurs galleries.

function pw_show_gallery_image_urls( $content ) {

 	global $post;

 	// Only do this on singular items
 	if( ! is_singular() )
 		return $content;

 	// Make sure the post has a gallery in it
 	if( ! has_shortcode( $post->post_content, 'gallery' ) )
 		return $content;

 	// Retrieve all galleries of this post
 	$galleries = get_post_galleries_images( $post );

	$image_list = '<ul>';

	// Loop through all galleries found
	foreach( $galleries as $gallery ) {

		// Loop through each image in each gallery
		foreach( $gallery as $image ) {

			$image_list .= '<li>' . $image . '</li>';

		}

	}

	$image_list .= '</ul>';

	// Append our image list to the content of our post
	$content .= $image_list;

 	return $content;

 }
 add_filter( 'the_content', 'pw_show_gallery_image_urls' );

Ces deux codes pourraient suffire selon les besoins, et permettent, en modifiant l’html, de ressortir les images sous forme de slider, mais les deux à la suite du content, comme ils l’indiquent en préambule : « A simple example of how to append the raw image URLs to the content of any post or page that has at least one gallery. »

La première ne modifie qu’une seule gallerie, la deuxième fonction mélange toutes les galleries d’un article et les deux placent la gallerie fin d’article, après le contenu.

Un filtre pour modifier la gallerie

Le code originel du shortcode se trouve dans wp-include/media.
Le codex nous indique qu’un filtre existe pour pouvoir modifier à notre guise le rendu de cette gallerie et plusieurs topics sur stack overflow donnent des exemples plus précis.Ici ou la pour mettre en place ce filtre.

Certains l’utilisent pour modifier l’apprence.Dans mon cas, assez spécifique, le filtre ne donne rien.

Créer son propre shortcode

La solution est donc carrément de supprimer le shortcode natif et d’en recréer un nouveau, avec les seules fonctions qui m’interessent, et ca tombe bien, puisque selon le codex, on peut tout à fait retirer le shortcode par défaut et recréer le sien avec les fonctions:

// remove the  WordPress function
remove_shortcode('gallery', 'gallery_shortcode');
// add our own replacement function
add_shortcode('gallery', 'myown_gallery_shortcode');

Voci le code à insérer dans functions.php

remove_shortcode('gallery');
add_shortcode('gallery', 'my_new_gallery_function');
function my_new_gallery_function($atts) {
	
	global $post;
	$pid = $post->ID;
	$gallery = "";

	if (empty($pid)) {$pid = $post['ID'];}

	if (!empty( $atts['ids'] ) ) {
	   	$atts['orderby'] = 'post__in';
	   	$atts['include'] = $atts['ids'];
	}

	extract(shortcode_atts(array('orderby' => 'menu_order ASC, ID ASC', 'include' => '', 'id' => $pid, 'itemtag' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 1, 'size' => 'large', 'link' => 'file'), $atts));
		
	$args = array('post_type' => 'attachment', 'post_status' => 'inherit', 'post_mime_type' => 'image', 'orderby' => $orderby);

	if (!empty($include)) {$args['include'] = $include;}
	else {
	   	$args['post_parent'] = $id;
		$args['numberposts'] = -1;
	}

	if ($args['include'] == "") { $args['orderby'] = 'date'; $args['order'] = 'asc';}

	$images = get_posts($args);
			$gallery .= "<div class='slider'>";
	foreach ( $images as $image ) {
		//print_r($image); /*see available fields*/
		$image_src = wp_get_attachment_image_src($image->ID, 'large');
		$image_src = $image_src[0];
                
		$gallery .= "<img src='".$image_src."'>";
		
	}
	$gallery .= "</div>";
	return $gallery;
}

Ici je ne garde que l’essentiel de la fonction, je défini ma taille par défaut des images en ‘large’, et j’entoure ma gallerie d’une div.slider.

J’ai bien sur importé un plugin de slider, ici nivo-slider.js pour l’exemple

Et dans un fichier js j’inclus la fonction d’appel, pour faire fonctionner le tout.

jQuery(document).ready(function($){
	$('.slider').nivoSlider({
		effect: 'fade',             
		animSpeed: 700,                
		pauseTime: 2000,               
		directionNav: false,           
		controlNav: false,               
		pauseOnHover: true,             
		manualAdvance: false,           
		randomStart: false            
	});
});

Au final,  pour chaque gallerie inserée dans mon article, à la place d’un défilement continu d’images, j’ai bien mon slider qui divise drastiquement la longeur de la page, et rend donc la lecture un peu moins pénible.

Le css pour l’apparence du slider:

/*slider*/

/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:auto;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	width: auto;
        height:auto
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:auto;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}

Il faudra bien sur penser à customiser le slider en lui rajoutant des controles de navigation etc…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.