HTML5UP Éditorial

Publié le : 27 novembre 2017 – Dernière modification le 21 décembre 2021 – par chankalan – 371 commentaires

1
2
3
4
5
28 votes

Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial

Configuration

La page de configuration permet quelques réglages. On y défini la couleur principale du site, des informations de contact et le contenu de la page d’accueil et de la colonne gauche.

Sur la page d’accueil, le premier article est le « héro », le second est le « majeur ».

  • L’article héro : le titre, un résumé, le logo + un bouton « Lire la suite »
  • L’article majeur : le titre + l’introduction (ou le champ « Descriptif » s’il est activé dans la partie « Configuration > Contenu du site »).

En colonne gauche, un article « héro » est aussi désigné pour afficher son introduction (#INTRODUCTION), son logo et un lien vers la page de l’article.

Rédaction

Il est préférable d’activer les champs « Chapeau » et « Post-scriptum » pour bénéficier de plusieurs mises en formes : le champ « Chapeau » d’un article s’affiche en public en une colonne pleine largeur, le champ « Texte » s’affiche lui sur deux colonnes, et le champ « Post-scriptum » se déroule sur 3 colonnes.

L’article « majeur »

Pour rédiger le texte de l’article « majeur » (le second sur la page d’accueil), un modèle permet d’afficher comme dans le thème de départ une icône de FontAwesome avec un texte en bloc, deux blocs par ligne. C’est le modèle <iconebloc> qui prend quelques paramètres :

  • |icone=fa-rocket (ou tout autre icone de FontAwesome https://fontawesome.com/v4.7.0/icons/ avant la v1.3 de Editorial, ensuite c’est la version de Fontwesome 5 Free dans les catégories Solid/Regular/Brands -> precisions)
  • |iconetitre=le titre
  • |iconetexte=le texte
  • |left ou |right (positionner le modèle à gauche ou à droite)

<iconebloc|icone=fa-rocket|left|iconetitre=mon titre|iconetexte=tout le texte ici avec mise en {{forme}} et lien [hypertexte->#]>

On utilise sur la page d’accueil la balise #INTRODUCTION de l’article, et cette balise se décrit comme ceci : https://www.spip.net/fr_article902.html#INTRODUCTION
Elle va donc chercher d’abord le descriptif de l’article s’il existe, sans le couper, ce qui est très utile si on veut inclure des modèles. Il faut donc aller dans « Configuration > Contenu du site » pour activer le champ descriptif des articles, et faire l’inclusion des modèles à cet endroit pour qu’ils s’affichent sur la page d’accueil correctement.

L’article "héro" de la colonne gauche

Dans l’article "héro" de la colonne gauche, si on utilise le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visibles sur la page de l’article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l’article XX, avec les options suivantes :

  • |affichertitre=non
  • |afficherlien=non

Inclure des icônes dans les textes

Un dernier modèle permet d’insérer n’importe quelle icône de FontAwesome dans le flux d’un texte. Utilisez <icone> avec ces paramètres :

<icone|icone=fa-rocket|taille=50px>

Fontawesome 5 Free
Avec la version 1.3 de Editorial, Fontawesome 5 est utilisé : https://fontawesome.com/icons?d=gallery&p=2&s=brands,regular,solid&m=free
Les icônes s’appellent dès lors dans les modèles en ajoutant la valeur regular (ou rien), solid ou brands au paramètre icone, de cette manière :
<iconebloc|icone=fa-rocket|left|iconetitre=mon titre|iconetexte=tout le texte ici avec mise en {{forme}} et lien [hypertexte->#]>
ou
<icone|icone=fa-rocket solid|taille=50px>

Les icônes de réseaux sociaux

En utilisant le plugin "Liens vers les réseaux sociaux" (sociaux), vous aurez les icônes des réseaux que vous aurez choisis.

Formulaire de contact

En utilisant le plugin "Formulaire de contact" (contact), le formulaire sera présent en colonne gauche, automatiquement.
NB : À noter que l’activation des pièces jointes au formulaire cause un problème d’affichage dans la colonne trop étroite pour ce champ.

Conseils

Utiliser Court-Circuit pour éviter la page rubrique s’il n’y a qu’un seul article dans une rubrique.
Avec le plugin Pages, si un article désigné « héro », « majeur » ou « héro en colonne gauche » devient une « page unique », il n’apparaîtra plus dans le menu.

Nota Bene avant mise à jour

Pour suivre la mise à jour du plugin SCSSPHP, il a fallu mettre à jour le thème Éditorial, qui utilise une autre version de la librairie d’icônes Fontawesome.
v1.3.4 : La librairie Fontawesome passe en version 5, ce qui nécessite certainement de renommer les appels, cf les précisions.

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP.
La liste par ici...

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

102 discussions

  • 2
    mjhvc

    Bonjour,

    En testant sur W3C la page de backend (rss) d’u site avec html5up_editorial en version 1.3.5 qu’obtenez-vous ?

    En ce qui concerne notre site et son backend, w3c pointe des erreurs dans le xml du squelette backend.html (je suppose)

    https://validator.w3.org/feed/check.cgi?url=https%3A%2F%2Fwww.abelli-asbl.be

    Ce qui est bizarre :
    Sous thunderbird 78 : https://abelli-asbl.be/spip.php?page=backend n’est pas reconnu
    alors que Firefox + Livemarks visionnent très bien cette page backend.

    Une piste ?

    mjhvc

    • mjhvc

      Bonjour, c’est résolu.

      Le fichier de squelette backend.html de htm5up_editorail est nickel.
      Il contient bien ce que le w3c réclame :
      1. dans la balise rss : xmlns:atom="http://www.w3.org/2005/Atom"
      2. dans la balise channel :
      <atom:link href="[(#SELF|url_absolue)]" rel="self" type="application/rss+xml" />

      Mais, par précaution, après test sur un autre spip, j’ai rajouté un petit filtre
      {0,1}
      dans la boucle DOCUMENT de la balise enclosure sur /inclure/rss-item.html soit :

      <BOUCLE_documents(DOCUMENTS){id_article}{mode=document}{doublons}{0,1}>[
<enclosure url="(#URL_DOCUMENT|url_absolue|unique)"[ length="(#TAILLE)"][ type="(#MIME_TYPE)"] />]
</BOUCLE_documents>

      car w3c et avec lui thunderbird, ne valide pas la page si plus d’une enclosure (plus d’un document) par article sont listés.

    Répondre à ce message

  • 1
    richard

    Bonjour,

    à moins de modifier le fichier css, existe-il un paramétrage pour avoir une seule colonne
    car quand il y a des photos, le titre de la photo est à gauche et l’image à droite ;

    merci

    • chankalan

      Bonjour,
      il ne faut utiliser que le champ chapeau, qui est en une seule colonne....

    Répondre à ce message

  • 5
    lebardix

    Bonjour,

    Je viens de mettre à jour mon site SPIP en 3.2.9 avec mise à jour des plugins dont SCSS PHP 2.70
    qui produit l’erreur suivante

    SCSS : Echec compilation fichier plugins/auto/html5up_editorial/v1.2.3/css/main.scss
    $\28xlarge\29 is not a valid Selector in .\39u\28xlarge\29, .\39u$\28xlarge\29 : failed at $\28xlarge\29 ScssPhp\ScssPhp\Compiler::evalSelectors on line 1, at column 24

    J’ai donc testé avec les versions antérieures
    2.5.3 compilation OK
    2.6.1 et 2.7.0 erreur à la compilation

    à voir, merci

    • Philippe ROBIN

      bonjour

      pareil
      j’ai le plugin « Editorial by HTML5 UP » mis à jour
      tous mes plugins sont à jour.
      et la mise en page n’est pas revenue.

      site en vrac ...

    • chankalan

      Bonjour,
      depuis quelques jours il y a la version 1.3.4 disponible, c’est bien celle-ci qui est installée ?
      Ce serait possible de voir le site pour tenter de comprendre ?

    • Philippe ROBIN

      bonjour

      j’ai du revenir en Editorial html5 1.1.17 et scss 2.5.3 pour avoir une partie de mon site viable.
      il me manque maintenant la colonne de gauche, alors qu’elle y était avant ...
      mais au moins j’ai une page qui tourne.

      http://www.crifrance.com

    • chankalan

      Là comme ça je peux pas savoir ce qui se passe. Par exemple, la colonne est revenue, donc que s’est-il passé ? C’est le cache qui a été recalculé ?

    • Philippe ROBIN

      oui, j’ai effacé le cache, désactivé, puis ré activé.

      merci
      du coup, je ne mettrais pas à jour scss ni editorial ...

    Répondre à ce message

  • 4
    philippeJ

    Bonjour,

    Les versions 1.3.1 et 1.3.2 ne récupèrent pas la couleur choisie dans le formulaire de paramétrage.

    La couleur accentuée est systématiquement remplacée par la couleur par défaut : #f56a6a

    Et effectivement, dans main.css qui a remplacé main.scss, on constate par exemple que les lignes :
    ====
    _button/scss:23 color : _palette(accent) !important ;
    ====
    sont systématiquemt remplacé par la couleur par défaut en dur.
    ====
    mains.css:1501 : color : #f56a6a !important ;
    ====

    • chankalan

      Bonjour,
      ça devrait mieux fonctionner avec la v1.3.3 maintenant...

    • philippeJ

      Merci !!! :-)

      Cela semble parfait après la montée en version 2.7.0 de SCSS PHP
      Je récupère bien la couleur demandée.

      Dans paquet.xml la version est restée en 1.3.2 cependant.

    • chankalan

      Oui pour la 1.3.2... mais la v1.3.4 retrouve les styles adaptés pour SPIP... (et la cohérence tag/version)

    • philippeJ

      Encore une fois merci

      1.3.4 déployée correctement.

    Répondre à ce message

  • Ludovic

    Bonjour et merci pour ce beau travail,

    Lorsque je compare l’apparence du texte obtenu avec le plugin et le modèle, je constate que le texte de la famille « Open Sans » des articles n’a pas tout à fait le même rendu : peut être un peu plus étiré en hauteur, par contre, le texte des titres de la famille « Roboto Slab » a exactement le même aspect.

    En prenant les outils de dev du navigateur je ne constate pourtant pas de différence : même police de caractère (Open Sans), même taille, etc.

    Qu’est-ce qui peut expliquer cette différence d’apparence et éventuellement comment la compenser ?

    Merci,
    Ludovic

    Répondre à ce message

  • 1
    paslaniici

    Bonjour,
    Je teste le plugin qui pour le moment me donne entière satisfaction pas de bug particulier.
    Ma question est simple et comme je ne suis pas un grand habitué de SPIP elle est peut-être à coté de la plaque.
    J’ai remarqué que le plugin n’intègre pas automatiquement un fichier CSS perso. En fait j’ai besoin de changer quelques attributs mais je n’arrive pas à trouver ou les poser sans que cela ne soit écrasé par une nouvelle version du plugin. Même en utilisant les mêmes fichiers mis dans un répertoire squelette au bon endroit cela ne marche pas.
    Du coup je pense que c’est peut-être à cause de Zcore mais là vraiment je ne sais pas comment fait.
    *pouvez-vous m’aiguiller ?
    Merci à vous
    Patrick

    Répondre à ce message

  • 1
    mjhvc

    Bonjour,

    Test HTML5UP en v.1.3 sur : https://chantier.abelli-asbl.be
    j’essaye d’allumer les appels fa (fontawesome) dans sidebar.html, bloc : Restez en contact

    Apparemment l’appel normal prévu : <li class="fa-home">
    ne fonctionne pas, ainsi que tout appel class="fa-xxx"
    dans une balise html de type bloc.

    alors que l’appel basique : <i class="fa fa-home"></i> mais dans une balise html inline
    fonctionne bien ....

    test basé sur :
    https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

    et aussi sans succès :
    https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

    Une info sur le rallumage des icones fa ?
    Avez-vous rencontré pareil problème ?

    Merci :-)

    • mjhvc

      Réponse trouvée en comparant avec : https://html5up.net/editorial
      l’appel a changé et est :
      <li class="icon solid fa-home"

      en lui et place de :
      <li class="fa-home">

      et cela fonctionne semble bien fonctionner .
      reste à changer tous ces appels partout ....

    Répondre à ce message

  • 5
    mjhvc

    Bonjour,
    Ceci concerne le squelette HTML UP editorial v1.2.3 et dedans :
    /inclure/sidemenu-m.html,

    En ligne 12, s’ouvre une BOUCLE_groupes(GROUPE_MOTS)
    avec dedans (ligne 22), l’ouverture d’une balise #URL_RUBRIQUE

    Question : de quelle rubrique s’agit-il ?
    Car ne voyant nulle par dans https://www.spip.net/fr_article909.html
    de liens logique entre la boucle MOT et GROUPE_MOTS et la balise #URL_RUBRIQUE
    je suis perplexe pour cette ligne, Spip fait-il des jointures sql spontanées dans ce cas ?

    Apparement, cette ligne ne s’exécute que si existe un groupe_mot sans mots-clés apparentés et avec un et un seul article relié à ce groupe mot. Est-ce réaliste ?

    Merci,
    mjhvc

    • chankalan

      Bonjour,
      tout semble bien, c’est justement parce qu’il n’y a pas de rapport entre les rubriques et les groupes de mots qu’il y a quelques boucles pour décider de l’action à exécuter.
      Le test [(#GET{smenu#ID_GROUPE}|=={oui}|non)...] va vérifier que la variable précédemment créée n’a pas la valeur « oui », alors renverra vers la rubrique tout simplement, alors qu’ensuite le test [(#GET{smenu#ID_GROUPE}|=={oui}|oui)...] va agir différemment parce que cette variable aura la valeur « oui ».
      cf https://www.spip.net/fr_article3990.html

    • mjhvc

      Bonjour chankalan et merci de la réponse.

      Le test ci-dessus va vérifier que la variable a bien la valeur : ’non’ ce qui, je crois, n’arrive en pratique quasi (*) jamais

      Pour tester et comprendre, j’ai modifié cette condition en :
      [(#GETsmenu#ID_GROUPE|==oui|oui)

      de manière à forcer l’exécution de l’instruction :
      <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a>]

      et cela donne :
      #TITRE affiche bien le(s) titre(s) du-des groupe(s )mots-clés
      #URL_RUBRIQUE vaut 0, ce qui déclenche une erreur 404. en clickant sur un titre de groupe.

      (*) cette valeur ’non’ est seulement vrai si :
      -  1 et 1 seul article est relié à un groupe de mots-clés
      -  ce groupe n’a reçu aucun mots-clés

      Fin de mes tests et élucubrations à ce propos qui visaient à m’éclairer dans la logique du squelette.

      Et grand merci pour eux :-)

    • chankalan

      En fait je sais quand est-ce qu’est utilisé ce fichier... si besoin il faut demander à luc.tech des précisions, l’auteur du code : https://git.spip.net/spip-contrib-squelettes/html5up_editorial/commit/e9514978043295e5bbe1c551e6cfbac6005f9841

    • mjhvc

      Merci chankalan.
      Le sujet est clos ici.

    Répondre à ce message

  • 4
    joz

    Bonjour,
    Je viens d’installer le plugin (1.1.17 - stable) et je reçois ce message d’erreur de squelette :

    SCSS : Echec compilation fichier plugins/auto/html5up_editorial/v1.1.17/css/main.scss
    $\28xlarge\29 is not a valid Selector in .\39u\28xlarge\29, .\39u$\28xlarge\29 : failed at $\28xlarge\29 ScssPhp\ScssPhp\Compiler::evalSelectors on line 1, at column 24

    que faire ?
    Merci d’avance pour vos lumières

    • EricL

      Bonjour,
      J’ai eu le même problème et je viens de m’en sortir...
      De ce que je comprends, il y a une incompatibilité entre ce plugin et la dernière version de Scssphp.
      J’avais la même config que toi, et la même erreur avec Éditorial 1.1.17 et Scssphp 2.7.0.
      La version 1.1.17 d’Éditorial est buguée elle aussi (des erreurs dans css/main.css) et a été corrigée depuis.
      Ce qui fonctionne chez moi :
      -  la dernière version d’Éditorial : 1.2.3 ( en test, mais ça marche mieux !)
      -  et une version plus ancienne de Scssphp : 2.5.3 qu’il faut, du coup, installer à la main.

      + ne pas oublier de ne pas mettre à jour Scssphp, c’est comme ça que mes ennuis ont commencés ;-)
      C’est très inhabituel d’avoir des soucis à cause de màj avec SPIP, mais là on est tombé sur un cas rare !
      Courage pour la suite ;-)
      EricL

    • chankalan

      Bonjour,
      j’ai tenté de corrigé avec la version 1.3.0 en utilisant les styles d’origine en css plutôt que scss, mais en gardant le scss pour les surcharges, merci de me faire un petit retour pour dire si ça va...
      https://git.spip.net/spip-contrib-squelettes/html5up_editorial.git

    • EricL

      Merci !
      Testé chez moi : Éditorial 1.3.0 et Scssphp 2.7.0 : tout fonctionne parfaitement.

      Décidément, toujours aussi efficaces les spipeurs...

      Mille tendresses !
      ÉricL

    • joz

      Super, ça marche avec la version sur le git et SCSS PHP 2.7.0
      merci !

    Répondre à ce message

  • 3
    Amaury Adon

    Salut à tous.
    J’ai un souci avec le plugin, une erreur de compilation qui n’apparait que lorsque je suis connecté en tant qu’administrateur et qui m’indique des fichier non trouvé pour l’import avec ie8.scss et ie9.scss.
    Il semble que dans ces fichiers, on ait

    @import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/skel';

    au lieu de

    @import 'css/libs/vars';
@import 'css/libs/functions';
@import 'css/libs/mixins';
@import 'css/libs/skel';

    Il me semble que cette modification résout le problème.

    • HirisBen

      J’ai le même problème, que j’ai résolu en revenant à une version antérieure de ScssPHP, Je pense qu’il y a un petit problème de compatibilité entre les deux.
      Je vais tester ta méthode qui est sans doute plus sûre. Merci pour ton post !

    • Maïeul

      Je ne reproduit pas ce problème avec html5up_editorial 1.2.2 et SCSS PHP 2.5.3

    • Frédérique

      Merci Amaury Adon pour cette solution qui fonctionne parfaitement sur mon site

    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