HTML5up Escape Velocity

Adaptation pour SPIP du squelette « ESCAPE VELOCITY » de html5up https://html5up.net/escape-velocity

Installation

Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html

Il nécessite les plugins Adaptive Images, Saisies, Compositions 3, Font Awesome 5 - Police et ZCore.

Configuration

La configuration du plugin est accessible via le menu Squelettes > HTML5up Escape Velocity

Image d’entête

Il est possible de choisir l’image d’entête : via la médiathèque (menu Édition > Documents), ajouter un nouveau document puis, dans la page de configuration, indiquer le numéro de ce document. Vous pouvez également masquer le nom du site et le slogan.

Page d’accueil

Introduction

Vous pouvez définir l’article d’intro via le sélecteur d’article. Le squelette affiche l’intégralité du chapeau de l’article ou, à défaut, l’introduction.

Grille

Il est possible de choisir le titre affiché.

Il est également possible de choisir le mode d’affichage :

  • mode site avec les rubriques à la racine du site (secteurs)
  • mode blog avec les derniers articles publiés.

Focus

Vous pouvez choisir le titre affiché ainsi que la rubrique à mettre en avant et l’ordre d’affichage des 3 articles de cette rubrique.

Vous pouvez choisir l’article d’introduction qui s’affiche en haut de la sidebar ainsi que la rubrique dont 3 articles s’affichent en dessous.

Voir la partie Menus pour le contenu du menu de la sidebar.

Pied de page

Il est possible de choisir l’article qui s’affiche dans le pied de page : ici, c’est le contenu complet de l’article qui s’affiche donc attention à la longueur du texte et la taille des images.

Compositions

Le squelette fournit 3 compositions :

  • Article sans sidebar
  • Article avec sidebar à gauche
  • Article avec sidebar à droite

Personnalisation

La feuille de style css/perso.css sera prise en compte pour personnaliser l’affichage sans perdre les mises à jour futures du plugin. Idem pour les javascripts avec le fichier javascript/perso.js.

Modèles

Les modèles bouton et icone permettent d’afficher, dans le contenu, des boutons et icônes avec Font Awesome (liste des icônes disponibles accessible via le menu Squelettes > Font Awesome).

Bouton (icône et texte avec lien dans un bloc encadré)

<bouton|icone=fa-heart|primary=oui|iconetexte=le texte|lien=https://www.domaine.net>

Icône (icône avec lien et texte alternatif)

<icone|icone=fa-heart|iconetexte=le texte|lien=https://www.domaine.net>

Plugins facultatifs

Formulaire de contact

Le plugin Formulaire de contact avancé permet d’ajouter facilement un formulaire en pied de page.

Identité Extra

L’activation du plugin Identité Extra affichera, en bas de la page, les informations de contacts.

Liens sociaux

Le plugin Liens vers les réseaux sociaux permet d’utiliser des liens et des icônes adéquates vers les réseaux utilisés.

Ne pas cocher la case « Activer l’habillage graphique de la barre de liens avec la feuille de style basée sur la police socicon », le thème n’affiche que les noms des réseaux, pas les icônes.

Mailsubscribers / Newsletter

Si le plugin Mailsubscribers est installé, on affiche le formulaire d’inscription à la newsletter. A votre charge de créer la liste newsletter (voir la doc de Newsletters)

Le Plugin Menus permet d’ajouter 2 menus qui il apparaissent automatiquement :

  • dans le pied de page : créer un nouveau menu avec l’identifiant pied
  • dans la sidebar : créer un nouveau menu avec l’identifiant sidebar

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP. Voyez la liste des squelettes HTML5Up adaptés pour SPIP.

Ce thème a été initialement développé pour Super Brest, Science Hack Day brestois : www.superbrest.info

Discussion

