HTML5up Escape Velocity

This contribution or plugin is actually being tested. Issues may occur, don’t hesitate to report those in following post’s comments.

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.

Note : Il n’est pas nécessaire d’“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

5 discussions

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

    • stephane

      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.

    • stephane

      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.

    • stephane

      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

    • stephane

      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 :)

    • stephane

      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)

    • stephane

      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

    Reply to this 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

    Reply to this 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

    Reply to this message

  • Bonjour,

    comme toujours, c’est plus facile d’aider avec au moins une adresse pour voir ce que ça donne :)

    Est-ce que tu as renseigné les champs “Article d’intro” et “Rubrique à mettre en avant” ?

    Reply to this message

  • Bonjour,
    Si j’active https://contrib.spip.net/SPIP-reset-2 la page sommaire affiche “erreur 404 pas d’article à cette adresse” même si

    <necessite nom="spip_reset" compatibilite="[3.0.0;]" /> 

    est ajouté dans paquet.xml.

    Sinon tout fonctionne, merci pour ce squelette.

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom