Mosaique d'images dans une page statique

NaBiSs · mars 2011

Bonjour à tous,

Je viens apporter ma petite pierre à l'édifice en aidant ceux qui recherchent un script créant une mosaïque d'images automatiquement et simplement.

Principe du script :

Le script vient chercher les images d'un dossier, crée les miniatures à la volée qu'il vient stocker dans un répertoire cache, puis affiche les miniatures avec les liens vers l'image taille originale.
Rien de nouveau si ce n'est que ces miniatures sont carrées, ce qui permet d'avoir un effet sympa.

Dans un premier temps, créez une page statique et collez-y le code suivant :

<?php
	$rep = "data/images/realisations"; // Répertoire contenant les images
	$cache = "cache"; //nom du dossier à créer pour le cache
	$taille = "60"; // Taille des miniature $taille x $taille en pixel

$tableauFichiers = array();
	$dossier = opendir($rep);
	while ($fichier = readdir ($dossier)){
		if($fichier != '.' && $fichier != '..' && $fichier != $cache){
			$tableauFichier[] = $fichier;
		}
	}
	$nbImg = count($tableauFichier); // nombre d'images dans le dossier

// fonction enlevement extension
	function backstr($haystack, $needle) {
       return substr($haystack, 0, strlen($haystack) - strlen(strstr($haystack,$needle)));
	}
	if (!file_exists($rep.'/'.$cache)){ // Si le fichier cache n'existe pas
			mkdir($rep.'/'.$cache); //création du repertoire
		}
	//Fonction génération miniature
	function images_resize_carree($src, $dest, $largeur, $pos){
		list($srcX, $srcY, $type, $attr) = getimagesize($src);
		$imgSrc=imagecreatefromstring(file_get_contents($src)); 
		if (empty($imgSrc)){ 
			return false; 
		}
		if($srcX>= $srcY){
			$dim=$srcY;
			$horizontale=true;
		}
		elseif($srcX<= $srcY){
			$dim=$srcX; 
			$verticale=true;
		}
		else{
			$dim=$srcX;
		}   
	//on determine le point de depart x,y
		if($horizontale){
			switch($pos){
				case "left":
					$point_x_ref="0";
					$point_y_ref="0";
					break;
				case "right":
					$point_x_ref=($srcX)-($dim);
					$point_y_ref="0";
					break;
				default: 
					$point_x_ref=($srcX/2)-($dim/2);
					$point_y_ref="0";
					break;
			}
		}
		elseif($verticale){
			switch($pos){
				case "top":
					$point_x_ref="0";
					$point_y_ref="0";
					break;
				case "bottom":
					$point_x_ref="0";
					$point_y_ref=($srcY)-($dim);
					break;
				default: 
					$point_x_ref="0";
					$point_y_ref=($srcY/2)-($dim/2); 
					break;
			}
		}
$imDest=@imagecreatetruecolor($largeur, $largeur); 
        imagecopyresampled($imDest, $imgSrc, 0, 0, $point_x_ref, $point_y_ref, $largeur , $largeur, $dim, $dim); 
		imagedestroy($imgSrc); 
		imagejpeg($imDest, $dest, 100); 
		imagedestroy($imDest); 
		return true;
		}
	$chemin = $rep.'/'.$cache.'/'; //chemin répertoire cache
        echo '<p>';
for($i=0; $i<$nbImg; $i++){
	$extension = strrchr($tableauFichier[$i],'.');// récupérer l'extension avec le point
	$fichierWext = backstr($tableauFichier[$i],'.');//fichier sans extension
	$imgThumb = $fichierWext.'-thumb'.$extension;//nom complet miniature
	$racine = $rep.$selecteur.'/'.$tableauFichier[$i]; //chemin de l'image taille normale
	if (!file_exists($chemin.$imgThumb)){ //Si la miniature n'existe pas, on la créer
		images_resize_carree($racine,$chemin.$imgThumb,$taille,"");
	}
	echo '<a href="'.$rep.$selecteur.'/'.$tableauFichier[$i].'" class="fancybox" rel="fancy" ><img src="'.$rep.'/'.$cache.'/'.$imgThumb.'" alt="'.$fichierWext.'" /></a>';
	echo "\n";
	}
	echo "</p> \n";
?>

Vous l'aurez compris, dans ce cas le répertoire d'images est dans data/images/realisations.
Pour modifier la tailles des miniatures, ajustez la variable $taille.

Pour rendre l'affichage plus sympa, je vous conseille un soupçon de javascript avec slimbox ou fancybox.

Dans mon cas, j'ai utilisé fancybox et édité le fichier header.php en ajoutant entre les balises "head" :

