Derniers billets

ZCM - Squelette modulaire SPIP/ZCore

21 avril 2018, par jeanmarie
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
// 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');
Télécharger
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

Grillade doc

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} />
})]
Télécharger
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;]" />
Télécharger
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/
Afficher sur une carte GIS des points dont on n’a que l’adresse

15 avril 2018, par jeanmarie
Le besoin

Afficher sur une carte des points dont on n’a que l’adresse.

Le cas concret

Afficher des points de ventes sur une carte à partir d’un document tableur (LibreOffice Calc, Microsoft Excel...) avec possibilité de géolocaliser le visiteur.

Le principe

Il faut géocoder les adresses, c’est à dire trouver leurs coordonnées GPS, dans un document CSV pour pouvoir les lire avec une boucle DATA et générer un fichier JSON que GIS pourra lire.

Oui, rien que ça :)

Le géocodage

Via le site adresse.data.gouv.fr, on peut géocoder des adresses en fournissant un fichier CSV de ce type :

Enseigne Adresse Code postal Ville

Magasin 1 Adresse 1 CP 1 Ville 1

Magasin 2 Adresse 2 CP 2 Ville 2

Il en ressort un fichier CSV avec différentes infos supplémentaires dont la latitude et la longitude de chaque enseigne.

Lire le fichier CSV et générer le JSON

Pour que le rédacteur ait la main sur la carte, on passe le CSV comme document joint de l’article dans lequel on va afficher la carte.

On récupère donc l’URL de ce document avec une boucle DOCUMENTS pour la passer dans une variable source via un #SET

Dans json/gis_pointsdevente.html
<BOUCLE_source(DOCUMENTS){id_article}{extension=csv}{!par date}{0,1}> #SET{source,#URL_DOCUMENT}</BOUCLE_source>
Les critères :
{extension=csv} pour ne sélectionner que les documents .csv
{!par date} pour toujours prendre le dernier documents envoyé
{0,1} pour ne prendre qu’un document

Ensuite, avec une boucle DATA, on extrait les infos souhaitées du CSV pour construire le JSON.

La petite subtilité ici est que, si une entrée n’a pas de coordonnées (parce que le géocodage n’a pas fonctionné pour une adresse par exemple), le JSON sera inutilisable.

Pour palier à ça, on teste la présence de la longitude pour chaque entrée avant de faire le JSON. Pour ce faire, vu le mélange de syntaxe SPIP/JSON, on passe par un inclure pour que ça fonctionne.

