BAS

Modèle carte interactive pour SPIP

Chrys — 2026-04-22T19:55:00Z

Intégrez rapidement des cartes interactives dans vos articles SPIP grâce à un modèle simple et autonome. Basé sur OpenStreetMap et Leaflet, il ne nécessite aucune installation complexe. Une solution légère, flexible et optimisée pour améliorer vos contenus.

Ce modèle a été conçu pour faciliter l'intégration de cartes interactives dans les articles SPIP, en s'appuyant sur OpenStreetMap et la librairie Leaflet.

L'objectif est de proposer une solution simple à utiliser, légère, et sans configuration complexe.

À propos du modèle

Je ne suis pas développeur de métier, mais plutôt quelqu'un de passionné, curieux, et intéressé par le code.

Ce modèle est donc le résultat de tests et d'expérimentations. Il peut parfaitement être utilisé tel quel, mais il est recommandé de le tester dans un environnement de développement avant une mise en production.

Si vous souhaitez l'améliorer, l'adapter ou le faire évoluer, c'est totalement ouvert.

Installation

L'installation est volontairement simple.

Il suffit de copier le fichier map.html dans le dossier :

/squelettes/modeles

Aucune dépendance n'est à installer manuellement.

Le modèle est autonome : il détecte automatiquement la présence de Leaflet et, si nécessaire, charge les ressources depuis un CDN. Ce chargement est effectué uniquement sur les pages contenant une carte.

Utilisation

L'insertion d'une carte se fait directement dans le contenu d'un article, à l'aide d'une balise dédiée avec des coordonnées géographiques.

Une simple latitude et longitude permettent d'afficher une carte centrée sur un point précis.

Personnalisation

Le modèle propose plusieurs options pour adapter l'affichage et le comportement.

Position et zoom

Il est possible de définir le niveau de zoom afin de contrôler le niveau de détail, de la vue globale à une vue très précise.

Marqueurs

Deux approches sont disponibles :

un marqueur unique, placé automatiquement au centre
plusieurs marqueurs, définis via une syntaxe simple permettant d'associer coordonnées et texte

Cela permet par exemple d'afficher plusieurs villes ou points d'intérêt sur une même carte.

Style visuel

Plusieurs styles de carte sont disponibles :

standard OpenStreetMap
topographique
clair
sombre

Il est également possible de définir la largeur, le ratio d'affichage comme 16/9 ou 21/9, et d'ajouter des classes CSS personnalisées.

Interaction

Le zoom à la molette est désactivé par défaut afin de préserver le confort de navigation sur la page, mais il peut être activé si nécessaire.

Quelques exemples

Mode Topographique (Topo)
Ce paramètre change l'aspect visuel du fond de carte.

Mode Clair (Light)

Mode Sombre (Dark)

Activation du zoom molette
Par défaut, il est sur non. Si vous mettez oui, l'utilisateur pourra zoomer simplement en faisant rouler sa molette sur la carte.

Texte au survol
À la différence de popup qui nécessite un clic, le tooltip apparaît dès que la souris passe sur le marqueur.

Exemple complet
Vous pouvez bien sûr mélanger tous les paramètres dans un seul appel.

Rappel des valeurs acceptées :

layer : osm (défaut), topo, light, dark
scroll : oui, non (défaut)
tooltip : N'importe quel texte (évitez les textes trop longs)
popup : N'importe quel texte (supporte quelques balises HTML simples)

Aspects techniques

Le modèle a été pensé pour être performant et robuste :

chargement asynchrone, sans blocage de l'affichage
compatibilité avec les rechargements Ajax
sécurisation des données pour éviter les erreurs liées aux caractères spéciaux
adaptation automatique aux écrans mobiles (responsive)

Cas d'usage

Ce modèle permet de couvrir plusieurs besoins courants :

afficher une localisation simple
présenter un itinéraire ou une zone géographique
afficher plusieurs points d'intérêt
proposer une carte immersive avec un format panoramique

Conclusion

Ce modèle se veut simple, autonome et facilement intégrable dans l'écosystème SPIP. Il peut être utilisé tel quel ou servir de base pour des développements plus avancés, selon les besoins.
Toute contribution ou amélioration reste la bienvenue.

Modèle Map 6

⚠️ ATTENTION : Contenu basé sur des expérimentations, pas sur des pratiques professionnelles validées. Peut contenir des erreurs ou des choix discutables. Testez, adaptez et vérifiez avant toute mise en production.

Modèle carousel SPIP accessible et responsive

