HTML5UP Story

Published : 17 May 2018 – updated on 21 December 2021 – by erational – 29 commentaires

1
2
3
4
5
14 Votes

Squelette SPIP “onepage” pour intégrer le thème Story de HTML5UP
https://html5up.net/story

Ce squelette permet de réaliser très simplement des sites de type “one page” sans toucher une ligne de code.

Site de démonstration
https://www.phideco.com/

Installation

A l’activation, le plugin installe aussi les plugins suivants :

Configuration

La page de configuration permet quelques réglages:

  • Couleur principale du site
  • Article “hero”: l’article à la une
  • Article galerie: l’article qui sert pour placer les images en diaporama
  • Un pied de page: Texte libre

Les icônes de réseaux sociaux

En utilisant le plugin “Liens vers les réseaux sociaux”, vous pourrez personnaliser les icônes des réseaux à afficher.

Rédaction

Configuration du site
Dans le menu configuration du site, pensez à renseigner:

  • Le titre du site
  • Son slogan
  • Un logo de site (qui sera repris dans l’article hero)

Les articles
Rédigez vos articles le plus simplement possible:

  • Un titre
  • Un texte court
  • Ajouter un logo à l’article qui servira d’illustration. En général il est préférable d’avoir une illustration carrée. Si aucune illustration n’est trouvée, on prend des images génériques. Utiliser des logos de tailles importantes (1000 à 2000px de large) car ces logos sont affichés en mode plein écran).

Le squelette liste tous les articles du site classés par ordre de numéro en alternant automatiquement les images à gauche puis à droite.

Pensez donc à utiliser la convention suivante:

10. Accueil
20. Savoir-Faire
30. Contact
....

Pour que le thème fonctionne bien graphiquement, il faut éviter d’écrire de longs articles, mais il faut plutôt écrire de nombreux petits articles (1 article = 1 paragraphe).

Article Hero
On affiche:

  • Le logo du site réduit
  • Le texte
  • Le logo de l’article sert pour le fond de page

Le titre de l’article Hero n’est pas affiché.

Article galerie
Cet article sert à créer le diaporama.
Créer l’article et y déposer vos images dans le portfolio.

Personnalisation

Pour les personnes qui veulent ajouter leurs propres styles, vous pouvez créer un fichier CSS personnalisé squelettes/css/html5_story_theme.css.

Une page «patron» est aussi livrée avec le squelette à l’adresse suivante:
http://monsite.tld/spip.php?page=_patron

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP.
Voir la liste des thèmes html5up portés sur SPIP...

Discussion

5 years 1 year 3 months Without limit
par date
Filter

15 discussions

  • 2
    DD

    J’ai un souci de javascript avec ce plugin sur un SPIP en 4.1 :

    Il doit y avoir un conflit quelque part car la barre typo ne s’affiche nulle part, la mediabox pour le portfolio non plus.

    Voici les erreurs javascript :

    16:26:34,190 Uncaught TypeError: $ is not a function
    <anonymous> http://127.0.0.1/site/plugins-dist/mediabox/lib/lity/lity.js?1660394438:19
    <anonymous> http://127.0.0.1/site/plugins-dist/mediabox/lib/lity/lity.js?1660394438:12
    <anonymous> http://127.0.0.1/site/plugins-dist/mediabox/lib/lity/lity.js?1660394438:14
lity.js:19:17

16:26:34,194 Uncaught ReferenceError: jQuery is not defined
    <anonymous> http://127.0.0.1/site/plugins-dist/mediabox/lity/js/lity.mediabox.js?1660394438:612
lity.mediabox.js:612:1

16:26:34,211 Uncaught ReferenceError: jQuery is not defined
    <anonymous> http://127.0.0.1/site/local/cache-js/jsdyn-javascript_porte_plume_start_js-2bae1801.js?1662308634:702
