ZCM - Squelette modulaire SPIP/ZCore

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

grillade cheatsheet
Taille des fonts

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>

Doc complète.

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)

Doc complète.

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.

Doc complète.

<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.

Doc complète.

<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.

Taille des fonts

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/