12 discussions

  • Bonjour,

    je remarque une marge à droite inopportune en consultaion mobile (iphone) de mon site.
    Pourriez vous me dire d’où cela vient ?
    Merci !

    Répondre à ce message

  • 1

    Bonjour,
    Y a-t-il un empêchement connu pour l’utilisation de ce plugin avec spip > 4.0 ?
    Je l’utilise en 4.1 sans avoir rencontré de problème visible.
    Merci,
    Sylvain

    Répondre à ce message

  • 4

    Bonjour,
    quand j’insère une carte du plugin GIS
    avec un modèle

    <carte_gis175|objets=articles_branche|scale=oui|id_rubrique=4|default_layer=openstreetmap_hot|fullscreen=oui|overview=oui|zoom=19|height=600px|kml=410>

    Le fond de carte n’apparait pas sur un mobile.
    _ Exemple
    Les cartes appelées à partir du squelette apparaissent bien.
    _Exemple

    Une idée ? Merci !

    • Salut,

      je viens de tester, ça s’affiche bien chez moi sur smartphone.
      A voir du côté de ton smartphone (ou de GIS sinon), mais à première vue, ça ne vient d’Escape Velocity :)

      jeanmarie

    • Bonjour,
      Pardon d’insister, peut-être trouverez-vous une explication :
      l’anomalie d’affichage d’une carte GIS appelée par un modèle
      concerne des smartphones Apple dans un environnement spip 405 avec
      Html5up Escape
      _ exemple 1
      Html5up- Massively
      _ exemple 2
      Html5up- spectral
      _ exemple 3

      En revanche, pas d’anomalie constatée avec
      Html5up spectral
      _exemple 4
      Spip 405 « nu »
      _exemple 5
      Je remarque que dans le cadre grisé quand la carte ne s’affiche pas, apparait dans le coin bas droit le mot Leaflet avec un lien vers Leafletjs.

    • Bonjour,

      n’ayant pas de smartphone Apple, je ne peux pas tester.

      Il y a peut-être un conflit entre un des scripts HTML5up et le smartphone. Il faudrait tester les différences entre le modèle carte_gis l’inclusion depuis le squelette...

    • La mise à jour spip 408 a solutionné le problème. La carte Gis apparait sur iphone.

    Répondre à ce message

  • 1

    Bonjour

    J’aimerai changer l’ordre des articles dans chaque rubrique, mettre le plus récent en premier. Quel ligne à modifier sur quel fichier ?

    Merci à tous

    Répondre à ce message

  • 4

    Bonjour,
    j’aimerais personnaliser l’affichage d’un squelette article d’une rubrique.
    Est-ce possible ?
    Dans mon répertoire squelette, je dois mettre le fichier d’origine (article.html) et le fichier modifié (article-4.html).
    Je pars de quel fichier article.html. ? Il y en a plusieurs dans le plugin (racine, content...).
    Merci de votre aide .

    • Je voudrais modifier le squelette des articles de ma rubrique 4. Avec d’autres templates, il faut déposer le fichier article.html et sa variante (dans mon cas article-4.html) dans un répertoire squelettes. Avec le plugin Espace Velocity, il y a un article.html, un autre dans un répertoire content... Quelle est la démarche à suivre svp ? Merci de vos lumières

    • Le principe général de la surcharge, c’est de placer une copie du fichier que l’on veut modifier dans le répertoire squelettes en prenant soin de reproduire la même arborescence (=le même emplacement) que celle que le fichier occupe dans le plugin
      cf https://programmer.spip.net/Surcharger-un-fichier

    • Il vaut mieux utiliser les Compositions ( https://contrib.spip.net/Compositions-2-et-3 ), le thème est prévu pour fonctionner avec (cf paragraphe Compositions).

      Tu pourras t’inspirer des compositions existantes /content/article-left.html et /content/article-right.html.

    • Merci de vos réponses.

    Répondre à ce message

  • 4

    Comment faire apparaître l’article d’intro en entier ?

    • Sous réserve d’avoir bien compris le besoin, la façon d’afficher l’article d’accueil est de surcharger le fichier content/sommaire.html et de remplacer

      [<div class="style1 #EDIT{chapo}">(#CHAPO|sinon{#INTRODUCTION})</div>]

      par

      [<div class="style1 #EDIT{texte}">(#TEXTE)</div>]
    • En relisant rapidement le code (et sans tester) : le squelette affiche le chapeau complet ou, s’il n’y a pas de chapeau, l’introduction (= début du texte coupé). Donc en mettant l’intégralité du contenu dans le chapeau , ça devrait l’afficher tel quel.
      Ça évite d’avoir à surcharger et permet de bénéficier d’éventuelles futures mises à jour :)

    • Merci Manu, c’est exactement ça.

    • Tu as donc 2 solutions : celle de Jean-Marie ou la mienne. Pour cette dernière, on est d’accord, il faut dupliquer le fichier content/sommaire.html et placer cette copie dans ton répertoire squelettes et y apporter les modifications souhaitées. Ne pas modifier le fichier du plugin lui-même pour ne pas risquer de perdre les modifications lors d’une mise à jour du plugin comme l’indique Jean-Marie.
      Bon courage et bon travail ;-))

    Répondre à ce message

  • 2

    D Robin site ; https://preuillysurclaise.com
    Bonjour, j’ai opté pour HTML5up Escape Velocity recemment en recherchant un squelette adapté à la photographie. Je le trouve parfait car il répond à ce que je cherchais un meilleur affichage du texte et des images. Par contre j’ai une erreur 404 qui était déjà présente avec le squellette escale dans une moindre mesure. Cette erreur non présente dans les premiers temps s’est imposée rapidement. Elle apparait dés que je tape le nom du site sans faire appel aux favoris enregistrés sur les navigateurs. J’ai fais appel à mon hébergeur avec ce texte :
    « ... mon problème de code 404 ne se produisait que quand je saisissais preuillysurclaise.com sans faire appel à un favori et que sinon une fois actualisé le problème ne se produisait plus en naviguant sur le site. Les navigateurs edge et brave sont les plus sensibles ... . Mais la copie d’écran vous montre qu’il détecte une anomalie sur mon site. .... opéra et chrome ont la même anomalie à l’ouverture du site si je n’utilise pas les favoris et frappe preuillysurclaise.com en effaçant les éventuelles informations conservées par le navigateur. Ce qui n’est pas le cas d’ edge qui systématiquement s’ouvre avec la page 404. »
    Mon hébergeur vient de me faire cette réponse : « Je viens de comprendre. Vous avez configuré un POPUP qui prend toute la page et qui est en 404. Si vous fermez le POPUP, cela affiche le site sans erreur. Je vous conseillerai alors de vérifier cette partie là, je pense que c’est géré via un plugin sur votre site. »

    J’a modifié l’image et supprimé un lien qui faisait appel à nivoslider mais ne voit rien comme popup qui justifierait ce problème répétitif. J’ai vu que sur votre site, le dernier message évoquait le même problème que moi à savoir « Erreur 404 Il n’y a pas d’article à cette adresse » Avez vous une explication à cette anomalie. Proviendrait elle de spip 4 car je n’ai jamais eu ce type de blocage. Merci de votre réponse

    mon email info@preuillysurclaise.com

    • Ton site ouvre une médiabox avec l’adresse https://preuillysurclaise.com/preuillysurclaise.com dedans, d’où l’erreur 404 à la 1re visite.

      Si tu vas le menu Squelettes > Boîte multimédia, en bas dans Splash Boîte, tu n’as pas preuillysurclaise.com ou qqch du genre ?

    • bonjour et merci en effet j’avais saisi le nom de mon site dans ce formulaire ne connaissant pas le s conséquences. Je l’ai enlevé et edge a apprécié. Merci tu es mon sauveur en plus de m’avoir permis d’utiliser un super squelette.
      dominique

    Répondre à ce message

  • 19
    AlainF65

    Bonjour et bravo pour ce travail,
    je souhaiterais directement commencer un site avec ce plugin et j’aimerais utiliser spip 4.0.
    Est-ce prévu de le rendre compatible ?
    Pra avance, merci, Alain

    • Bonjour,

      le plugin devrait être relativement compatible SPIP4 (il y aura peut-être un problème avec la pagination), vous pouvez tester en ajoutant la ligne suivants à votre fichier options :

      define('_DEV_VERSION_SPIP_COMPAT',"3.2.99");

      Si tout fonctionne bien, on pourra ajouter la compatibilité SPIP4.

    • Bonjour
      pour info je commence a tester sur un spip 4.0.0

      je reviendrais en dire plus ;)

      Actions demandées :

      Activer le plugin « Font Awesome 5 » (version : 5.14.1)
      Activer le plugin « Html5up « Escape Velocity » » (version : 0.6.0)

      Les actions supplémentaires suivantes seront effectuées :

      Télécharger et activer le plugin « Adaptive Images » (version : 2.1.4)
      Télécharger et activer le plugin « SPIP Bonux » (version : 4.1.0)
      Télécharger et activer le plugin « Compositions » (version : 3.9.3)
      Télécharger et activer le plugin « Saisies pour formulaires » (version : 4.0.3)
      Télécharger et activer le plugin « Z-core » (version : 3.0.0)

    • Pour info, je vais travailler dessus dans les jours à venir pour le rendre totalement compatible SPIP4.

    • ok
      alors je vais attendre avant de poser mes questions de configuration

    • Il y a une version 0.7 (qui va finir en V1.0) à tester par là : https://git.spip.net/spip-contrib-squelettes/html5up_escape_velocity/archive/v0.7.zip (elle n’est pas distribuée pour l’instant donc pas accessible via SVP).

      Pouvez-vous la tester et me dire si tout est ok ? Si oui, on pourra la distribuer.

    • Ok je vais tester en partant de zero .....
      soit un spip 4.0.0 tout frais tout beau et la version 0.7
      je repasse .....

      déjà ça coince avec
      • Le plugin Html5up « Escape Velocity » dépend du plugin FONTAWESOME5 ≥ 5.14.0.

      et comme il est pas compatible spip 4.0.0
      pour continuer faudrais changer les bornes pour tester plus loin

    • Comme indiqué plus haut, tu peux ajouter

      define('_DEV_VERSION_SPIP_COMPAT',"3.2.99");

      à ton fichier config/mes_options.php, ça te permettra d’installer le plugin.

      Pour info, je viens d’ajouter la gestion des commentaires : https://git.spip.net/spip-contrib-squelettes/html5up_escape_velocity/archive/v0.7.zip

    • Tout a fait , la dessus pas de soucis.
      j’ai opté pour la méthode changement de borne pour le plugin FONTAWESOME5 ≥ 5.14.0.

      j’avais mal interprété : Pour info, je vais travailler dessus dans les jours à venir pour le rendre totalement compatible SPIP4.

      et du coup j’avais fait une install fraiche de sip 4 + le plugin et avais remonté le probléme rencontré
      ce qui peu perturbé un nouvel utilisateur du plugin si il voie compatible spip 4.0.0 et que d’entré a son écran ça bloque.

      je continue ma découverte

    • Voir à ce sujet https://discuter.spip.net/t/svp-impossible-de-telecharger-installer-des-plugins-3-2-via-svp-spip4/155248

      C’est pour ça qu’il ne faut pas changer les bornes des plugins mais utiliser le define _DEV_VERSION_SPIP_COMPAT :)

    • ok ok

      par contre dans le plugin je voie :
      <necessite nom="fontawesome5" compatibilite="[5.14.0;]" />

      donc lors de l’activation du plugin Html5up « Escape Velocity
      il doit allez le chercher non ?
      ce qui n’est pas le cas , il faut le faire a la main et le placer dans le répertoire plugins/auto

      après ça roule pour l’install

      Actions demandées :

      Activer le plugin « Html5up « Escape Velocity » » (version : 0.7.0)

      Les actions supplémentaires suivantes seront effectuées :

      Télécharger et activer le plugin « Adaptive Images » (version : 2.1.4)
      Télécharger et activer le plugin « SPIP Bonux » (version : 4.1.0)
      Télécharger et activer le plugin « Compositions » (version : 3.9.3)
      Activer le plugin « Font Awesome 5 » (version : 5.14.1)
      Télécharger et activer le plugin « Saisies pour formulaires » (version : 4.0.3)
      Télécharger et activer le plugin « Z-core » (version : 3.0.0)

    • Yo
      j’ai telecharger une image de Dimensions 600 × 82 pixels
      que j’ai affecté comme Image d’entête
      Numéro du document image utilisé en entête. Dans le template original, l’image a une taille de 1920x653 pixels.

      seulement mon image n’apparais pas complète a l’écran, configurer en 1600*900

      il faut que je fasse une diminution de l’affichage écran pour la voir entière.

      qu’est ce que j’ai loupé ?
      merci

    • Sans lien pour voir, difficile de comprendre et d’aider.

      Pour le reste, ça fonctionne bien avec SPIP4 de ton côté aussi ?

    • Oui oui ça fonctionne impec
      j’ai changé d’image et je n’ai plus le soucis

    • La v1.0.0 compatible SPIP4 devrait être rapidement disponible via SVP et https://plugins.spip.net/html5up_escape_velocity

    • Juste pour info ;)
      dans l’interface de configuration du squelette
      une coquille c’est glissé

      Grille / Mode de la page d’accueil

      Choisissez ce qui soit apparaître dans la grille

    • Quel fichier affiche la page focus ...........
      j’ai l’impression que la coupure ne se fait pas sur le même nombre de caractère entre les trois articles ?

    • Ça doit provenir que filtre |couper de SPIP car le squelette ne permet pas de choisir le nombre de caractères : https://git.spip.net/spip-contrib-squelettes/html5up_escape_velocity/src/branch/master/inclure/accueil-focus.html#L31

      Pour info, il faut ajouter ?var_mode=inclure à l’adresse de la page pour voir les fichiers du squelette.

    Répondre à ce message

  • 2

    ( Les commentaires ne sont plus en thread)

    Non pour l’instant je n’ai eu besoin que du bloc « focus » en page d’accueil (mais cela peut évoluer), merci, je comprend pourquoi j’ai cette erreur.
    Le site est là https://cdck29.org (vieux site qui avait besoin d’une nouvelle jeunesse)

    dd

    Répondre à ce message

  • 1

    Bonjour,
    Merci pour ce plugin : je m’en suis servie pour la mairie de Piégut dans les Hautes Alpes. Je ne peux pas désactiver les autres plugin du site car le site n’est pas en test... mais le problème que je rencontre est plutôt lié à la présentation...
    à cette adresse, le phénomène qui me gène est visible lorsque l’on est en configuration d’écran : 1920x1080
    http://www.mairie-piegut.fr/spip.php?rubrique2
    La div de class « col-3 col-12-small » de « conseil municipaux », cache le bouton situé au dessus... Comme j’ai essayé de comprendre.. pour que les gens puissent quand même aller sur la sous rubrique, j’ai fait en sorte que les titres soient « cliquables »...
    En gros, j’ai modifié (mis dans mon dossier squelette) : inclure/liste/articles.html. et j’ai remplacé
    <h2>#TITRE</h2>
    par
    <h2><a href="#URL_ARTICLE">#TITRE</a></h2>
    (ligne 42 du fichier)
    ça va bien car, on a une seconde solution lorsque le bouton est caché par la couche du dessus.. mais... j’aimerais trouver une meilleur solution...

    Je précise notre configuration :
    PHP : 7.2.
    Navigateur : Chrome
    Spip : 3.2.7.

    Si quelqu’un a une idée ??? merci d’avance !!!

    • Bonsoir,
      Peut-être en ajoutant une marge au bloc dans ton fichier .css comme par exemple :
      section.box {margin-bottom: 2em;}
      dd

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom