Mettre en place une galerie au sein d’un billet

Des styles sont prévus pour afficher un ensemble d’images au sein d’un billet sous forme de mini-galerie comme sur les captures ci-dessous. Le titre du lien apparaît sous la photo s’il existe (il est inséré automatiquement si vous utilisez la syntaxe wiki).

minigalerie_small.png minigalerie_thumbnail.png minigalerie_medium.png

À voir en live ici pour une galerie avec des formats thumbnail ou bien là pour des formats small ou là pour des formats medium.

Insérer toutes les miniatures (avec lien vers le grand format) en plaçant une miniature par paragraphe (en syntaxe wiki, cela veut dire qu’il faut sauter une ligne entre deux liens-images). Puis placer le tout dans une boîte (div) avec la classe commune expo plus une classe spécifique selon le format de miniature que vous avez choisi (expo_t pour les thumbnails, expo_s pour les small, expo_m pour les medium).

Si vous rédigez votre billet en wiki, il faut placer avant la première photo le code suivant :

///html 
 <div class="expo expo_s">
 ///

et une ligne vide et faire suivre la dernière image, après une ligne vide, par le code suivant :

///html 
 </div>
 ///

expo_s est évidemment à adapter à la taille des miniatures utilisées.

Cadeau bonusse

Si vous souhaitez utiliser ces styles ailleurs que sur ductile Focus, ajoutez ces lignes dans votre feuille de style :

/*
mini-galeries
*/	
.expo {
	text-align: center;
	line-height: 1.2;
	}
.expo p {
	border: 1px solid #ccc;
	background: #f2f2f0;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
	}
.expo_m p {
	padding: 12px 8px 32px;
	font-size: .875em;
	margin: 1em;
	}
.expo_s p {
	padding-top: 8px;
	width: 260px;
	height: 280px;
	margin: 6px 4px;
	font-size: .875em;
	}
.expo_t p {
	padding-top: 6px;
	width: 116px;
	height: 132px;
	margin: 6px 4px;
	font-size: .75em;
	}
.expo p img {
	display: inline-block;
	margin: auto;
	border: none;
	padding: 0;
	border: 1px solid #fff;
	}
.expo a {
	text-decoration: none;
	color: #000;
	}
.expo a:after { 
	content : attr(title); 
	display: block; 
	position: absolute; 
	padding: 3px 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #e3e3df;
	}
.expo p a:hover, .expo p a:focus {
	color: #ab164d;
	}