HTML5UP Éditorial

Publié le : 27 novembre 2017 – Dernière modification le 21 décembre 2021 – par chankalan – 373 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

  • 7
    David

    Bonjour,

    avec SPIP (3.2.1) et le plugin Html5up Editorial (1.1.8 - stable), mon besoin est d’afficher une vidéo youtube à travers la section Chapeau de l’article Héro du site.
    Cependant le code html ci-dessous (qui s’affiche correctement s’il est placé dans la section Texte de l’article Héro) n’est pas pris en compte lorsqu’il est placé dans la section Chapeau

    <iframe width="560" height="315" src="https://www.youtube.com/embed/wGQTkGGRTsM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    Que dois-je faire pour permettre cela ?

    Librement

    • chankalan

      Bonjour,
      je ne sais pas pourquoi ça ne marche pas dans le chapeau si ça marche dans le texte... est-ce que vous pouvez tester avec le plugin oembed qui prend en charge l’affichage des vidéos dans un lecteur lorsqu’on ne met que l’url de la vidéo ?
      https://plugins.spip.net/oembed

    • David

      Merci pour votre réponse,
      avec oembed, tout va bien dans le texte de l’article, par contre dans le chapeau, c’est uniquement les textes de descriptions qui s’affichent et pas la vidéo

    • chankalan

      Je ne vois pas ce qui pourrait causer ça, je viens de tester les deux solutions, qui fonctionnent bien en local : intégration iframe ou lien avec oembed (bien sauter une ligne après le lien, sinon pas de lecteur...)
      Est-ce identique avec ou sans Editorial ?
      Le site est en local ou en ligne ?

    • David

      Bonjour,

      Le problème ne se reproduit pas lorsque le plugin Html5up Editorial est désactivé. Le site est en ligne.

      Pour le contenu SPIP suivant :

      aa

<https://youtu.be/W0cCUOyYs8s>

bb

      Dans la partie Chapeau de l’article, aucune trace des balises figure et figcaption qui semblent avoir été supprimé pendant les traitements sur le contenu Chapeau. Le code html est le suivant :

      <p>aa  	 	 			 Lecture 			 	 	   Titre  by Auteur https://youtu.be/W0cCUOyYs8s    

bb</p>

      Alors que dans la partie Texte de l’article, le code html (correcte) est de la forme suivante :

      <p>aa</p>
