Le Blog

Le blog laboratoire de F.L.D. Studio
0

Le projet Mosaic

Conception A - 1923 - Piet MONDRIAN

Introduction

La légende dit que c'est en regardant le tableau « Conception A » peint en 1923 par Piet Mondrian que l'idée m'est venue...

Le projet mosaïque est née de l'envie de présenter une galerie de photos non plus sous la forme d'une suite d'images de tailles égales réparties en lignes et en colonnes mais sous la forme d'une mosaïque.

Des solutions existent déjà sous la forme de plugins de la librairie jQuery.

Une autre s’appuie sur les particularités du display de type flexbox et du pur JS.pour déterminer le ratio de l'image et lui appliquer la classe ad-hoc :  http://demosthenes.info/blog/929/Modern-Masonry-with-Flexbox-and-JavaScript


En pur CSS3 :  http://designshack.net/articles/css/masonry/


Toutes ces solutions fonctionnent très bien y compris en mode "responsive design", mais est-il raisonnable d'utiliser une librairie de presque 100Ko plus un plugin pour afficher 6,7, 10 images... La solution CSS flexbox ou mieux encore CSS pur, basée sur la propriété column-count ne fonctionnent sous IE qu'à partir de sa version 10.

C'est pour cette raison que le projet mosaic n'utilise que quelques lignes de règles CSS basées sur le modèle des flottants et un objet PHP. L'impact mémoire est très léger, l'affichage immédiat, l'activation de Javascript dans le navigateur sans importance.

Compatibilité des navigateurs pour le mode display:float ;

  • Internet Explorer 4.0
  • chrome 1.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

La norme WC3 en français :  http://www.yoyodesign.org/doc/w3c/css2/visuren.html#float-position

Pré requis

Pour utiliser la mosaic il faut :
Un serveur PHP pour héberger et exécuter l'objet mosaic.php, quelques rêgles de style CSS et … c'est tout !

Paramétrer une mosaique

Pour paramétrer l'objet mosaic et en tirer tout le potentiel, une interface utilisateur à été développée. Elle est composé de deux niveaux. Dans le premier se trouve les paramétres obligatoires concernant les images à afficher et leur container. Il s'agit du mode standard . Le mode expert permet lui de gérer plus de paramétres. Interface

Interface de paramétrage de la mosaique en mode expert

Par défaut nous sommes en mode standard , seul les paramètres minimaux nous sont proposés :

  • Largeur du container de la mosaïque. (seul paramètre réellement obligatoire)
  • Marge souhaitée entre chaque images  ( 15 par défaut )
  • Taille de la bordure  ( 0 par défaut )
  • Format de l'image  ( Numérique par défaut )
  • Le mode (  Standard par défaut )

Remplir les champs et cliquer sur le bouton Générer permet d'obtenir, le code CSS à intégrer dans sa feuille de style et le code PHP pour utiliser la mosaïque. A noter que ce code PHP est en fait l'appel et le paramétrage d'une fonction qui sert d'interface entre le code qui héberge la mosaïque et l'objet mosaïque. Cette fonction reste à la charge du développeur. Voir : Fonction PHP

Cliquer sur le bouton Prévisualiser et 10 images seront affichées dans un nouvel onglet. Il est bien sur possible de modifier cette valeur selon ses propres besoins et de tester le comportement de la mosaique en fonction des quantités d'images à afficher. Cette prévisualisation fournie une information textuelle, les gabarits utilisés pour concevoir la mosaïque et une représentation graphique.  Les images sont obtenues à l'aide du serveur   http://fpoimg.com/

Comment ça marche ?

La question que doit résoudre l'objet mosaïque est : comment afficher une quantité de X images ?

Pour cela il dispose d'un ensemble de gabarits. Un gabarit représente une disposition et une quantité d'images. Ainsi il existe un gabarit pour afficher 1,2,3 images jusqu’à 9. Les gabarits sont constitués à l'aide de 6 forme de bases que l'on trouvent dans les règles CSS. Ci dessous les 9 gabarits utilisés par défaut. Notez la lettre A qui précedent la quantité. Les gabarits de classes A sont ceux que le programme utilisent par défaut. Il existe des gabarits B qui sont des gabarits de classe A en représentation inversée (mirroir) et aussi des gabarits de classe C qui affichent des quantités avec des représentation différentes et leur représentations inversée désignées par la classe D.