Chrys — 2026-04-15T19:44:57Z

Découvrez un modèle de carousel SPIP accessible, performant et simple à intégrer dans vos articles. Mis à jour pour la dernière version de SPIP, il offre personnalisation, responsive et navigation fluide.

Fond d'écran 1

© Moi
Fond d'écran 2

© Auteuse
Couché de soleil

© Auteur
Le gorille King Kong

© Natacha
Le lion

© Bill

Un modèle de carrousel SPIP accessible et remis à jour

Il y a trois ans, j'avais développé un modèle de carrousel pour SPIP avec un objectif simple : proposer une solution à la fois élégante, performante et réellement accessible. Avec les évolutions récentes de SPIP, j'ai pris le temps de le remettre à jour pour garantir sa compatibilité avec la dernière version… et en profiter pour affiner certains aspects.

Aujourd'hui, je vous propose un retour sur ce modèle, sa philosophie et son utilisation.

Un modèle pensé pour être simple à intégrer

Dès le départ, j'ai voulu quelque chose de facile à déployer. L'installation reste volontairement minimale : il suffit de déposer un fichier carousel.html dans le dossier squelettes/modeles/. Rien de plus.

Le modèle s'appuie sur les fonctionnalités natives de SPIP, notamment le plugin Images (déjà présent par défaut), ce qui permet de bénéficier du redimensionnement automatique sans configuration supplémentaire.

Une utilisation directe dans les articles

L'un des points clés, c'est l'intégration dans le flux éditorial. Pas besoin de passer par des configurations complexes : tout se fait directement dans le texte de l'article.

Deux approches sont possibles :

Automatique : récupérer toutes les images liées à un article

Manuelle : sélectionner précisément les images à afficher

Cette flexibilité permet de couvrir la majorité des cas sans alourdir le workflow.

Un système de paramètres complet mais lisible

J'ai voulu éviter les usines à gaz, tout en offrant suffisamment de contrôle. Le modèle accepte plusieurs paramètres combinables, qui permettent d'ajuster finement le comportement du carrousel.

Par exemple :

Voici les principaux réglages :

autoplay : active le défilement automatique
delay : contrôle l'intervalle entre les images
legendes : affiche ou masque les textes associés
navigation : choix entre flèches, points, les deux ou aucun
ratio : impose un format d'image (16:9, 4:3, carré ou libre)

L'idée est de rester explicite et lisible, même pour quelqu'un qui découvre le modèle.