<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/fancybox/jquery.easing-1.4.pack.js"></script>
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/js/fancybox/jquery.fancybox-1.3.4.css"
<script type="text/javascript">
	$(document).ready(function() {
	$("a.fancybox").fancybox({
	'overlayShow'	: false
});

En aillant pris soin de mettre les fichiers javascript et css nécessaires de Fancybox dans le répertoire js/fancybox de mon thème (Fancybox utilise la librairie JQuery, vérifiez qu'elle est bien appelée dans vos pages).

Ensuite il suffit de pimper son affichage avec les différentes alternatives offertes par fancybox.

EDIT 1 : Maintenant compatible avec plusieurs extensions d'images (JPG/GIF/PNG). Attention, la transparence est mal gérée lors de la création de la miniature.

Andrea · avril 2011

Merci de partager cette solution

PS: Il manque une balise p (étant donné qu'il y en a une à la fin)

En tout cas je trouve que les miniatures générées sont mieux "croppées" que celles dans le gestionnaire d'images de Plux !

alors je me demande un peu pourquoi ;-) c'est peut-être [aussi] du à mes images! j'ai fait que quelques tests sans plus

mais disons que les miniatures sont mieux centrée! je ne sais pas si c'est très clair...

A+

bg62 · avril 2011

as-tu une "demo" quelque part ?

Andrea · avril 2011

pas en ligne ;-) mais je vais essayer de faire des tests avec plus d'images

NaBiSs · avril 2011

Vous trouverez un exemple ici : [url=http:#]EXEMPLE DE GÉNÉRATION DE MINIATURE CARREE[/url].

EDIT : lien mort, sorry ..

bg62 · avril 2011

ok ... vu ...
"carré" pas le top .. il faudrait que cela puisse s'adapter aux proportions des images ...
mais le problème reste le même : peut-on créer des galeries différentes et indépendantes ??
exemple:
http://www.unesourisetmoi.info/autos/index.php
(vois le système de galeries différentes géré avec un simple code)
@+

NaBiSs · avril 2011

Sur ce site, les images ont le même rapport dimensionnel. Quand j'ai mis en place ce script, j'avais besoin d'avoir des miniatures équidimensionnelles sans pour autant déformer les images d'origine.

Pour un souci de mise en page, la seule solution reste bien de rogner l'image afin de ne pas la déformer.
Je pense avoir compris ce que tu veux dire, en gros l'idée c'est de privilégier un coté plus que l'autre ?
Admettons on redimensionne les images selon une certaine hauteur, ensuite on rogne sur la largeur.

Tout dépend de ce que l'on souhaite au final.

Stéphane · avril 2011

Bonjour NaBiSs

Est-ce que ton script fonctionne avec des images sources qui ne sont pas en jpg. car en regardant le code, tu utilises imagecreatefromjpeg.

bg62 · avril 2011

NaBiSs a écrit:

Sur ce site, les images ont le même rapport dimensionnel. Quand j'ai mis en place ce script, j'avais besoin d'avoir des miniatures équidimensionnelles sans pour autant déformer les images d'origine.

Pour un souci de mise en page, la seule solution reste bien de rogner l'image afin de ne pas la déformer.
Je pense avoir compris ce que tu veux dire, en gros l'idée c'est de privilégier un coté plus que l'autre ?
Admettons on redimensionne les images selon une certaine hauteur, ensuite on rogne sur la largeur.

Tout dépend de ce que l'on souhaite au final.

???
non pour moi le soucis est le 'format' (proportions) des "imagettes" ou "thumbs" ... qu'elles soient adaptées à celui des images qui vont ensuite s'afficher en cliquant dessus ...
là on a des "carrés" partout

NaBiSs · avril 2011

Stéphane a écrit:

Bonjour NaBiSs

Est-ce que ton script fonctionne avec des images sources qui ne sont pas en jpg. car en regardant le code, tu utilises imagecreatefromjpeg.

Bien vu Stéphane, je vais corriger, ça devrait être simple étant donné que je gère les extensions par la suite. je n'ai pas fait attention, j'utile que des jpeg pour mon application.

bg62 a écrit:

???
non pour moi le soucis est le 'format' (proportions) des "imagettes" ou "thumbs" ... qu'elles soient adaptées à celui des images qui vont ensuite s'afficher en cliquant dessus ...
là on a des "carrés" partout smile

Je ne comprends pas bien, dans ce cas tu peux utiliser le resize proposé par défaut par Pluxml, non ?

bg62 · avril 2011

"rezise" ?? peux expliquer un peu plus ?

NaBiSs · avril 2011

Par défaut pluxml propose de redimensionner des images il me semble, cela ne répond pas à ton besoin ?

bg62 · avril 2011

NaBiSs a écrit:

Par défaut pluxml propose de redimensionner des images il me semble, cela ne répond pas à ton besoin ?

non !
ce que je désires c'est que, dans une galerie, l'affichage des vignettes, ou thumbs, soit "proportionnel.
Autrement dit:
si l'image est "carrée" = thumb carré
si l'image est "horizontale" = thumb horizontal
si l'image est "verticale" = thumb vertical
exemple :
http://www.unesourisetmoi.info/autos/fonds-ecran-gratuit-automobile-ferrari.php
pour des images au format "wallpaper" par exemple , la taille des 'thumbs' est paramétrable, indépendamment de celle des images réelles qui s'affichent au clic, et que l'on met en ligne aux dimensions que l'on veut

ok ?

Bloody · avril 2011

Si vous voulez un script léger en php qui permet de choisir la taille, la compression, le type de zoom de la miniature, passer les images en sépia ou noir et blanc, etc ... il y a TimThumb.

Le paramétrage de la création de la miniature se fait directement dans l'url de l'image. C'est donc très facile à mettre en place. Les miniatures sont mises en cache dans 1 répertoire.
Exemple d'url de création de la miniature (le script est ici placé dans le thème) :

<img src="<?php $plxShow->template(); ?>timthumb.php?src=image-de grande-taille.jpg&h=80&w=210&&q=80" alt="" />

h=hauteur de 80 pixels - w=largeur de 210 pixels - q=compression à 80%

Une 1ère démo de base.
Une 2nde démo avec usage des filtres images.

Je ne sais pas si ça peut vous aider.

bg62 · avril 2011

pas mal ... mais toujours pas ce que je cherche ... il faudrait qu'elles soient 'cliquables' pour les voir en taille 'réelle'

Bloody · avril 2011

Merci.

Je suis comme toi, moi aussi je voudrai qu'elle soient cliquables.

J'ai fait une demande ici et autre là pour la 5.1 . Mais je n'ai pas de réponse pour le moment.

Je veux bien de ton soutien pour faire avancer ma demande... qui est aussi la tienne. :P

Mosaique d'images dans une page statique

Réponses