"/>

Créer un affichage Masonry sans plugin

Voici un exemple de code css qui va nous permettre de spliter une page en plusieurs colonnes.

Ce code vaut pour des classes css  d’un thème wordpress par défaut.Pour tout autre cas, il suffira juste d’indiquer les bonnes classes dans votre fichier css

Voici donc un exemple de css qui vous permettra d’afficher vos articles en colonne sur la home page ou la page blog de votre thème wordpress :

body.blog div#content, body.archive div#content {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 0;
	-webkit-column-gap: 0;
	column-gap: 0;
}


body.blog article, body.archive article {
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
}


@media only screen and (max-width : 1024px) {

	body.blog div#content, body.archive div#content { 
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
	}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

	body.blog div#content, body.archive div#content { 
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
}

@media only screen and (max-width : 768px) {

	body.blog div#content, body.archive div#content { 
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
}

@media (max-width : 480px) {
	body.blog div#content, body.archive div#content { 
			-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	
}

La propriété column-count permet de scinder la page en colonne mais attention, cela peut ne pas convenir dans tous les cas car les articles seront rangés de haut en bas et non de gauche à droite.A vous donc de voir s’il n’est pas plus utile d’utiliser un classique float: left ou display:inline, en fonction de vos besoins.

En fonction des styles du thème, il faudra sans doute jouer sur les marges des articles.et selon les cas il peut etre utile d’ajouter une propriété display: inline ou inline-block aux articles.

Afficher sa galerie en colonne

Un affichage masonry en trois colonnes

Pour une galerie wordpress, le principe est le même, on cible juste les classes gallery, et gallery-item

.gallery { 
	-moz-column-count:3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap:0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

.gallery-item{ 
    margin: 0;
    width: 100%;
   
}

@media only screen and (max-width : 768px) {
    .gallery {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (max-width : 480px) {
    .gallery {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

 

Grâce aux media queries, on aura nos trois affichages:

En mode destkop: 3 colonnes

masonry-style

En mode tablette: 2 colonnes

masonry-tablet

Et enfin en mode mobile: 1 seule colonne

masonry-mobile

Ce style css vous permettra d’obtenir tout de suite un effet « masonry » sur vos galeries. Comme la galerie s’affiche désormais uniquement en trois colonnes, la taille d’image idéale est ici la taille ‘miniature’. Les images « moyenne » ou « grandes » ne seront pas interprétées par wordpress, ce qui est normal puisqu’elles ne rentreraient pas dans trois colonnes. Ces paramètres sont à régler dans le backoffice, au moment de l’édition de la galerie.

les réglages des galeries wordpress

Un affichage en deux colonnes

Voici une autre approche, en mobile first. On force ici l’affichage en deux colonnes toujours avec la propriété column-count.

.gallery {
  columns: 1;
  column-gap: 5px;
}
.gallery-item {
  display: inline-block;
  vertical-align: top;
  margin:0 0 5px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {  
	.gallery {
    columns: 2;
  }
}
@media only screen and (min-width: 1024px) {
  .gallery {
    columns: 2;
  }
}

galerie en deux colonnes

Le résultat et les inconvénients sont les mêmes. Comme la galerie s’affiche désormais uniquement en deux colonnes, la taille d’image idéale est ici la taille ‘moyenne’. Les images « grandes » ne seront pas interprétées par wordpress, ce qui est normal puisqu’elles ne rentreraient pas dans deux colonnes. Et en choisissant la taille d’image miniature, on se retrouve avec des marges de chaque côté.

L’inconvénient des méthodes précédentes

L’inconvénient dans ces méthodes, c’est qu’on cible directement la classe principale .Gallery,  Cela force l’affichage du nombre de colonne pour chaque taille d’écran, et ce quelque soit les paramètres choisis par l’utilisateur. Le menu déroulant du nombre de colonnes qui génère les classes « column-2‘, « column-3 » , ainsi que celui des tailles n’a plus d’effet.

Donner à ses galeries un style « masonry »

Voici une alternative pour appliquer le style masonry aux colonnes de la galerie par défaut wordpress. Cette méthode est à adapter à vos besoins, et à étendre pour chaque nombre de colonnes.

.gallery-columns-2 { 
    -moz-column-count:2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap:5px;
    -webkit-column-gap: 5px;
    column-gap: 5px;

}
.gallery-columns-3{
    -moz-column-count:3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap:5px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
}

.gallery-item{ 
    width: 100%;
    margin: 0 0 5px;
   
}
.gallery-columns-2 .gallery-item:not(.emoji),.gallery-columns-2 .gallery-item img:not(.emoji), .gallery-columns-2 .gallery-item a:not(.emoji) {
    width: 410px !important;
    max-width: 100% !important;
   
}
.gallery-columns-3 .gallery-item:not(.emoji),.gallery-columns-3 .gallery-item img:not(.emoji), .gallery-columns-3 .gallery-item a:not(.emoji) {
    width: 270px !important;
    max-width: 100% !important
}
.gallery{
	 margin-bottom: 1rem;
}
@media only screen and (max-width : 768px) {
    .gallery {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
         -moz-column-gap:5px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
    }
}

Les galeries par défaut wordpress

A partir du backoffice lorsqu’on édite une galerie, on a le choix du nombre de colonnes. L’affichage de la galerie en deux colonnes va générer la classe .column-2, l’affichage en trois colonnes va afficher la classe .column-3 etc. On peut donc appliquer notre propre style à ces classes, forçant ainsi wordpress à s’adapter à une nouvelle mise en page.

les réglages des galeries wordpress

Adapter les galeries wordpress

Pour les galeries en deux colonnes, je force wordpress à adopter le style « column-count« . Là encore on casse l’ordre d’affichage puisque les éléments s’affichent de haut en bas, et non plus de gauche à droite. Par contre, le « column-gap » me permet d’indiquer les marges à appliquer entre les colonnes. Comme je connais la largeur de mon conteneur principal, je force ici la taille des images à 410px pour l’affichage en deux ou trois colonnes, et à 270px pour les trois colonnes. Ces tailles correspondent à des tailles prédéfinies dans la fonction add_image_size(). Ces largeurs vaudront autant pour les images portrait que paysage.

Avec ce style, les deux colonnes auront l’apparence suivante :

style masonry à une galerei wordpress

En mode portrait :

galerie wordpress mode portrait

Plusieurs tailles d’images:

galeries wordpress améliorées

Les limites de la méthode column-count en css

Les deux méthodes utilisant la propriété column-count ont l’inconvénient de modifier l’ordre d’affichage des images. En fonction du nombre d’images et de leur taille, il faudra manuellement organiser les images dans le backoffice pour obtenir un aspect propre comme sur la dernière image ci-dessus,. Autrement, en chargeant en vrac plusieurs images de tailles différentes (paysages ou portraits), il y aura des débordements, comme ci-dessous.

débordement de galerie wordpress

 

Certes contraignant, c’est déjà une première approche pour obtenir un affichage personnalisé de ses galeries dans wordpress.

 

 

Laisser un commentaire

Votre adresse e-mail 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.