Module Spécial Compatible Joomla 3.x Responsive

Description

LM-MASONRY

Le module LM-Masonry permet comme son nom l'indique d'utiliser le script Masonry pour l'affichage de blocs dans Joomla.

S'il trouve tout son sens pour les blogs de catégories, il se veut universel et peut être utilisé dans toutes les situations à condition que l'organisation des blocs le permette.

Il est possible d'avoir plusieurs modules, assignés à des menus spécifiques, pour gérer différents contextes.

Le module gère uniquement les options de Masonry utiles pour un site Joomla.

Le module permet d'indiquer le nombre de colonnes en vue large ( >640px). Au-dessous, une seule colonne occupe toute la largeur.

Installation

Si l'installation du module est classique, il sera nécessaire de créer des surcharges (overides) pour les éléments affichés.

Vous pouvez télécharger les exemples fournis et les copier dans le dossier HTML de votre template. Vous pouvez les utiliser en l'état ou vous en inspirer pour créer les vôtres.

Les paramètres dans 'Affichage du blog' pour le nombre de colonnes et la succession des articles n'ont plus de sens lorsque le module est actif et devront être ignorés.

Il faudra également adapter le CSS en fonction des classes utilisées dans les surcharges.

Configuration

Les paramètres sont suffisamment documentés pour permettre un réglage sans souci. Pour pouvoir s'adapter à tous les templates, la largeur des colonnes est à indiquer en pourcentage. Les valeurs standards sont indiquées dans la description au survol du libellé. Faites des tests.

Le module est à publier en position debug ou toute autre position en fin du template.

Ne pas oublier d'assigner le module aux menus concernés.

LM-Masonry - configuration
  • Classe ou ID du bloc conteneur : Nom de la classe ou de l'ID du bloc parent.
    Ne pas oublier le point pour une classe et le dièse pour un ID
  • Classe du bloc enfant : Nom de la classe pour les blocs enfants.
    Ne pas oublier le point devant le nom de la classe

LM-Masonry - configuration
  • Espace horizontal entre blocs : Espace horizontal entre blocs en pixels (ne pas indiquer l'unité, exemple: 5).
    Pour une adaptation facile aux différents templates, il est conseillé de le conserver à zéro et d'ajouter un padding aux blocs enfants
    note: L'espacement vertical est à définir par les CSS.
  • Padding blocs enfants : padding horizontal interne à chaque blocs. Cette solution ajoute visuellement une marge aux extrémités de chaque ligne de blocs, mais permet une meilleure gestion des espaces avec les templates délicats.
  • Durée transition : Délai pour l'animation du déplacement des blocs. 0.4s par défaut. 0s pour désactiver l'animation.
  • Attente pour chargement images : si la taille des images n'est pas spécifiée, masonry est incapable de calculer la hauteur des blocs. Cela peut conduire à un chevauchement des blocs. Cette option permet de réafficher les blocs après le chargement de toutes les images.

LM-Masonry - configuration
  • Largeur du conteneur parent : Il s'agit de la largeur du conteneur en pixels (bloc parent, indiqué en premier en haut de cette page) si aucune media-querie n'est active.
    exemple: 960.
  • Nombre de colonne(s) : Nombre de colonnes affichées dans la largeur indiqué ci-dessus
  • Configuration responsive : indiquer une configuration par ligne comprenant:
    largeur point de rupture; largeur conteneur; nombre de colonnes
    ex: 480;440;2 signifie que pour un écran d'une largeur inférieure à 480px, des marges latérales de 20px sont ajoutées et que les items sont affichés sur 2 colonnes.
    Conseil: indiquer les points de rupture définis dans le template utilisé et la largeur du bloc parent dans chacun des cas.
  • Règles CSS complémentaires : Vous pouvez indiquer ici toutes les règles CSS que vous souhaitez.
    Exemple:
    #masonry > .item { text-align: center; }

CSS

Pour information, je note ci-dessous le code SCSS et son équivalent CSS utilisé pour ce site

#masonry {
	.item { // padding pour séparer les blocs avec gutter=0
		padding:5px;
	}
	.item-inner {
		border: 1px solid #069;
		.page-header,
		h2 {
			background-color: #069;
			padding:5px;
			margin :0; 
			a {
				color: #fff;
				&:hover {text-decoration: none; color:$jaunePale}
			}
		}
		.item-content {
			padding:6px; 
		}
		.item-topbar {
		  border-bottom:1px solid #ccc;
		}
	}
}
#masonry .item {
  padding: 5px;
}
#masonry .item-inner {
  border: 1px solid #069;
}
#masonry .item-inner .page-header, #masonry .item-inner h2 {
  background-color: #069;
  padding: 5px;
  margin : 0;
}
#masonry .item-inner .page-header a, #masonry .item-inner h2 a {
  color: #fff;
}
#masonry .item-inner .page-header a:hover, #masonry .item-inner h2 a:hover {
  text-decoration: none;
  color: #fffacd;
}
#masonry .item-inner .item-content {
  padding: 6px;
}
#masonry .item-inner .item-topbar {
  border-bottom: 1px solid #ccc;
}

Téléchargement

Module

Exemples de surcharge

  • Historique des versions
    • 9/06/16 - version 2.1
      • ajout test sur configurations responsives (div/0) et message erreur
      • suppression ligne vide (trim) avant analyse paramétres
      • ajout aide dans les paramétres
    • 22/04/15 - version 2.0
      • calcul automatique des largeur colonnes
      • gestion padding bloc item
      • gestion de configurations responsives illimitées
    • 07/12/14 - version 1.1
      • remplacement du nombre de colonnes par sa largeur (%) en vue large.
        ce qui permet de l'ajuster en fonction du gutter et du template.
      • correction language
      06/12/14 - version 1.0

Démonstration

Vous pouvez voir ce module en action sur ce site.

Support

Pour partager vos questions et suggestions, c'est sur le forum LM-Masonry

Print Friendly and PDF