Le plus simple (toutes les images de l'article) :

Sélection précise d'images :

Mode diaporama automatique (toutes les 3 secondes) :

Format Cinéma (16:9) sans légendes :

Format Carré avec navigation complète (flèches + points) :

Une gestion propre des légendes

Plutôt que d'inventer un système parallèle, je me suis appuyé sur ce que SPIP fait déjà très bien : la gestion des documents.

Les textes sont directement saisis dans l'espace privé :

Titre : utilisé comme titre principal
Descriptif : affiché comme description
Crédits : utilisé pour le copyright

Cela permet aux rédacteurs de rester dans leur environnement habituel, sans apprentissage supplémentaire.

Accessibilité et responsive : des priorités, pas des options

Ce modèle n'est pas qu'un simple slider visuel. J'ai porté une attention particulière à l'accessibilité :

navigation possible au clavier
attributs ARIA intégrés
comportement cohérent pour les lecteurs d'écran

Côté responsive, le carrousel s'adapte naturellement à toutes les tailles d'écran. Sur mobile, le support du geste de swipe permet une navigation fluide et intuitive.

Des performances maîtrisées

Un carrousel peut vite devenir un point de friction en termes de performance. J'ai donc intégré du lazy-loading natif pour éviter de charger inutilement les images hors écran.

Les transitions restent légères : un fondu doux accompagné d'un léger zoom, suffisamment discret pour ne pas gêner la lecture.

Une mise à jour pour la dernière version de SPIP

Cette mise à jour n'est pas qu'une simple adaptation technique. J'en ai profité pour :

améliorer la compatibilité globale
fiabiliser certains comportements
nettoyer le code pour le rendre plus maintenable

Le modèle reste fidèle à son objectif initial : proposer une solution robuste, accessible et facile à utiliser.

Un point à ne pas oublier

Comme souvent avec SPIP, si vous modifiez le modèle ou les contenus et que rien ne semble changer… pensez à vider le cache.

C'est un réflexe simple, mais indispensable.

Conclusion

Ce modèle de carrousel s'inscrit dans une approche pragmatique : tirer parti de SPIP sans le complexifier, tout en respectant les bonnes pratiques modernes (accessibilité, responsive, performance).

Trois ans après sa création, je suis satisfait de voir qu'il reste pertinent, et surtout qu'il continue à répondre efficacement à des besoins concrets.

Si vous cherchez un carrousel simple, propre et intégré à votre logique éditoriale, ce modèle devrait faire le travail sans surprise.

Modèle Carousel 4

Modèle SPIP pour intégrer des vidéos YouTube

Chrys — 2026-04-08T08:08:18Z

J'ai conçu un modèle SPIP simple et efficace pour intégrer des vidéos YouTube sans contrainte technique. Il garantit un affichage responsive, propre et respectueux des standards actuels.

L'intégration de vidéos est devenue essentielle dans un site éditorial. Pour répondre à ce besoin, j'ai conçu le modèle video_player.html, qui permet d'insérer des vidéos YouTube de manière propre, responsive et sans surcharge visuelle. Voici comment l'utiliser.

Installation du modèle

Pour que SPIP reconnaisse le modèle, je place le fichier à cet emplacement :

squelettes/modeles/video_player.html

Une fois installé, il est immédiatement opérationnel dans mes articles.

Utilisation de base avec YouTube

J'insère une vidéo directement dans le texte grâce à une balise simple.

Avec une URL complète :

Avec un identifiant de vidéo :

Le modèle détecte automatiquement le format fourni et s'adapte sans configuration supplémentaire.

Paramètres disponibles

J'ai prévu plusieurs paramètres pour ajuster l'affichage selon mes besoins :

id : URL YouTube ou identifiant (obligatoire)
largeur : largeur en pixels (600 par défaut)
hauteur : calculée automatiquement (ratio 16:9)

Fonctionnalités avancées

Ratio automatique (16:9)

Lorsque je modifie la largeur, la hauteur est recalculée automatiquement pour conserver un format vidéo optimal.

Exemple :

La hauteur sera ajustée à 450 px.

Design responsive

La vidéo s'adapte automatiquement à la taille de l'écran. Sur mobile et tablette, elle reste lisible et proportionnée, tout en respectant la largeur maximale définie.

Design épuré

J'ai volontairement choisi un rendu minimaliste :

Aucun arrondi sur les angles
Pas d'ombres ni d'effets superflus
Intégration discrète dans le contenu éditorial

Respect de la vie privée

Le modèle utilise le domaine youtube-nocookie.com, ce qui limite le dépôt de cookies et améliore la protection des visiteurs.

Exemples d'utilisation

Ici réduit a 400px

Conclusion

Avec ce modèle, je dispose d'une solution simple et fiable pour intégrer des vidéos YouTube dans SPIP. Il me permet de garder un rendu propre, cohérent et performant, tout en restant facile à utiliser au quotidien.

Modèle Vidéo player 8

Modèle SPIP Lecteur audio

Chrys — 2026-04-05T09:15:05Z

Ajoutez un lecteur audio compact et moderne à vos articles SPIP en quelques étapes simples. Ce modèle permet de gérer aussi bien un fichier unique qu'une playlist complète avec navigation fluide.

J'ai développé un petit modèle de lecteur audio pour SPIP, avec l'idée de proposer quelque chose de simple à intégrer, agréable à utiliser et visuellement propre. Le résultat est un lecteur au design sombre et compact, capable de gérer aussi bien un fichier unique que de vraies playlists.

Pour illustrer son fonctionnement, je vous propose trois essais juste en dessous :

Un lecteur simple (un seul fichier audio)

Un multi-lecteur avec playlist (plusieurs pistes enchaînées)

Un multi-lecteur avec playlist regroupant tous les audios de cette article

Installation

Rien de compliqué côté mise en place. Il suffit de déposer trois fichiers dans votre dossier /squelettes/ :

Le modèle HTML
→ /squelettes/modeles/audio_player.html

Le fichier de style
→ /squelettes/css/audio_player.css

Le script JavaScript
→ /squelettes/javascript/audio_player.js

Si les dossiers n'existent pas encore, vous pouvez simplement les créer.

Utilisation

Une fois en place, le lecteur s'insère directement dans vos articles avec des raccourcis SPIP :

Pour un seul fichier audio :
→

Pour une playlist personnalisée :
→

Pour lire tous les sons d'un article (ex : art45) :
→

Pour afficher un nom d'artiste commun :
→

Ce que fait le lecteur

J'ai essayé de le rendre à la fois discret et fonctionnel :

Si vous lancez un lecteur, les autres s'arrêtent automatiquement
Une playlist peut être affichée ou masquée
Navigation facile avec précédent / suivant
Lecture automatique du morceau suivant
Aucun impact sur les résumés SPIP (pas de pollution du #INTRODUCTION)
Format compact pour ne pas alourdir la page

Personnalisation

Le style est modifiable assez facilement dans le fichier CSS.
Quelques variables permettent d'ajuster rapidement les couleurs :

--player-bg : fond du lecteur
--player-accent : couleur principale
--player-text : texte principal
--player-text-muted : texte secondaire

Vous pouvez aussi ajuster des détails, comme la taille du nom de l'artiste directement dans le CSS.

/* Contrôle sur le titre du morceau */ .track-title-compact { font-size: 16px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--player-text);}

/* Contrôle sur le nom de l'artiste */ .track-artist-compact { font-size: 12px; color: var(--player-text-muted); margin: 2px 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

Petit rappel utile

Après chaque modification :

Pensez à vider le cache de SPIP
Et à forcer le rafraîchissement de votre navigateur (Ctrl + F5 ou Cmd + Shift + R)

Si vous voyez “Chargement…” ou des éléments étranges, c'est presque toujours lié au cache.

En résumé

Ce lecteur est pensé comme un outil simple mais efficace pour intégrer de l'audio dans SPIP, sans se compliquer la vie. Il peut rester très basique… ou devenir plus complet avec les playlists.

N'hésitez pas à tester les deux exemples ci-dessus pour voir la différence entre un usage simple et un usage multi-lecteurs.

Téléchargement

Modèle lecteur audio 11

Modèle SPIP - Sommaire d'article automatique

Chrys — 2026-03-13T12:20:00Z

Améliorez la lisibilité de vos articles avec un sommaire automatique sous SPIP. Le modèle Ancre génère une table des matières dynamique à partir de vos intertitres. Simple à installer et rapide à utiliser il optimise la navigation et la structure de vos contenus.

Préparation du sommaire...

Présentation

Pour améliorer la lisibilité des articles, ce modèle SPIP permet de créer un sommaire automatique basé sur les intertitres. L'idée est simple : plus besoin de créer des liens manuellement, le sommaire se construit automatiquement à partir de la structure du texte.

Installation

L'installation ne se fait qu'une seule fois.

Il suffit de récupérer le fichier ancre.html (fourni avec le modèle) et de le placer dans le dossier :

/squelettes/modeles/

Une fois le fichier en place, le modèle est immédiatement disponible dans vos contenus.

Utilisation dans les articles

L'utilisation est très simple : il suffit d'insérer le raccourci à l'endroit où le sommaire doit apparaître.

Deux variantes sont possibles :

Pour définir un titre personnalisé :

Le texte indiqué remplace le titre du bloc.

Pour afficher uniquement la liste, sans titre :

Dans ce cas, seul le contenu du sommaire est affiché.

Le fonctionnement repose sur les intertitres SPIP ({{{ }}}, équivalents des niveaux H2 et H3). S'il n'y a pas d'intertitres dans le texte, aucun sommaire ne sera généré.

Personnalisation

Le design peut être ajusté directement dans le fichier ancre.html, notamment via la balise

BAS

Modèle carte interactive pour SPIP

À propos du modèle

Installation

Utilisation

Personnalisation

Quelques exemples

Aspects techniques

Cas d'usage

Conclusion

Modèle carousel SPIP accessible et responsive

Fond d'écran 1

Fond d'écran 2

Couché de soleil

Le gorille King Kong

Le lion

Un modèle de carrousel SPIP accessible et remis à jour

Un modèle pensé pour être simple à intégrer

Une utilisation directe dans les articles

Un système de paramètres complet mais lisible

Une gestion propre des légendes

Accessibilité et responsive : des priorités, pas des options

Des performances maîtrisées

Une mise à jour pour la dernière version de SPIP

Un point à ne pas oublier

Conclusion

Modèle SPIP pour intégrer des vidéos YouTube

Installation du modèle

Utilisation de base avec YouTube

Paramètres disponibles

Fonctionnalités avancées

Respect de la vie privée

Exemples d'utilisation

Conclusion

Modèle SPIP Lecteur audio

Installation

Utilisation

Ce que fait le lecteur

Personnalisation

Petit rappel utile

En résumé

Téléchargement

Modèle SPIP - Sommaire d'article automatique

Présentation

Installation

Utilisation dans les articles

Personnalisation