Les 9 gabarits

Les 9 gabarits classe A

Pour afficher une quantité d'images, il existe plusieurs façons de procéder.
On peut parcourir la collection des gabarits en partant des plus grands pour aller vers le plus petit.

Exemple pour afficher 18 images :

  • Gabarit 9 + Gabarit 8 + Gabarit 1

En parcourant la collection en sens inverse, du plus petit au plus grand on obtient :

  • Gabarit 1 + Gabarit 2 + Gabarit 3 + Gabarit 4 + Gabarit 5 + Gabarit 3

Comme on peut le constater le sens de parcours à une influence sur la hauteur totale de la mosaïque et aussi la taille des images affichées.

Comparaison Descendant/Ascendant

A gauche une représentation descendante de 18 images, à droite la même quantité en représentation ascendante.

Par défaut, en mode standard la collection est parcourue dans le sens descendant. Ceci permet d’obtenir une mosaïque de taille moyenne.
Les autres options sont obtenues en utilisant le mode expert.


Le mode Expert

En mode expert on accéde à une palette plus étendue de réglages de fonctionnement de l'objet mosaic.

Régler   l'ordre de parcours de la collection des gabarits. Par défaut le programme fonctionne avec des gabarits de classe A (Automatique) parcourus dans le sens descendant (du plus grand au plus petit). On peux modifier l'ordre en passant en mode ascendant et parcourir les gabarits en partant du plus petit pour aller vers le plus grand.

Afin d’optimiser le nombre de gabarits utilisés il est possible en mode parcours ascendant de compacter le résultat afin de minimiser le nombre de gabarits de taille 1,2,3 et 4 vers des gabarits contenant 2,4,6,et 8 images.

Exemple pour afficher 18 images :

  • sans compactage : Gabarit 1 + Gabarit 2 + Gabarit 3 + Gabarit 4 + Gabarit 5 + Gabarit 1 + Gabarit 2 
  • avec compactage : Gabarit 2 + Gabarit 8 + Gabarit 3 + Gabarit 5

En mode Descendant le mode regroupe permet d'utiliser le plus de fois possible les gabarits permettant de représenter les quantités.

Exemple pour afficher 18 images :

  • sans regroupement : Gabarit 9 + Gabarit 8 + Gabarit 1
  • avec regroupement : Gabarit 9 + Gabarit 9

Définir des gabarits préférés . Par défaut le programme utilisent les gabarits de classe A. On peut lui redéfinir les gabarits à utiliser à sa convenance soit en lui fournissant une collection complète (tous les gabarits de 1 à 9) pris dans différentes classes, soit quelque un uniquement.

Exemple : pour afficher 18 images avec des gabarits C3 et C5 :

  • En mode ascendant : C3 + C5 + A2 + C3 + C5
  • En mode descendant:  C5 + C3 + C5 + C3 + A2

Concevoir un  schéma d'introduction . Les premières images de la mosaïque utiliseront le/les gabarits sélectionnés avant de traiter la quantité d'images restantes en suivant la régle de parcours et les gabarits préférés..

Concevoir un  motif . Le programme utilisera les gabarits sélectionnés en les répétant afin de fabriquer un motif. Dans ce cas l'option  miroir  permet d'obtenir une représentation alternées (dans la mesure ou le gabarit miroir existe)

L'option Mélanger permet au final d'obtenir un résultat aléatoire et donc une représentation différente à chaque nouvel affichage de la page.

Fonction PHP

La  fonction f_imgMos() permet de réaliser l'interface entre l’environnement d'utilisation de la mosaïque (script PHP) et l'objet mosaic. Elle reste à la charge du développeur qui doit la concevoir en tenant compte de son environnement de travail et de sa source de données (Base de données, Array(), API Flickr, etc...)

