Documentation (en cours) de ZCM
L’idée de ce squelette est de moderniser ZDist V2 en le rendant HTML5 et en y intégrant différents besoins propres tels un agenda, les micro-datas, des façons d’afficher des images...
Il est (plus que) largement inspiré de Intégraal de rastapopoulos et SPIPr de Nursit.
Liste des variables personnalisables
Note importante : certaines variables sont dépréciées, notamment celles qui insèrent les css via pipeline car on passe désormais via paquet.xml
// ID de l'article contact pour les liens dans le pied de page
define('_ZCM_ID_CONTACTS','1');
// ID de l'article mentions légales pour les liens dans le pied de page
define('_ZCM_ID_MENTIONS_LEGALES','2');
// ID d'un autre article pour les liens dans le pied de page
define('_ZCM_ID_AUTRE_ARTICLE_FOOTER','10');
// Inclure le css de grillade pour les grille (voir doc pdf plus bas)
define('_ZCM_GRILLADE',true);
// Inclure le js et la css du modèle bloc dépliable
define('_ZCM_BLOCS_DEPLIABLES', true);
// Définir la balise par défaut des blocs dépliables (peut être surchargé par "balise=" mais doit être définit)
define('_ZCM_BLOCS_DEPLIABLES_BALISE', 'h2');
// Inclure la css permettant d'avoir des fonds perdus
define('_ZCM_FOND_PERDU', true);
// Définir la taille limite pour avoir, ou non, des fonds perdus
define('_ZCM_FOND_PERDU_LARGEUR', '1000px');
// Ouvrir les liens externes dans un nouvel onglet (maaaal)
define('_ZCM_LIENS_EXTERNES_BLANK', true);
Grille
La grille utilisée est Grillade V7 de KNACSS version flex pour une meilleure compatibilité.
Documentation : https://www.knacss.com/doc.html#grids
Les modèles
Les blocs dépliables (exemple)
<deplier|debut|titre=Le titre du bloc à déplier|soustitre=Le soustitre facultatif|balise=p>
Le texte à déplier
<deplier|fin>
Les inclures
Agenda
Permet d’afficher, sous la forme d’une grille (si grillade activée) de vignettes, un agenda des événements.
2 possibilités :
– les événements à venir (paramètre a_venir=oui
)
– les événements de la rubrique (paramètre saison=oui
)
Exemple d’insertion
Si on est à la racine du secteur, on est en mode agenda à venir, sin on est dans une sous rubrique, on est en mode tous les événements de la saison.
[(#ID_RUBRIQUE|=={#ID_SECTEUR}|?{
<INCLURE{fond=inclure/liste/agenda,env,ajax,id_secteur=1,affichage_long=oui,a_venir=oui,afficher_filtres=oui,afficher_mois=oui} />
,
<INCLURE{fond=inclure/liste/agenda,env,ajax,id_rubrique,affichage_long=oui,saison=oui} />
})]
Dates d’un événement
Affiche les dates d’un événement en gérant les différents cas :
– événement unique
– événement sur la durée
– plusieurs événements le même jour
– plusieurs événements sur plusieurs jours
On peut afficher les dates au format court ou long.
<INCLURE{fond=inclure/dates-evenement,id_article} />
Vignette d’article
Affiche le logo de l’article, sinon un document image lié à l’article (avec gestion du rang), sinon le logo du site. Fonctionne avec le filtre image_responsive
.
<INCLURE{fond=inclure/vignette-article,id_article} />
Les galeries et diaporamas d’images
Le portfolio
Affiche des images côte à côte avec possibilité de les agrandir : <INCLURE{fond=inclure/galerie/portfolio,id_article} />
Doc complète.
Le mosaïque simple
Affiche 2 images côte à côte : <INCLURE{fond=inclure/galerie/mosaique-simple,id_article} />
Doc complète.
Le mosaïque variable
Affiche une mosaïque de 4 images de tailles : <INCLURE{fond=inclure/galerie/mosaïque-variable,id_article} />
Doc complète.
Le diaporama
Affiche un diaporama Slick avec les images de la rubrique ou de l’article : <INCLURE{fond=inclure/galerie/diaporama,id_article} />
Doc complète.
Le diaporama "focus d’accueil"
Affiche un diaporama Slick avec les images d’une rubrique ou d’un article avec des liens : <INCLURE{fond=inclure/galerie/focus,id_article=12} />
Doc complète.
Dépendances
L’idée est de garder un minimum de dépendances dans le plugin.
<necessite nom="medias_responsive_mod" compatibilite="[1.8.0;]" />
<necessite nom="metasplus" compatibilite="[1.2.5;]" />
<utilise nom="responsivenav" compatibilite="[0.1.0;]" />
<utilise nom="slick" compatibilite="[1.2.0;]" />
<necessite nom="Zcore" compatibilite="[2.5.0;]" />
Taille des textes
1em = 16px.
Pour augmenter d’1px, augmenter de 0.625em.
Le repo
https://gitlab.com/jmoupah/zcm
To do
- mosaïque : choisir les tailles des images
- diaporama : faire fonctionner avec n’importe quel objet (auteur...)
- modèle dates-spectacle : pouvoir afficher les horaires
- Modèle vignette rwd : passer en lazyload + img_recardre proportions
Liens
Framework Z - Industrialisation des squelettes
http://spipr.nursit.com/framework-z
Zpip
https://contrib.spip.net/Zpip
Créer des squelettes avec Zcore
https://contrib.spip.net/Creer-des-squelettes-avec-Zcore
Zpip ou Z, Zcore et Thèmes
https://www.spippourlesnuls.fr/?zpip-ou-z-zcore-et-themes,189
SPIPr - SPIP reboot
http://spipr.nursit.com/
Sur la zone
SPIP-r dist
https://zone.spip.org/trac/spip-zone/browser/_squelettes_/spipr-dist
Integraal
https://zone.spip.org/trac/spip-zone/browser/_squelettes_/integraal/