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

6 discussions

  • 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 1ère 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

    Reply to this message

  • 19

    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.

    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