La fonction reçoit deux paramètres. Le premier représente le nombre d'images à afficher et le second est un objet au format JSON contenant tous les paramètres necessaires à l'objet mosaic. L'avantage du compactage des paramètres de la mosaic au format JSON est que la présence ou l'absence des paramétres est facile à gérer,ils sont très explicites et leur ordre d'apparition sans importance.

Exemple utilisation de la fonction avec passage de paramètres au format JSON :

 
f_imgMosaic( Parametre_1 , '{ "width":"400", "height":"300", "test":true, "plugin":"fancyBox" }' );

A noter  : 

Parametre_1 : Un paramétres qui permet de comptabiliser le nombre d'images à afficher. Exemple : Le nombre d'image à afficher, le ID d'une galerie, etc...

Dans l'exemple les paramétres "test":true, et "plugin":"fancyBox", sont optionnels. Ce sont des paramètres ajoutés à l'objet JSON qui conviennent à l'utilisation de notre fonction. Si on souhaite utiliser plusieurs plugings comme SwipeBox et LazyLoad on définira la liste des plugins dans une seule chaine séparée par des virgules. Exemple : "plugin":"swipeBox,lazyLoad". La aussi rien n'est imposé. On peut rajoutter d'autres valeurs à sa convenance, en  fonction de ses besoins et les gérer au sein du code de sa  fonction.

Les images à afficher ont toute la même taille, celle de la plus grande.  C'est le code CSS qui permettra de les afficher en plus ou moins grand en fonction de leur emplacement dans la mosaique.

Appel et contenu de la fonction : f_imgMos()

Les seuls paramétres obligatoires de l'objet JSON pour déclarer l'objet mosaic sont :

  • width ( largeur d'une image = largeur du container )
  • height ( hauteur d'une image, en fonction du format choisi, numérique, reflex, carré ou vidéo )
  • Au sein de la fonction il faut disposer du code permettant d'obtenir les images et leur quantité.
  • Pour lancer la conception de la mosaique, utiliser la méthode ->make( Nombre total d'images )
  • Pour réaliser l'affichage des images utiliser la méthode ->getClass( N° de l'image )

Exemple contenu minimal de la fonction :

Lignes

  • 01 : Décoder l'objet JSON
  • 02: Isoler la valeur width
  • 03: Isoler la valeur height
  • 04: Le code pour récupérer les images et leur nombre
  • 05: Appel du code de mosaic.php si pas de fonction autoload ou de gestion des dépendances.
  • 06: Déclarer une instance sur l'objet mosaic, new mosaic;
  • 07: Passer le paramétre nombre d'image à afficher à l'objet mosaic à laide de la méthode make
  • 08: Déclarer une division container de la mosaique avec le code  CSS : wp-mosaic
  • 09: Dans une boucle de 1 à x ( x = nombre d'images à afficher) ou un foreach ...
  • 10: Appliquer une classe à la balise <figure> ( ou une balise <div> ) en utilisant la méthode getClass (N° de l'image )

A noter :  Utiliser la balise <img> dans préciser de taille pour les images.

//------------------------------------ 
function f_imgMosaic($param){ 
//----------------------------------- 
01 $decode = json_decode($param); 
02 $w=(array_key_exists('width',$decode)) ? $decode->width:'400';
03 $h=(array_key_exists('height',$decode)) ? $decode->height:'300'; 

04 // Ici le code de récupération des images et leur nombre : $nbrImg
//... 

 05 require 'mosaic.php'; 
 
06 $mosaic = new mosaic($param);

07 $mosaic->make($nbrImg);?>
 
08 <div class="wrp-mosaic"> 

09  <?php for ($i=0; $i < $nbrImg ; $i++) { ?> 
10  <figure class="<?php $mosaic->getClass($i);?>">
     <img src="...source image..."> 
    </figure> 
   <?php } // fin boucle ?> *
   </div>
   <?php } // fin fonction ?>

Download

Carnet de route :

Catégories: Développement WEB

Tags: Utilitaire pour intégrateur

Commentaires: Pas de commentaires

Envoyer un commentaire