jsdyn-javascript_porte_plume_start_js-2bae1801.js:702:1

    Merci
    dd

    • erational

      Apparemment il y a des conflits de javascript avec SPIP 4.0
      C’est un peu normal car le template et ses javascriptifs sont livrés avec un jQuery 1.1 et SPIP embarque des versions plus récentes.

      C’est pourquoi à l’activation du plugin, on désactive automatiquement mediabox qui était incompatible.

      J’ai donc repris un peu les choses:
      -  la version 1.2.2 est compatible pour la branche SPIP 3.2. Tout semble bien fonctionner
      -  la version 1.2.3 est destinéee aux branches SPIP 4.0 et SPIP 4.1. On charge les javacripts un peu différemment (il faut laisser mediabox désactivé via le menu squelettes > boite multimedia). Merci de tester si cela marche mieux.

    • DD

      Magnifique !
      et merci de la rapidité.

      J’ai fait la mise à jour en 1.2.3 sur un site en SPIP 4.1.5 et en SPIP 4.0.8 sur un autre serveur et tout fonctionne..
      Par contre j’ai remis en action la boite multimedia car sinon les images du portfolio ne s’ouvraient pas).

      dd

    Reply to this message

  • 2
    DD

    Dans la config de ce plugin sur la page ?exec=configurer_html5up_story
    je voudrais avoir du texte avec
    <multi>
    dans le champ “texte de pied de page”
    mais ce n’est pas pris en compte.
    Par exemple

    <multi>[fr]Nous contacter[en]Contact us</multi>

    s’affiche sur le site public :

    [fr]Nous contacter[en]Contact us

    J’ai vu que dans le fichier
    /plugins/auto/html5up_story-09832-v1.2.0/formulaires/configurer_html5up_story.html

    il y a
    [(#SAISIE{textarea, pied_page_contenu,....

    mais je ne sais pas comment le modifier (si c’est bien là que ça se passe). Faut-il y ajouter quelque chose comme
    _T_ou_typo()

    A part ça ce squelette est bien pratique t convient bien avec du multilinguisme.

    Merci

    • erational

      Voilà j’ai ajouté le support des raccourcis SPIP dans le pied.
      En bonus, le pied est maintenant aussi éditable directement par le crayon :)

    • DD

      Merci c’est nickel

    Reply to this message

  • pamillet

    bonjour
    ce squelette me plait beaucoup, mais je ne vois pas dans la config comment retrouver ce qui est dans l’origine html5up (https://html5up.net/story)... Comment configurer une gallery ? mettre des items en tableau ? avec leurs paramètres.
    Et j’ai l’impression qu’il met tous les articles sur la page sommaire... après le hero

    pour la gallery, on trouve

    Gallery

    This is a Gallery element. It can behave as a lightbox (when given the lightbox class), and you can customize its style and size, as well as assign it an optional onload or onscroll transition modifier (details).

    et pour les items

    Items

    This is an Items element, and it’s basically just a grid for organizing items of various types. You can customize its style and size, as well as assign it an optional onload or onscroll transition modifier (details).

    Ces éléments ne sont pas dans la config du plugin... on peut les utiliser quand même ?

    merci d’avance

    Reply to this message

  • 1
    Manu_TJ

    Bonjour,

    Ce squelette se comporte bien avec la béta de SPIP, sauf sur un point, que je ne parviens pas à régler, malgré mes recherches.
    Lorsque j’insère un document avec un raccourci du type <docxxx|alignement>, l’cône du type de fichier (ex : PDF) apparaît bien mais avec une taille énorme. Comment revenir à une taille “normale” ?

    Merci pour toute aide.

    • Manu_TJ

      Il suffisait de patienter : la version finale 4.0 règle le souci.
      Merci pour travail fourni et partagé.

    Reply to this message

  • Fred

    Mouais, bon : story ne fonctionne pas… J’ai SPIP 3.7.2.
    Alors, j’ai mis mes nouveaux plugins (crayons, favicon, story, image_responsive, metas +, saisies, sociaux, spip-reset), recommandés avec Story, dans un dossier /plugins/ à la racine du site, Et je me suis débarrassé de html5up hyperspace, qui n’est pas compatible avec SPIP 3.7.2 (pas de regret) : je ne sais pas si c’était vraiment utile (en quoi ?). Ils apparaissent tous dans le gestionnaire de l’espace privé. Tous… sauf story.
    Que faire ?
    Merci de vos suggestions,
    Fred

    Reply to this message

  • ivandps

    Bonjour, est ce que le plugin rôle de document peut fournir les logos requis ? Merci

    Reply to this message

  • 1

    Bonjour,

    Faut-il ajouter un plugin pour pouvoir choisir un style graphique ?

    • JLuc

      Non, les squelettes HTML5up portés par SPIP sont indépendants et chacun a été porté en SPIP de manière différente. Mais avec le plugin zpip, le plugin zengarden permet de choisir parmi un lot de thèmes.

    Reply to this message

  • 1
    dut

    J’aimerai recourir à la fonctionnalité des blocs dépliables dans un site avec ce squelette, mais ceci n’est pas pris en compte.

    Y’a t’il des choses à ajouter dans le head pour que le script fonctionne ?

    Cordialement

    • dut

      Je reviens car j’ai avancé.

      Dans le fichier inc/inc_head en mettant la balise #INSERT_HEAD après l’insertion des script, le problème a disparu.

      erational, je te laisse juger de l’interet de fixer cette intervertion dans le zip de ce plugin.

    Reply to this message

  • dut

    J’aimerai recourir à la fonctionnalité des blocs dépliables dans un site avec ce squelette, mais ceci n’est pas pris en compte.

    Y’a t’il des choses à ajouter dans le head pour que le script fonctionne ?

    Cordialement

    Reply to this message

  • 1
    ivandps

    Bonjour,
    j’ai l’impression que le titre du site ne s’affiche pas ?
    http://amidesk.com/maquette
    Une idée ?
    Merci !

    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