<figure class='spip_documents spip_documents_center ressource oembed oembed_video oembed_youtube'>
...
<figcaption>
...
</figcaption>
</figure>
<p>bb</p>
    • David

      Bonjour,

      j’ai pu trouvé un contournement au problème. Il s’agit du filtre |couper qui s’applique au contenu Chapeau. Ce filtre « nettoie le texte de toutes ses balises html ».

      Dans le squelette /plugins/auto/html5up_editorial/v1.1.8/inclure/article-hero.html , il suffit donc de remplacer :

      	[<p>(#INTRODUCTION|couper{300})</p>]

      par

      	[<p>(#INTRODUCTION)</p>]

      Pour une correction pérenne, il faudrait un filtre qui réduise la portion de texte à afficher sans pour autant nettoyer le texte de toutes ses balises html...

    • chankalan

      ah oui, c’est clair, |couper n’affiche pas les modèles, img non plus... je n’avais pas bien saisi sur quelle page les tests étaient fait, parce que dans la page article l’affichage est correct, avec ou sans le squelette Editorial...
      Donc c’est résolu ?

    • David

      Oui pour le contournement,
      mais il reste à mettre en place une solution pérenne, qui va limiter la quantité de texte « visible », et gérer correctement le code html du contenu.

      Librement,

    Répondre à ce message

  • 3
    Jean Paul Aubel

    Bonjour

    j ’étais sous sarka spip et j avais un secteur dédié aux sites référencés
    comment puis je introduire cela dans ce nouveau pugin
    merci

    Répondre à ce message

  • Jean Paul Aubel

    vraiment TB ce plugin bravo bien trouvé

    Répondre à ce message

  • Fred

    Bonjour, le thème est très sympa et très intéressant.

    Je voudrai savoir comment intégrer un plan type Google map ainsi qu’un calendrier permettant d’afficher toute sorte d’événements.

    Bravo pour le travail

    Répondre à ce message

  • 1
    pamillet

    bonjour

    utilisateur ancien de sarkaspip, j’ai choisi ce squelette pour un nouveau site qui ne devrait pas avoir trop d’articles, mais pour lequel j’ai besoin de la gestion des pétitions... Or elles ne sont pas incluses dans les squelettes... j’essaie de le faire pas à pas en m’inspirant de sarkaspip, mais c’est un peu lourd....

    merci de tout conseil pour le faire de manière simple....

    et bien sûr, si c’était prévu dans une prochaine version, ce serait super... !!

    pam

    Répondre à ce message

  • 2
    rcaron

    Petit souci...

    Page exemple : http://actes-de-lecture.org/spip.php?article5

    Le sous-titre « Articles » ne se colle pas complètement à gauche...

    Une idée pour corriger ?

    Merci

    Robert

    • chankalan

      Bonjour,
      C’est dû à la rédaction et à l’image flottante à gauche, et au fait qu’il y ait peu de texte après l’image. Vous pourriez empêcher les intertitres de suivre le flottement, mais ça ne conviendra peut-être pas à tous les coups non plus...
      En CSS h3 { clear:both; }

    • rcaron

      Bon. J’ai agrandi les images et mis davantage de texte... Et ça va mieux. Merci

    Répondre à ce message

  • 2
    rcaron

    Bonjour,

    Comment supprimer les choix d’articles hero et majeur ?

    J’avais choisi des articles mais je ne souhaite plus utiliser ces deux fonctions et donc ne plus faire appel à des articles.

    Merci

    Robert

    • chankalan

      Bonjour,
      c’est peut-être un point à améliorer dans SPIP, mais dans l’immédiat, il faut re-sélectionner un article pour pouvoir cliquer sur une petite croix rouge qui annule et vide la sélection...

    • rcaron

      Super ! Merci

    Répondre à ce message

  • 1
    rcaron

    Bonjour,

    Comment réduire l’espace en haut du titre d’un article ou d’une rubrique...

    Je me perds sur les css

    Merci

    • chankalan

      Je suis pas sûr d’avoir bien saisi, mais dans un nouveau fichier /squelettes/css/perso.css vous pouvez tenter de modifier les valeurs de cette règle :

      #main > .inner > section {
    padding: 5em 0 3em 0;
}

    Répondre à ce message

  • 3
    rcaron

    Je n’ arrive pas...

    Lorsque j’essaie de voir la structure d’une page avec ?var_mode=inclure je n’obtiens rien...

    Exemple : http://actes-de-lecture.org/spip.php?article4?var_mode=inclure

    Mais cela fonctionne sur http://actes-de-lecture.org/?var_mode=inclure

    Ce que je cherche à faire : supprimer la partie « laisser un commentaire » dans la page article...

    Merci de votre aide

    • chankalan

      Bonjour,
      il y a 2 «  ? » dans la première url, il faut remplacer le second par un « & » et ça devrait mieux aller...

    • rcaron

      En effet... C’est logique

      Merci ça marche beaucoup mieux

    • chankalan

      Vous pouvez retirer les forums dans les squelettes, mais vous devriez commencer par ne pas activer les forum sur les articles, sur la page « configuration > forums » par exemple pour le faire sur tous les articles existants... sinon modifier l’option sur chaque page de chaque article.

    Répondre à ce message

  • 1
    rcaron

    Bonjour,

    Bravo, bravo.

    J’essaie de prendre en main ce squelette.
    Un souci que je ne comprends pas : le menu gauche n’est visible qu’en partie. Voir : http://actes-de-lecture.org/spip.php?article2

    Comment faire pour qu’il s’affiche normalement ?

    Un grand merci pour votre réponse !

    Robert

    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