Si vous êtes sûr de votre CSV parce que vous l’avez vérifié et corrigé, vous pouvez supprimer le test et éviter ainsi l’inclure.
<BOUCLE_csv(DATA){source csv, #GET{source}}{","}{cle>0}>[(#VALEUR{4}|!={''}|oui)
<INCLURE{fond=inclure/json_pointsdevente,
id=#COMPTEUR_BOUCLE,
lon=#VALEUR{5},
lat=#VALEUR{4},
enseigne=#VALEUR{0},
adresse=#VALEUR{1},
cp=#VALEUR{2},
ville= #VALEUR{3}} />
]</BOUCLE_csv>
Télécharger
Les critères :
{cle>0} pour ne pas prendre en compte la 1ère ligne qui correspond à l’entête du tableau avec les noms des colonnes.
{","} pour respecter la syntaxe JSON entre chaque propriétée

Note
#VALEUR{0} correspond à la valeur de la 1ère colonne, #VALEUR{1}, celle de le deuxième, etc...

Dans inclure/json_pointsdevente.html
{
"type": "Feature",
"geometry": {"type": "Point", "coordinates": [[(#ENV{lon})], [(#ENV{lat})]]},
"id":"#ENV{id}",
"properties": {[
(#SET{titre,<h3>#ENV{enseigne}</h3>})]
"title":[(#GET{titre}|json_encode)],[
(#SET{description,#ENV{adresse}<br />#ENV{cp} #ENV{ville} })]
"description":[(#GET{description}|json_encode)][
(#CHEMIN_IMAGE{#ENV*{icone,0}}|sinon{#CHEMIN{#ENV*{icone,0}}}|gis_icon_properties)]
}
}
Télécharger
Afficher la carte
Dans inclure/pointsdevente.html

On affiche un lien pour que le visiteur puisse se géolocaliser avec une url type www.domaine.net/ma_page.html?geoloc=oui
<a href="[(#SELF|parametre_url{geoloc,oui})]" class="ajax">me géolocaliser</a>
Et, en fonction de la présence, ou non, du paramètre ?geoloc=oui dans l’URL, on affiche la carte avec ou sans géolocalisation du visiteur.
[(#ENV{geoloc}|=={oui}|?{
[(#INCLURE{fond=modeles/carte_gis,
objets=pointsdevente,
id_article=#ENV{id_article},
localiser_visiteur=oui})]
,
[(#INCLURE{fond=modeles/carte_gis,
objets=pointsdevente,
id_article=#ENV{id_article},
centrer_auto=oui})]
})]
Télécharger
Note
Pour simplifier le code, je n’ai gardé que les paramètres indispensables à GIS dans notre cas, mais il est possible changer le zoom si le visiteur demande la géolocalisation pour afficher les points proches de lui de façon plus lisible.

Dans le squelette de votre article
<INCLURE{fond=inclure/pointsdevente,env,ajax,geoloc=#ENV{geoloc}} />
Et hop, le tour est joué.

Merci à b_b pour la piste et les outils.

Les ressources

La base adresse nationale
Un référentiel national ouvert : de l’adresse à la coordonnée géographique
https://adresse.data.gouv.fr

La documentation du plugin GIS4
article 4189

Tester votre JSON
Utiliser l’extension JSON Lite pour votre navigateur
https://github.com/lauriro/json-lite

Sur Contrib
https://contrib.spip.net/GIS-JSON-CSV-et-boucle-DATA
Passer un tableau de valeur à un critère de façon optionnelle

29 mars 2018, par jeanmarie
Le besoin

Pouvoir filtrer le résultat d’une boucle dans un inclure en fonction de certains critères tout en gardant cette boucle fonctionnelle en l’absence de ces critères.

Le cas concret

Via un même inclure, afficher toutes les algues dans la rubrique algues et seulement celles présentes dans un produit sur la page produit avec un seul et même squelette.

Le principe

Les produits et les algues sont des articles liés entre eux par des mots clefs algues (groupe de mot-clefs 1).
Chaque article algue (rubrique 13) a le mot clef algue lui correspondant et chaque article a le(s) mot-clef(s) algue qu’il contient.

La rubrique algues

Dans la rubrique algues, c’est facile, on veut afficher toutes les algues donc on fait simplement l’inclure :
<INCLURE{fond=inclure/les-algues} />
La page produit

Dans la page produit, c’est (un peu) plus compliqué :

On commence par rentrer dans un tableau les mots-clefs algues liés au produit.
[(#REM) On déclare le tableau ]
#SET{algues,#ARRAY}

[(#REM) On boucle sur les mot-clefs de l'article et on rempli le tableau ]
<BOUCLE_alguesduproduit(MOTS){id_article}{id_groupe=1}> #SET{algues,#GET{algues}|push{#ID_MOT}}</BOUCLE_alguesduproduit>
Télécharger
Note : attention à bien laisser un espace dans la BOUCLE_alguesduproduit, sinon, elle ne renvoi rien et le tableau n’est pas rempli.

Puis, on passe tout ça à l’inclure :
<INCLURE{fond=inclure/les-algues,id_mot=#GET{algues} />
L’inclure

Ensuite, c’est dans l’inclure que ça se joue :
[(#REM) On boucle sur les articles de la rubrique 13 dont l'id_mot a été passé via un tableau à l'environnement
Pour que la boucle fonctionne même si il n'y a pas de tableau, il faut utiliser le critère conditionnel ?IN ]

<B_les_algues>
<ul>
<BOUCLE_les_algues(ARTICLES){id_rubrique=13}{id_mot ?IN #ENV{id_mot}}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
</BOUCLE_les_algues>
</ul>
</B_les_algues>
Télécharger
La doc : https://www.spip.net/fr_article4010.html
| 2
|
- SPIP
Supprimer le paramètre et l’ancre de pagination d’une url

29 septembre 2017, par jeanmarie
Soit une adresse https://www.brestculture.fr/-agenda-.html?debut_agenda_vignettes=30#pagination_agenda_vignettes dont on souhaite enlever les paramètres de pagination debut_agenda_vignettes=30 et #pagination_agenda_vignettes.

On commence par rentrer l’url de la page dans une variable nommée... url (#originalité)
var url = window.location.href;
On supprime ensuite le paramètre définissant le début de la pagination (debut_agenda_vignettes=30) en prennant en compte le fait qu’il peut être précédé d’un ’ ?’ ou d’un ’&’ (#cleverguy)
url = url.replace(/{\?,&}debut_([a-z0-9_]+)=([0-9]+)/,'');
Enfin, on enlève l’ancre de pagination.
url = url.replace(/#pagination_([a-z0-9_]+)/,'');
Si on décortique

{\?,&} Le début de la chaine recherchée est un ? ou un #

debut_([a-z_]+) on cherche un truc du genre "debut_machin_truc_avec_des_tirets_bas_et_chiffres_ou_pas"

#pagination_([a-z0-9_]+) on cherche un truc du genre "#pagination_machin_truc_avec_des_tirets_bas_et_chiffres_ou_pas"

Et le tour est joué !

Note

la regex est valable peut importe le langage

Ressources

Tester les regex : https://regex101.com ou https://regexr.com
CheatSheet : https://www.cheatography.com/davechild/cheat-sheets/regular-expressions/ ou en doc joint
|
- regex
- SPIP
- Trucs de barbus
- javascript
Manips mySQL / phpMyadmin

17 mai 2017, par jeanmarie
Ajouter des entrées dans une table existante

Associer un mot clef à plusieurs articles
INSERT INTO spip_mots_liens (id_mot, id_objet, objet) VALUES (3, 53, 'article'), (3, 52, 'article'), (3, 50, 'article');
Source http://fr.wikihow.com/cr%C3%A9er-une-table-sous-MySQL

Modifier des entrées dans une table existante

Déplacer l’article n°1 dans la rubrique 5
UPDATE `spip_articles` SET `id_rubrique`="5" WHERE `id_article`=1;
Déplacer tous les articles du secteur 5 dans la rubrique 5 (pour supprimer les sous-rubrique
UPDATE `spip_articles` SET `id_rubrique`="5" WHERE `id_secteur`=5;
Trouver les documents qui ont plusieurs rôles et n’afficher que ceux sans rôle
SELECT * FROM spip_documents_liens
WHERE id_document IN
(
SELECT id_document FROM spip_documents_liens
GROUP BY id_document
HAVING COUNT(id_document)>1
)
AND ROLE=""
Télécharger
|
Quelles sont les mentions obligatoires sur un site internet ?

4 avril 2017, par jeanmarie

Tous les sites internet édités à titre professionnel, qu’ils proposent des ventes en ligne ou non, doivent obligatoirement indiquer les mentions légales suivantes :
https://www.service-public.fr/professionnels-entreprises/vosdroits/F31228
Tester si on est sur la page d’accueil avec ZPIP

29 décembre 2016, par jeanmarie

[(#SI_PAGE{sommaire}) Hop ! ]

Source
|
- SPIP
Nettoyer le cache DNS sous windows

23 novembre 2016, par jeanmarie

ipconfig /flushdns

source
|
- Windows
Ne pas afficher un menu si il ne contient qu’une entrée

19 juillet 2016, par jeanmarie
Cas concret : on veut mettre en place un menu de navigation entre les articles d’une même rubrique. Le problème est que si on n’a qu’un article, il s’affiche, ce qui ne sert à rien et est perturbant.
<B_menu>
<div class="menu menu-container">
<ul class="menu-items menu-liste">
<BOUCLE_menu(ARTICLES) {id_rubrique} {!par titre}>[(#TOTAL_BOUCLE|>{1}|oui)
<li class="item menu-entree[ (#EXPOSE)]">
<a href="#URL_ARTICLE">[(#TITRE|couper{80})]</a>
</li>
]</BOUCLE_menu>
</ul>
</div>
</B_menu>
Télécharger
Si #TOTAL_BOUCLE est supérieur à 1, tu affiches ce que tu veux.
Sinon, le test ne renvoie rien est la boucle vide ne s’affiche pas.

Une précision importante : les crochets ouvrants et fermant du test doivent obligatoirement être collés aux balises ouvrantes et fermantes de le la boucle. Sinon, la boucle renvoie des espaces même si le test est négatif.
|
- SPIP

Enseigne	Adresse	Code postal	Ville
Magasin 1	Adresse 1	CP 1	Ville 1
Magasin 2	Adresse 2	CP 2	Ville 2

Afficher les dates des 1er et dernier évènements liés à un article

8 juillet 2016, par jeanmarie

Le but ici est d’afficher les dates des 1er et dernier évènements liés à un article.
La petite subtilité est que, si l’article à 2 évènements le même jour mais à des heures différentes, on ne veut afficher qu’une seule fois le jour pour éviter d’avoir "17 janvier 2016 > 17 janvier 2016".

[(#REM) On rentre tous les évènements par date dans un tableau ]
#SET{tableau_evenements,#ARRAY}
<BOUCLE_evenements(EVENEMENTS){id_article}{par date}>
	#SET{tableau_evenements, #GET{tableau_evenements}|push{#DATE_DEBUT|affdate}}				
</BOUCLE_evenements>
 
[(#REM) Avec 2 boucles DATA, on sort le 1er et le dernier évènement ]
<BOUCLE_date_debut(DATA){source tableau,#GET{tableau_evenements}}{0,1}{par cle}>#SET{date_debut,#VALEUR}</BOUCLE_date_debut>					
<BOUCLE_date_fin(DATA){source tableau,#GET{tableau_evenements}}{0,1}{!par cle}>#SET{date_fin,#VALEUR}</BOUCLE_date_fin>
 
[(#REM) Si les 2 évènements ont lieu le même jour, on n'affiche que le 1er,
		sinon, on affiche les 2 ]
[(#GET{date_debut}|=={#GET{date_fin}}|?{
		#GET{date_debut}
	,					
		#GET{date_debut}" > "#GET{date_fin}
})]

Télécharger

Derniers billets

Liste des variables personnalisables

Grille

Les modèles

Les inclures

Agenda

Dates d’un événement

Vignette d’article

Les galeries et diaporamas d’images

Dépendances

Taille des textes

Le repo

To do

Liens

Sur la zone

Le besoin

Le cas concret

Le principe

Le géocodage

Lire le fichier CSV et générer le JSON

Dans json/gis_pointsdevente.html

Dans inclure/json_pointsdevente.html

Afficher la carte

Dans inclure/pointsdevente.html

Dans le squelette de votre article

Les ressources

Le besoin

Le cas concret

Le principe

La rubrique algues

La page produit

L’inclure

Si on décortique

Note

Ressources

Ajouter des entrées dans une table existante

Modifier des entrées dans une table existante

Trouver les documents qui ont plusieurs rôles et n’afficher que ceux sans rôle

Dans `json/gis_pointsdevente.html`

Dans `inclure/json_pointsdevente.html`

Dans `inclure/pointsdevente.html`