HTML5UP Éditorial

Published : 27 November 2017 – updated on 21 December 2021 – by chankalan – 352 commentaires

1
2
3
4
5
27 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 years 1 year 3 months Without limit
par date
Filter

95 discussions

  • 1
    claudio26

    Bonjour,
    j’ai installé spip4.1 avec le pluguin HTML5UP Editorial 1.4 et le mode compatibilité 3.2.99
    tout se passe bien, sauf pour l’article « majeur » (le second sur la page d’accueil), quand j’insère dans celui 4 fois ce code :

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

    au lieu de s’afficher 2 x 2 sur la largeur, les ’ paragraphe sont l’un dessous l’autre, quelque soit la taille d’écran au-delà de 1200 pixels, de navigateur et de menu déployé ou pas !

    la div des blocs fait 372 pixels et celle contenant les blocs 941 pixels, cela devrait passer ! Quelqu’un à déjà eu ce problème ?

    merci de vos retours.
    Claude

    • claudio26

      Bonjour, j’ai trouvé le problème, en “modifiant” par un copier/coller dans mon dossier squelettes/css le fichier theme.scss ligne 105 que j’ai commenté /*clear:both;*/ et là j’ai bien les 4 liens en 2 + 2 comme dans le thème original !
      C’est peut-être du au forçage sur SPIP 4.1.5

      Si cela peut aider les développeurs ! Bonne journée. Claude

    Reply to this message

  • Arnault

    Bonjour et merci. Un beau squelette simple et clair.
    Quelqu’un saurait-il comment procéder pour ne faire afficher que les articles de la sous rubrique active dans le menu latéral ?
    Merci par avance

    Reply to this message

  • jpa25

    Bjr un petit soucis de formatage du texte, de quoi cela vient ? merci pour une aide

    Reply to this message

  • 3
    capecarlate

    Bonjour,

    Merci pour ce très beau plugin. Je viens de l’installer la dernière version, mais j’ai un petit souci les icônes ne s’affichent par-exemple pas de menu sandwich ni de “v” sur le sommaire à la place il y a des symboles étranges. N’y auraient-ils pas des problèmes avec la police FontAwesome ? Comment y remédier ?

    Merci

    • capecarlate

      J’avais omis de dire que mon hébergeur (lautre.net) c’est du php 5.6 et que la version de SPIP utilisée est la 3.2.12

    • capecarlate

      J’ai essayé en local avec la version 7.4 de PHP, et j’ai également le même le même problème les icônes (loupe recherche, menus ... ) ne s’affichent pas hormis ceux des contacts.
      J’ai essayé de voir dans main.scss sans y détecter ce qui pose problème (@import url(fontawesome-all.min.css); ?)

    • capecarlate

      En fait le problème vient du jeu de caractère de mon site qui est en iso-8859-1, avec l’utf-8 cela fonctionne bien, mais il faut que je convertisse la base...

    Reply to this message

  • 1
    philippeJ

    Bonjour,

    Sur mobile, lorsque la page est réduite à une seule colonne, la pagination en bas de page est réduite aux deux seules valeurs (début et fin : 1 et n° dernière page) empêchant donc accéder aux pages suivantes en cliquant sur les numéros de pages intermédiaires.

    Cette anomalie disparait dès lors que la page affiche plusieurs colonnes d’articles.

    Merci de votre aide

    Cordialement

    Reply to this message

  • 1
    vgStef

    Bonjour, j’aime bien votre squelette!

    J’aimerais toutefois personnaliser certains aspect selon les besoins de notre organisme, alors j’aimerais savoir quelle est la meilleure procédure pour faire des changements aux squelettes. Devrais-je faire une copie des fichiers que je veux modifier, ou bien faire une copies complète du squelette? Et où mettre ces fichiers.

    Aussi, je constate que le menu ne prend pas en compte les langues. Il affiche les rubriques de toutes les langues.

    Ce serait bien aussi d’avoir une option dans la page de configuration du squelette pour afficher ou non le formulaire de commentaires.

    • chankalan

      Bonjour,
      le mieux pour personnaliser un squelette est de surcharger seulement les fichiers qu’on a besoin de modifier, et pour ça de les placer dans un dossier “squelettes” à la racine du site.

      Pour le menu de langue, c’est quelque chose qu’il serait bien d’avoir dans le squelette, et si vous faites la modification, il faudrait peut-être la proposer pour l’inclure au modèle...

      Pour les commentaires, c’est suivant le paramétrage du forum associé à chaque article, ou bien gérés pour tout le site à la page /ecrire/?exec=configurer_forum

    Reply to this message

  • 10
    PRX38

    bonjour ,
    après qq semaines de réglages , on voit les pbs SEO :
    le pb majeur est le long délai de mouvement du menu que l’on nomme “CLS” qui te provoque un déréférencement de toutes tes pages sur GG sur mobile :

    — > comment fait-on SVP pour arrêter le fait que, à première connexion, le menu se présente sur un mobile puis se rétracte ? je souhaite qu’il reste rétracté à la connexion et se présente seulement au clic ?
    merci !

    • chankalan

      Bonsoir,
      la version 1.3.11 corrige ce problème de menu, le modèle Editorial a eu des mises à jour qu’il fallait reporter ici.
      Je n’ai pas trop saisi le problème de déréférencement...

    • PRX38

      a là c’est la catastrophe: en mobile le menu recouvre tout l’écran !

    • PRX38

      c’est la catastrophe : le menu recouvre tout l’écran, il faut que je revienne en arrière , bonjour les tests!

    • PRX38

      c’est dans quel css que tu as changé qq chose (sans parler que la couleur choisie est remplacée par du rouge)?

    • chankalan

      Bonjour,
      voilà, j’ai remis la couleur choisie - voir la v1.3.12
      Pour le menu qui recouvre l’écran, ça doit être un reste de cache : il faut bien recalculer toutes les pages, vider le cache du navigateur. Est-ce que vous avez surchargé certains fichiers ? Si c’est le cas il faut vérifier chacun et répercuter les modifications...

    • PRX38

      je t’ai mis mon squelette sur https://git.spip.net/spip-contrib-squelettes/html5up_editorial/issues/7 avant de faire un fork du tien : j’ai fait de considérables amélioration de la v 1.3.10 à cause du SEO des pages, même le sitemap qui ne prend que les pages ou on met “index” , cela intègre les menus , les groupes de mots et brèves, sans changer l’aspect initial : les boutons et leur forme qui ne rentraient pas en mobile ont été changés..

    • PRX38

      bonjour , cela c’est super bien amélioré avec la v 1.3.12 sur le CLS : cela ne “bouge plus” au chargement, merci - j’ai amélioré en ce sens mes adaptations.
      Il reste encore qq ms à gagner sur le temps de chargement trop long pour Google (LCP de Web vitals) que l’on pourrai gagner en supprimant la police fontawesome-all.min.css text/css 288 ms 11.9 KB : peut-on avoir l’option dans une future version de ne pas l’utiliser ? ou bien la changer par une police classique dans notre “/squelettes” mais où et comment svp ?
      merci

    • chankalan

      Bonjour,
      le but du squelette est de verser pour SPIP un modèle existant, pour les transformations telles que remplacer Fontawesome il faut surcharger les fichiers de ton côté.
      Regarde par exemple dans inclure/head.html pour voir l’appel des css, qui va te renvoyer à css/main.css dans lequel tu trouveras ce que tu cherches... à toi de voir les conséquences dans le squelette, et de combler les manques ensuite (rien d’infaisable :o)
      Bon SPIP !

    • PRX38

      merci ,
      effectivement, la modif est dans le fichier main.scss sous /css
      j’ai mis en commentaire une ligne : la 8:
      //@import url(fontawesome-all.min.css);
      et ai rechargé le site, vidé le cache, recalculé les CSS : pas d’impact visible et un gain de 288ms sur le temps de chargement , donc inutile ?
      Par contre pas réussi à être aussi efficace avec la surcharge (en fait une surcharge par définition, quand c’est chargé ....). Voilà : à réfléchir pour les versions suivantes de ce beau plugin.

    • PRX38

      bon, en fait seuls la loupe de “recherche” et le “hamburger” d’accès au menu ont “disparus” et sont à rajouter : je vais voir à les remplacer - mais pas question de recharger une font pour cela.

    Reply to this message

  • 6
    PRX38

    bonjour,
    il y a un effet bizarre au niveau de la couleur paramétrée : elle ne change pas toujours (c’est cela le problème), voire on n’arrive pas à la modifier sur un affichage en “fenêtre de navigation privée”, et cette couleur paramétrée est celle vue par la personne loguée. La couleur par défaut ne peut être changée à priori .
    J’ai bien sur testé “vider le cache”

    • chankalan

      Bonjour,
      je viens de faire le test et le changement se fait bien : il faut avoir dans l’url “&var_mode=recalcul” en cliquant 2 fois sur “recalculer la page”, et il vaut pieux que la compression des fichiers ne soit pas activée sur la page “Configuration > Fonctions avancées”, en plus de bien vider le cache, voir activer l’option “Désactiver le cache” dans “Maintenance > Vider le cache”...
      La “fenêtre de navigation privée” ne renouvelle peut-être pas son cache aussi facilement, vider le cache du navigateur peut être utile...

    • PRX38

      bonjour,
      comment ajoute t’on les images (comme l’ours) sur la colonne de gauche svp comme sur votre modèle https://html5up.net/editorial avec le squelette ? merci

    • Chris

      Bonjour,

      Comme cela est indiqué dans la documentation :

      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.

    • PRX38

      merci , j’ai bien mis un article avec un descriptif et un logo (et du contenu): j’ai bien en colonne de gauche son descriptif et son lien, mais PAS le logo (une taille maxi sans doute ?) . qu’est-ce que je doit trouver dans les squelettes pour cela SVP?

      De plus, dans la doc qui est ci-dessus, de cette page, il est écrit une précision que je ne comprends pas : “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”
      Qu’en fait-on de cette info ? comment l’appliquer ? Est-ce une simple info ?

    • Chris

      En vérifiant le code du fichier “inclure/sidebar.html”, il n’y a pas de logo prévu dans l’affichage.
      Une solution consiste à ajouter une image via la balise <img...> dans le champ “descriptif” avec le texte, cela devrait fonctionner.

      Concernant le modèle, les paramètres peuvent être ajoutés au modèle initial, soit :

      • <articleXX|resume|affichertitre=non|afficherlien=non>
      • <articleXX|resume|afficherlien=non>
      • <articleXX|resume|affichertitre=non>
        selon le résultat souhaité.
    • PRX38

      merci,
      donc pour aider les suivants : pour ajouter le logo de l’article heros de la colonne de gauche,
      j’ai inclus dans le code existant de « inclure/sidebar.html », (dans mon rep squelettes bien sûr)
      le code :

      [<header class="major">
        	<h2[ class="(#EDIT{titre})"]>(#TITRE)</h2>
        	<a href="#URL_ARTICLE" class="image">[(#LOGO_ARTICLE_RUBRIQUE|html5up_image_reduire{250})]</a>
 
		</header>]

    Reply to this message

  • 2
    PRX38

    bonjour,
    quelques suggestions d’amélioration de ce squelette :
    -  j’ai corrigé le squelette de l’index (peux vous le livrer et vous montrer sur un site de test en mp)
    -  au niveau navigation : on ne peut jamais atteindre le contenu (texte) des rubriques
    -  navigation : et on devrait pouvoir choisir de mettre ou non les articles dans le menu car dans le cas d’un gros site éditorial : cela fait désordre et fouillis
    -  au niveau SEO : je vois que les head et header viennent d’une version de Spipr , je les avais modifiés sur un autre site pour améliorer le SEO (je peux vous les livrer).
    -  SEO : Il y a des fautes sur la balise H1 doublée (ce qui est “interdit”) sur articles - je vous conseille d’utiliser le fameux plugin “Seo Quake” sur Firefox et aller sur l’onglet “diagnostic” de chaque type de pages : les erreurs sont clairement formulées.
    merci

    Reply to this message

  • 3
    PRX38

    bonjour ,
    je viens de passer mon site en spip 4 avec votre plugin très beau et responsive :bravo !
    Par contre je ne comprends pas pourquoi mon logo reste toujours (très) petit: 50x21pi :

    <img class="spip_logo_left" src="local/cache-vignettes/L5…2x-ca0fa.jpg?1629805899" alt="" width="50" height="21">

    et il y a 7 images sans attribut “alt” (dont le logo) sur la page d’accueil (et les autres)
    merci d’avance.

    • chankalan

      Bonjour,
      le logo est petit pour coller avec la présentation originelle du modèle Editorial, mais il est toujours possible de personnaliser votre site en modifiant quelques fichiers. (cf pour le logo du site ce fichier : dans le dossier plugins/.../html5up_editorial/header/dist.html)
      Les attributs alt des images semblent bien présents, mais s’ils sont vides, ce n’est pas forcément trop gênant. Mais peut-être que les logos gagneraient à avoir un contenu pour cet attribut, je note...

    • PRX38

      ok merci , je vais m’en occuper - et si je veux rajouter un menu horizontal par le plugin “menu” , est-ce prévu et comment doit-on l’appeler (identifiant) (sur d’autres squelettes c’était “barrenav”) ?

    • chankalan

      Le menu du modèle est automatiquement créé en publiant du contenu, mais il faut personnaliser le squelette si vous voulez ajouter d’autres menus ou quoi que ce soit... tout est possible, mais ça sort du cadre du modèle Editorial.

    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