L’application gratuite "mobirise" (Mac et Pc) permet de construire facilement des pages html5 responsives, en empilant des modules "prêts à l’emploi" : en-tête, titres, galeries d’images, carrousels d’images, etc., basés sur des scripts.js fournis. Mais une fois crées, ces pages sont figées et pour en changer le contenu, texte ou images, il faut modifier leur code html/css : pas terrible ...
D’où l’idée de récupérer séparément les parties de code html de chaque fonctionnalité "mobirise" et d’en faire des "modèles" spip de façon à les utiliser dans les "articles spip". Pour cela j’ai créé des modèles avec en-tête html en ajoutant dans le "head" les liens vers les feuilles de style propres à "mobirise". Le fonctionnement de ces modèles est visualisable ici.
Liste des modèles adaptés
<mobyartXXX|> = article, comportant une en-tête (titre, descriptif et deux boutons avec liens, superposés avec effet de parallaxe à une image large 100% de la page) et un corps de texte, largeur 80%, avec mise en page "spip" intégrale (enrichissements typo, images, vidéos). / !\ Un seul "mobyintrovideo" par page html. Paramètres spécifiques :
— XXX = id_article - identifiant spip de l’article courant dont le TITRE et le DESCRIPTIF seront superposés à l’image de fond
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #333 - gris foncé)
— fontcolor = code couleur du texte en #hexa (par défaut = #fff - blanc)
— fontsize = taille du texte en px, em ou vw (par défaut = 1.5vw)
— image = identifiant du fichier de l’image de fond (par défaut = /moby/Hubble-1280x1113.jpg) ou =0 (pas d’image)
— article = id_article - identifiant spip de l’article dans lequel se trouvent le titre et le descriptif affichés (par défaut = XXX = identifiant de l’article contenant le slider)
— titre = 0, 1, texte libre - Le titre est affiché en gras en superposition de l’image au centre : 0 = pas de titre / 1 = titre du document (par défaut 1 = titre)
— descriptif = 0, 1, texte libre - Le descriptif est affiché en dessous du titre, en superposition de l’image : 0 = pas de descriptif / 1 = descriptif du document (par défaut 1 = descriptif)
— texte = 0, 1 - Le texte est affiché sous l’en-tête : 0 = pas de texte / 1 = texte de l’article (par défaut 1 = texte)
— bouton1, bouton2 = texte pour les deux boutons affichés en dessous du descriptif. Bouton1 = texte en blanc sur fond turquoise. Bouton2 = texte en noir sur fond transparent. Par défaut : pas de texte1 = pas de bouton1 / pas de texte2 = pas de bouton2.
— lien1, lien2 = liens http des boutons 1 et 2. Par défaut : pas de liens
— margev = valeur en pixel des marges en haut et en bas de l’image de fond (par défaut = 0)
<mobyintrovideoXXX|> = fond vidéo youtube plein écran, largeur 100%, comportant : TITRE_article, DESCRIPTIF_article, deux boutons avec textes et liens. / !\ Un seul "mobyintrovideo" par page html. Paramètres spécifiques :
— XXX = id_article - identifiant spip de l’article courant dont le TITRE et le DESCRIPTIF seront superposés à la vidéo
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #333 - gris foncé)
— fontcolor = code couleur du texte en #hexa (par défaut = #fff - blanc)
— fontsize = taille du texte en px, em ou vw (par défaut = 1.5vw)
— article = id_article - identifiant spip de l’article dans lequel se trouvent le titre et le descriptif affichés (par défaut = XXX = identifiant de l’article contenant le slider)
— titre = 0, 1, texte libre - Le titre est affiché en gras en superposition de l’image au centre : 0 = pas de titre / 1 = titre du document (par défaut 0 = pas de titre)
— descriptif = 0, 1, texte libre - Le descriptif est affiché en dessous du titre, en superposition de l’image : 0 = pas de descriptif / 1 = descriptif du document (par défaut 0 = pas de descriptif)
— bouton1, bouton2 = texte pour les deux boutons affichés en dessous du descriptif. Bouton1 = texte en blanc sur fond turquoise. Bouton2 = texte en noir sur fond transparent. Par défaut : pas de texte1 = pas de bouton1 / pas de texte2 = pas de bouton2.
— lien1, lien2 = liens http des boutons 1 et 2. Par défaut : pas de liens
— youtube = code de la vidéo youtube (uniquement) (par défaut = 1qSD7eEK9og )
— height = valeur en vw - hauteur du slider (par défaut = 56)
<mobysliderfullXXX|> = slider automatique avec pause au survol, largeur 100%, comportant des repères ronds cliquables pour afficher directement chaque image du slider. / !\ Un seul "mobyslider" par page html. Les images sont redimensionnées en largeur, la hauteur reste fixe : il est donc préférable de faire défiler des images de format homogène. Paramètres spécifiques :
— XXX = id_article - identifiant spip de l’article courant dont toutes les images seront affichées par le slider
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #666 - gris moyen)
— fontcolor = code couleur du texte en #hexa (par défaut = #000 - noir)
— fontsize = taille du texte en px, em ou vw (par défaut = 2.5vw)
— interval = valeur en msec - temps de pause du défilement (par défaut = 2500 msec)
— width = valeur en vw - largeur du slider (par défaut = 100 = plein écran)
— height = valeur en vw - hauteur du slider (par défaut = 75)
— article = id_article - identifiant spip de l’article dans lequel se trouvent les images utilisée par le slider (par défaut = XXX = identifiant de l’article contenant le slider)
— titre = 0, 1, texte libre identique pour toutes les images du slider - Le titre est affiché en gras en superposition de l’image, en haut et au centre : 0 = pas de titre / 1 = titre du document (par défaut 0 = pas de titre)
— descriptif = 0, 1, texte libre identique pour toutes les images du slider - Le descriptif est affiché à la suite du titre, en superposition de l’image, en haut et au centre : 0 = pas de descriptif / 1 = descriptif du document précédé d’un tiret (par défaut 0 = pas de descriptif)
— margev = valeur en pixel des marges en haut et en bas du slider (par défaut = 0)
<mobysliderXXX|> = slider automatique avec pause au survol, largeur 770px max, comportant sous le slider des repères ronds cliquables pour afficher directement chaque image. Les images sont cliquables pour affichage plein écran. / !\ Un seul "mobyslider" par page html. Paramètres :
— XXX = id_article - identifiant spip de l’article courant dont toutes les images seront affichées par le slider
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #fff - blanc)
— fontcolor = code couleur du texte en #hexa (par défaut = #999 - gris)
— fontsize = taille du texte en px, em ou vw (par défaut = 2.5vw)
— interval = valeur en msec - temps de pause du défilement (par défaut = 2500 msec)
— article = id_article - identifiant spip de l’article dans lequel se trouvent les images utilisée par le slider (par défaut = XXX = identifiant de l’article courant contenant le slider)
— titre = 0, 1, texte libre identique pour toutes les images du slider - Le titre est affiché sous l’image, en gras au-dessus des repères ronds : 0 = pas de titre / 1 = titre du document (par défaut 0 = pas de titre)
— descriptif = 0, 1, texte libre identique pour toutes les images du slider - Le descriptif est affiché sous l’image à la suite du titre : 0 = pas de descriptif / 1 = descriptif du document (par défaut 0 = pas de descriptif)
— margev = valeur en pixel des marges en haut et en bas du slider (par défaut = 0)
— btcolor = code couleur des boutons ← et → (par défaut = #000 - noir) avec une transparence de 50%
<mobygaleriefullXXX|> = Galerie d’images, largeur 100%, composée de rangées de 2 ou 4 imagettes avec des repères au survol cliquables pour afficher chaque image en plein écran avec descriptif en en-tête. / !\ Une seule "mobygalerie" par page html. Paramètres spécifiques :
— XXX = id_article - identifiant spip de l’article courant dont toutes les images seront affichées par le slider
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #333 - gris foncé)
— fontcolor = code couleur du texte en #hexa (par défaut = #fff - blanc)
— fontsize = taille du texte en px, em ou vw (par défaut = 1.5vw)
— article = id_article - identifiant spip de l’article dans lequel se trouvent les images utilisée par le slider (par défaut = XXX = identifiant de l’article courant contenant le slider)
— titre = 0, 1, texte libre identique pour toutes les images du slider - Le titre est affiché en gras au-dessus des repères ronds : 0 = pas de titre / 1 = titre du document (par défaut 0 = pas de titre)
— descriptif = 0, 1, texte libre identique pour toutes les images du slider - Le descriptif est affiché en en-tête de l’image plein-écran : 0 = pas de descriptif / 1 = descriptif du document (par défaut 1 = descriptif de chaque image)
— margev = valeur en pixel des marges en haut et en bas du slider (par défaut = 0)
<mobygalerieXXX|> = Galerie d’images, largeur 80% (1096px max), composée de rangées de 2 ou 4 imagettes avec des repères au survol cliquables pour afficher chaque image en plein écran avec descriptif en en-tête. Chaque imagette comporte, en superposition dans sa partie basse, le descriptif du document. / !\ Une seule "mobygalerie" par page html. Paramètres spécifiques :
— XXX = id_article - identifiant spip de l’article courant dont toutes les images seront affichées par le slider
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #fff - blanc)
— fontcolor = code couleur du texte en #hexa (par défaut = #fff - blanc)
— fontsize = taille du texte en px, em ou vw (par défaut = 1.5vw)
— article = id_article - identifiant spip de l’article dans lequel se trouvent les images utilisée par le slider (par défaut = XXX = identifiant de l’article courant contenant le slider)
— titre = 0, 1, texte libre identique pour toutes les images du slider - Le titre est affiché en gras au-dessus des repères ronds : 0 = pas de titre / 1 = titre du document (par défaut 0 = pas de titre)
— descriptif = 0, 1, texte libre identique pour toutes les images du slider - Le descriptif est affiché en en-tête de l’image plein-écran : 0 = pas de descriptif / 1 = descriptif du document (par défaut 1 = descriptif de chaque image)
— margev = valeur en pixel des marges en haut et en bas du slider (par défaut = 0)
<mobyflipXXX|> = 1 à 4 images "flippantes", largeur 80%, composée de 1 à 4 images de 300px de hauteur qui se retournent au survol. Chaque image comporte au verso le titre et le descriptif du document : le titre est cliquable pour afficher l’image en plein écran. Plusieurs "flips" peuvent cohabiter dans la même page html. Paramètres spécifiques :
— XXX = id_article - identifiant spip de l’article courant
— bgcolor = code couleur du fond en #hexa ou rgba(r,v,b,opacity) - (par défaut = #fff - blanc)
— doc1 doc2 doc3 doc4 = id_document - identifiants spip des images utilisées par la galerie (par défaut docX=0 = pas d’image)
— margev = valeur en pixel des marges en haut et en bas du bloc des images "flip" (par défaut = 0)
Dans chaque article on peut donc insérer un ou plusieurs "modèles" qui utilisent les fonctionnalités "mobirise". Mais pour que ça fonctionne, il faut aussi ajouter les appels aux scripts qui réalisent l’exécution des fonctionnalités, soit en les recopiant à la fin du texte de chaque article, soit en les ajoutant dans le code html du fichier "article.html" du squelette de spip (juste avant le </body> ). Voici la liste des scripts utilisés :
<script src="moby/web/assets/jquery/jquery.min.js"></script>
<script src="moby/popper/popper.min.js"></script>
<script src="moby/bootstrap/js/bootstrap.min.js"></script>
<script src="moby/mbr-popup-btns/mbr-popup-btns.js"></script>
<script src="moby/dropdown/js/nav-dropdown.js"></script>
<script src="moby/dropdown/js/navbar-dropdown.js"></script>
<script src="moby/touchswipe/jquery.touch-swipe.min.js"></script>
<script src="moby/parallax/jarallax.min.js"></script>
<script src="moby/ytplayer/jquery.mb.ytplayer.min.js"></script>
<script src="moby/vimeoplayer/jquery.mb.vimeo_player.js"></script>
<script src="moby/playervimeo/vimeo_player.js"></script>
<script src="moby/viewportchecker/jquery.viewportchecker.js"></script>
<script src="moby/masonry/masonry.pkgd.min.js"></script>
<script src="moby/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="moby/tether/tether.min.js"></script>
<script src="moby/bootstrapcarouselswipe/bootstrap-carousel-swipe.js"></script>
<script src="moby/smoothscroll/smooth-scroll.js"></script>
<script src="moby/mbr-flip-card/mbr-flip-card.js"></script>
<script src="moby/countdown/jquery.countdown.min.js"></script>
<script src="moby/as-pie-progress/jquery-as-pie-progress.min.js"></script>
<script src="moby/mbr-tabs/mbr-tabs.js"></script>
<script src="moby/mbr-switch-arrow/mbr-switch-arrow.js"></script>
<script src="moby/sociallikes/social-likes.js"></script>
<script src="moby/mbr-testimonials-slider/mbr-testimonials-slider.js"></script>
<script src="moby/mbr-clients-slider/mbr-clients-slider.js"></script>
<script src="moby/datatables/jquery.data-tables.min.js"></script>
<script src="moby/datatables/data-tables.bootstrap4.min.js"></script>
<script src="moby/theme/js/script.js"></script>
<script src="moby/formoid/formoid.min.js"></script>
<script src="moby/slidervideo/script.js"></script>
<script src="moby/gallery/player.min.js"></script>
<script src="moby/gallery/script.js"></script>
- project.zip
- moby.zip
Et enfin, pour que tous ces scripts fonctionnent sur votre site spip, il faut recopier sur le serveur, à la racine du site spip, le répertoire "moby" qui contient les feuilles de style et les scripts récupérés depuis "mobirise", ainsi que le fichier "project.mobirise", après avoir téléchargé et dézippé les archives zip ci-contre.
La démo du résultat est visible sur cette page "moby-article" où j’ai empilé la plupart de mes modèles "moby"
RSS 2.0