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
    Didier

    Bonjour, j’ai mis à jour le plugin ScsscPhp et deux erreurs s’affichent.
    1 SCSS : Echec compilation fichier ie8.scss
    libs/vars file not found for @import : plugins/auto/html5up_editorial/v1.1.16/css/ie8.scss on line 1, at column 0

    2 SCSS : Echec compilation fichier ie9.scss
    libs/vars file not found for @import : plugins/auto/html5up_editorial/v1.1.16/css/ie9.scss on line 1, at column 0

    J’ai installé en local la dernière version de html5 Editorial et c’est identique.

    Par ailleurs et cela n’a rien à voir l’icône de la loupe qui permet de lancer le moteur de recherche ne le lance pas, il fait taper sur la touche « Entrée » pour lancer la recherche.
    Merci pour vos retours.

    • Henry

      Salut
      J’utilise la version 1.1.17 et j’ai le même problème.
      La solution n’est pas dans HTML5SUP mais dans SCSSPHP.
      Le problème se produit avec la version 2.2.3.
      J’ai changé pour la version précédente avec laquelle je travaillais avec SCSSPHP v1.4.10 et le problème a été résolu.
      J’espère que cela fonctionne pour vous.

      Henry

      En español :
      Hola
      Estoy utilizando la version 1.1.17 y tengo tu mismo problema.
      La solución no está en HTML5SUP sino en SCSSPHP.
      El problema se presenta con la version 2.2.3.
      Yo cambié a la versión anterior con la que trabajé 1.4.10 y se solucionó el problema.
      Espero que esto te sirva a ti.

      Henry

    • Didier

      Bonjour,
      Merci, effectivement je viens de tester en local en mettant la version 1.9.2 de SCSS PHP, les erreurs n’apparaissent plus. J’ai vu que vous aviez posté le problème sur le plugin SCSS PHP, en espérant que cela sera corrigé prochainement.

    Répondre à ce message

  • 5
    rcaron

    Bonjour,

    Bravo pour ce squelette...

    Sur le site actes-de-lecture.org, j’ai un problème que je n’arrive pas à résoudre. Il s’agit du menu de gauche.
    Les revues apparaissent par année inverse (ça c’est bon)
    Mais dans la rubrique « Thèmes », l’ordre alphabétique est là aussi inverse. Or je la voudrais normal.
    Quel fichier modifier et comment ?

    Un grand merci

    Robert

    • JLuc

      Pour savoir quel fichier modifier, ajoute ?var_mode=inclure ou &var_mode=inclure à l’url de la page

    • chankalan

      Bonjour,
      j’imagine que c’est la même boucle qui va trier en sens inverse, par date ou par titre de la même manière.
      Quelle sont les critères de cette boucle ? Celle d’origine ou vous l’avez déjà modifiée ?

    • rcaron

      Merci,

      sidemenu.html :

      [(#REM)
	Barre de navigation, ouverte sur la hierarchie courante

	On fait un plan, et, quand on avance vers une rubrique,
	on l'affiche si son parent est expose ou est la racine du site. ]
<B_rubriques>
<nav id="menu">
	<header class="major">
		<h2>Menu</h2>
	</header>
	
	<ul>
		<li><a class="accueil" href="#URL_SITE_SPIP"><:accueil_site:></a></li>


                <BOUCLE_rubriques(RUBRIQUES){par titre}{inverse}{racine}{id_rubrique!=1}>
		[(#REM) si plus d'un article, la liste des articles, si au moins une sous-rubrique, la liste des sous-rubriques ]
			#SET{smenu#ID_RUBRIQUE,non}

			<BOUCLE_test_rubriques(RUBRIQUES){par titre}{id_parent}{0,1}>
			</BOUCLE_test_rubriques>#SET{smenu#ID_RUBRIQUE,oui}</B_test_rubriques>
			
		<li>
			[(#GET{smenu#ID_RUBRIQUE}|=={oui}|non)
			<a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a>]
			[(#GET{smenu#ID_RUBRIQUE}|=={oui}|oui)
			<span class="opener[ (#EXPOSE) active]">#TITRE</span>
			<ul>

				<INCLURE{fond=inclure/sidemenu-rubriques,env,id_rubrique,rubrique_on} />
			</ul>]
		</li>
		</BOUCLE_rubriques>
	
	</ul>
	
</nav>
</B_rubriques>

      et side-rubriques.html :

      <BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
<BOUCLE_srubriques(RUBRIQUES){id_parent}{par titre}{inverse}>


	<li>
		<a href="#URL_RUBRIQUE"[(#EXPOSE|ou{#ENV{rubrique_on}|=={#ID_RUBRIQUE}}|oui) class="on"]>#TITRE</a>
		<ul>

			<INCLURE{fond=inclure/sidemenu-rubriques,env,id_rubrique,rubrique_on} />
		</ul>
	</li>
</BOUCLE_srubriques>
</BOUCLE_rubrique>

      Je ne sais pas comment faire...

    • chankalan

      Bonsoir,
      c’est bien la même boucle qui sert aux deux cas, et le plus simple est peut-être de mettre un numéro dans le titre des rubriques que vous voulez trier dans le sens inverse.
      Il y a le plugin Numérotation rapide qui peut vous aider : https://plugins.spip.net/numero.html?compatible_spip=3.2
      Comme le tri est en sens inverse, le dernier numéro sera en premier dans la liste...

    • rcaron

      Oui, merci. Réglé avec numérotation.

      Merci

      Robert

    Répondre à ce message

  • 4
    Frédérique

    Bonjour,

    depuis aujourd’hui , derrière l’icône « bars » appelant le sidemenu, le terme « toggle » apparaît sous chrome (pas les autres navigateurs...) Je ne vois pas quoi faire. Auriez vous une idée ?

    cette erreur apparaît aussi sur d’autres sites que le mien aviron-melun.com utilisant ce squelette.

    Merci de votre éclairage !

    • Frédérique

      Je me réponds, Je viens de trouver, j’ai modifié le js. En espérant que ça tienne la route. Merci !

    • rcaron

      Et comment avez-vous fait ?

      Merci

      Robert

    • Frédérique

      dans le plugin
      plugins/auto/html5up_editorial/v1.1.14/javascript/main.js

      j’ai remplacé la ligne 107 par :

      $('<a href="#sidebar" class="toggle"></a>')
    • rcaron

      Ben, chez moi, ça ne marche pas... (actes-de-lecture.org)

      Robert

    Répondre à ce message

  • 7
    Michel Gofman

    Bonjour
    Je suis en train d’installer le gabarit Editorial par migration d’un site « classique ».
    J’ai des soucis d’affichage d’images notamment d’icônes d’articles pour le moment.
    Je relie çà avec le plugin Medias, qui apparemment refuse de s’activer. Idem pour Archiviste qui semble nécessaire.
    A chaque essai j’ai un message du genre « la désactivation n’a pas marché ; l’activation a marché » mais les plugins sont toujours classés Inactifs.
    Y aurait il des incompatibilités avec d’autres plugins
    Un peu d’aide svp.
    Merci d’avance
    MG
    site :mgdevelop.eu

    • Michel Gofman

      Bip ? Pas de réponse ?

    • guilaind

      En tant qu’utilisateur Spip depuis des années, je règle un problème d’activation de plugin en supprimant les plugins récalcitrants par l’interface de gestion des plugins sinon en ftp, puis en les téléchargeant/activant à nouveau.

      Si ça ne marche pas, je désactive tous les plugins et réactive un par un jusqu’à ce que je trouve l’incompatibilité. D’où l’intérêt d’un environnement de test différent de la version en cours.

    • Michel Gofman

      Merci Guilaind pour la méthode très pragmatique.
      J’avais espéré que qqn avait eu le pb avant moi. Comme plugins je n’avais avant de charger Edition est les plugins nécessaires (en dernière version) que Couteau suisse er Crayons. La désactivation de Couteau n’a rien changé. J’ai aussi Mediabox, mais la désactivation n’a rien fait non plus.
      Je suis en SPIP 327 avec php 72. tous les plugins sont à jour.
      Je n’ai pas été fouiller dans les logs.
      A vot’ bon cœur. Bonne année
      Michel

    • Michel Gofman

      Bonjour
      En m’inspirant du conseil de Guilaind, j’ai réussi à activer tous les plugins en particulier Archiviste et Medias. Voici comment.
      J’ai désactivé Editorial, puis j’ai été en FTP dans l’arborescence à plugins-dist/, et j’ai supprimé les répertoires Medias et Archiviste. Puis j’ai activé les trois plugins et avec quelques messages çà a marché.
      Je suis maintenant en train de terminer la mise en place de mon site et j’ai plus d’images qui s’affichent. Mais ce que fait le plugin Medias reste un mystère pour moi..
      Merci
      Michel

    • chankalan

      Bonjour,
      il faut peut-être vérifier la version de PHP qui est utilisée sur l’hébergement : ouvrez la page /ecrire/ ?page=info pour le savoir.
      Sinon vous ne devriez pas supprimer des plugins du dossier plugins-dist sans savoir ce que vous faites... Médias gère tous les documents, c’est la médiathèque de votre site, et Archiviste gère les fichier zip et autres compressions, il est utilisé par d’autres plugins...

    • Michel Gofman

      Merci Chankalan pour ces conseils.

      Le site est hébergé chez OVH et c’est du PHP 7.2 (7.3 pour les nouveaux hébergements).

      Sabrer à la sauvage en ftp dans les plugins n’est pas effectivement une préconisation de base pour débutant. J’ai mis pas mal de temps à m’y résoudre et encore avec précaution. Çà a marché ... Je suppose que, quand la première installation a raté, pour les fois suivantes il y a un souci de droits sur les répertoires. Pourtant les messages étaient bons.

      Bon çà marche à 90%. http://www.michelgofman.fr et c’est très beau sur tous les terminaux ! Merci.

      Il me reste cependant 2 questions ;
      1. concernant Fontawesome : ils m’ont fait m’inscrire, créer un kit et donné un script à mettre .... quelque part. Pourtant çà marche. Que dois-je faire ? Ignorer ?
      2. pour l’article « hero de gauche » j’ai presque ce que je veux. Mais la balise « <articleXXX », après le logo me fabrique un texte .... avec le titre répété, alors que la suite du descriptif s’affiche. Il n’y a pas de champ « resume ». Y a t’il quelque-part une documentation de référence sur ces balises ?

      Salutations à tous, bonne année 2020.
      Michel

    • guilaind

      Euh.... je n’ai pas la sensation d’avoir suggéré de désactiver des plugins en dist !!!

      Certes je n’ai pas apporté la précision, néanmoins elle est présente partout dans les docs : on ne peut « jouer » qu’avec les plugins personnalisés, pas avec les plugins de base du PMS.

    Répondre à ce message

  • Ludovic

    Bonjour,

    J’aime beaucoup la version SPIP de ce modèle Editorial.
    Je n’avais pas fait de mise à jour depuis 1 an et je viens enfin de passer à la dernière version (1.1.16).
    Depuis, la lecture des articles sur mon PC (pas sur smartphone) manque de « netteté » : comme si la police de caractères était un peu compressée en largeur. Ce n’était pas le cas avant cette mise à jour.
    Avez-vous une piste pour revenir à un bon affichage ?

    Merci,
    Ludovic

    Répondre à ce message

  • Nebelman

    Bonjour,
    Lorsque la fenêtre est suffisamment large pour que la colonne de menu à gauche soit affichée par défaut, et pas suffisamment haute pour afficher la totalité des deux parties (menu gauche et partie principale), il n’y a alors pas d’ascenseur pour pouvoir remonter dans la colonne du menu sans toucher à l’autre partie. Je ne sais pas si c’est volontaire mais comme cet ascenseur existe lorsque la colonne de gauche est affichée volontairement dans un contexte étroit (où elle est masquée par défaut), et qu’il s’affiche alors uniquement lorsque la fenêtre n’est pas assez haute pour le contenu, ce qui est parfait, il me plairait d’avoir le même comportement en contexte plus large.
    D’où ma question : comment faire pour obtenir un ascenseur dédié à la colonne de gauche en contexte large (quand elle est affichée par défaut) dès que la hauteur de la fenêtre ne permet pas d’en afficher toute la hauteur ?

    Répondre à ce message

  • lucTech

    Dans ma lancée... j’ai rendu le nombre de colonnes d’affichage d’un article configurable. Je préfère 1). 2 reste le défaut. V1.1.16.

    Répondre à ce message

  • rcaron

    Bonjour,

    Encore moi !

    Sur le site actes-de-lecture.org je mets en ligne une revue pédagogique.

    J’ai une rubrique « Par numéro » et une autre, que j’aimerais faire « Par thème ».

    J’utilise le plugin « Polyhierarchie » mais je n’arrive pas à afficher les articles classés dans les thèmes. Quel fichier modifier ?

    Merci de votre aide.

    Robert

    Répondre à ce message

  • 3
    rcaron

    Problème !

    http://actes-de-lecture.org/spip.php?article140

    Le menu de gauche se replie. En descendant dans l’article à la hauteur de l’image, il y a une superposition de l’article et du menu.

    D’où ça vient ? Que faire ?

    Merci, merci

    Robert

    • chankalan

      Bonjour,
      il y a des caractères qui apparaissent tout en haut de la page, est-ce qu’il peut y avoir une surcharge avec une erreur ? un caractère manquant ou en trop ?

    • DD

      Bonsoir, je crois que c’est du à \n qui est inséré en trop dans le head de bigfoot ou bien éditorial, je ne sais plus. Est-ce que tes plugins sont à jour ?

    • rcaron

      Désactivé plugin HTML5 et du coup le \n disparaît.

      Pour le reste des balises couteau-suisse mal fermées. Apparemment tout est rentré dans l’ordre.

      Merci à vous

    Répondre à ce message

  • 1
    rcaron

    J’ai essayé de définir dans la configuration du squelette un « article majeur »... Pour voir.

    Mais je n’arrive pas à vider ou annuler ce choix ; Comment faire ?

    Merci

    Robert

    • chankalan

      Bonjour,
      oui, c’est pas très très ergonomique mais c’est signalé et ce sera prochainement amélioré, et donc pour retirer un article il faut en choisir un à nouveau pour voir la petite croix rouge qui permet de le retirer de la sélection...

    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