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

  • 1
    philippeJ

    Bonjour à tous,

    Lorsqu’une rubrique contient un logo, le lien associé à ce logo dans la liste des résumés de rubrique me semble incorrect. Il renvoie vers une page 404 lors du clic sur ce logo.

    J’ai modifié dans le fichier
    html5up_editorial/v1.2.2/inclure/resume/rubrique.html

    La ligne
    -       <a href="#URL_ARTICLE" class="image">[(#LOGO_RUBRIQUE|html5up_image_reduire{416,256})]</a>

    Par la ligne
    +       <a href="#URL_RUBRIQUE" class="image">[(#LOGO_RUBRIQUE|html5up_image_reduire{416,256})]</a>

    Vous confirmez ou j’ai mal compris la structure de la rubrique. ?

    Cordialement

    Répondre à ce message

  • rcaron

    De l’aide ?

    Site d’une revue pédagogique : actes-de-lecture.org.

    Publication de 4 numéros par an.

    Je souhaite lorsque l’on clique sur une année avoir :
    -  d’abord la liste des sous-rubriques (les numéros de la revue) avec logo et introduction
    -  Puis les articles par dates inverses décroissantes. (ça c’est bon.)

    squelette de rubrique.tml :

    <BOUCLE_rubrique(RUBRIQUES){id_rubrique}{par date}{inverse}>
<section>
	<header class="main">
		[<h1 class="#EDIT{titre}">(#TITRE)</h1>]
	</header>
	[<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>]
	[<div class="notes">(#NOTES)</div>]
	<INCLURE{fond=inclure/documents,id_rubrique,ajax,env} />
</section>
<section>[(#REM) grader la section ici pour eviter de la mettre dans une div ajaxee -> perte de la mise en forme]
	<INCLURE{fond=inclure/liste/articles,branche id_rubrique,ajax,env,parpage=6} />
</section>
</BOUCLE_rubrique>

    Squelette de inclure/liste/rubriques.html :

    <B_rubriques>
             #ANCRE_PAGINATION
             [<header class="major">
             <h2>(#ENV{titre,Par numéro...})</h2>
             </header>]
                       <div class="posts">
                       <BOUCLE_rubriques(RUBRIQUES){id_parent=#ID_RUBRIQUE}
                       {pagination #ENV{par page,10}}>
                       <BOUCLE_sous_rubriques(RUBRIQUES){par titre}{inverse} {id_parent} >
                       <INCLURE{fond=inclure/resume/rubrique,id_rubrique,env} />
                        </BOUCLE_sous_rubriques>
                        [<p class="pagination">(#PAGINATION)</p>]
                       </BOUCLE_rubriques>
                       </div>
</B_rubriques>

    Et devinez ? Je n’y arrive pas.

    Merci de votre aide.

    Robert

    Répondre à ce message

  • 7
    rcaron

    Nouveau problème ?

    Ma page rubrique n’apparaît pas en 2 colonnes et je ne comprends pas. Voir : http://actes-de-lecture.org/spip.php?rubrique67

    Merci à vous

    Robert

    • chankalan

      Bonjour,
      les 2 colonnes sont bien présentes au-delà de 768px de largeur d’écran...
      Vous auriez des précisions ?

    • rcaron

      Ben non. Je viens juste de créer cette rubrique. Avec toutes les autres, aucun problème. Je ne comprends pas.

    • rcaron

      J’ai ce problème sous Chrome mais pas sous Firefox....

    • chankalan

      En effet, je vois bien les 2 colonnes mais pour certaines largeurs le paramètre ne s’applique pas, et c’est uniquement sur cette rubrique. Les colonnes disparaissent puis reviennent puis disparaissent... bizarre...
      Est-ce que le contenu est rédigé différemment des autres rubriques ?

    • rcaron

      Non pas différent des autres
      J’ai essayé en créant une nouvelle rubrique. Même problème

    • chankalan

      En mettant une image dans le texte comme pour les autres rubriques, le problème n’apparaît plus. Vous pourriez tester de votre côté ?

    • rcaron

      Oui, c’est exact !

      D’où ça peut venir ?

      Merci

    Répondre à ce message

  • 21
    rcaron

    Bonjour,

    D’un seul coup, apparition sur la page article publique :

    1 	SCSS : Echec compilation fichier ie8.scss
<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+bGlicy92YXJzPC9jb2RlPg=="></span> file not found for @import: plugins/auto/html5up_editorial/v1.1.17/css/ie8.scss on line 1, at column 0	   /  	   /  	
2 	SCSS : Echec compilation fichier ie9.scss
<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+bGlicy92YXJzPC9jb2RlPg=="></span> file not found for @import: plugins/auto/html5up_editorial/v1.1.17/css/ie9.scss on line 1, at column 0

    Que faire ?

    Version plugin : 1.1.17
    Version spip : SPIP 3.2.7 [24473]

    Merci

    Robert

    • chankalan

      Bonjour,
      c’est peut-être dû aux mises à jour du plugin scssphp.
      Est-ce que le message disparaît en vidant totalement le cache du site ?

    • chankalan

      Ah non, j’ai trouvé le problème. En même temps je mets à jour le plugin en v1.2.2, qui nécessite le plugin Tri par rubrique pour faciliter l’organisation du site.
      cf https://git.spip.net/spip-contrib-squelettes/html5up_editorial/src/tag/v1.2.2

    • rcaron

      Super ! Merci. ça marche

    • Nebelman

      Bonjour,
      J’ai le même problème à la suite de la mise jour de scss php (Version 2.4.4, spip 3.2.7).
      Mais la mise à jour de Edito faite aujourd’hui est sans effet. La version indiquée est 1.1.17. Je vois que vous parlez d’une 1.2.2 mais ça n’a pas l’air de se mettre à jour avec plugin auto. Y a-t-il une action supplémentaire à effectuer ?

    • chankalan

      Bonjour,
      il faut peut-être supprimer le dépôt de plugins et le remettre pour réinitialiser la liste, la v1.2.2 est bien la bonne...

    • Maïeul

      oui mais la 1.2.2 est marqué comme en test alors que la 1.1.17 est stable, donc peut être que ca coince à ce niveau dans svp

    • Nebelman

      Bonjour,
      Merci pour vos réponses,.. Mais je n’ai pas réussi. Dans Ajouter des plugins, onglet Dépôts j’ai supprimé puis ajouté le dépôt mais ça n’a rien donné, La 1.2.2 n’était toujours pas proposée en mise à jour. Comme je suis un peu pressé j’ai supprimé puis réinstallé le plugin, cette fois c’est la bonne version, mais évidemment cela m’a fait perdre tous les réglages... donc à éviter si possible.

    • chankalan

      Bonjour,
      oui, l’état est encore en test, je pensais pas à ça... mais justement j’aimerais quelques retours d’utilisateurs sur les derniers changements.
      Si vous me dites que tout marche bien, je pourrai passer le plugin en état stable...
      Merci !

    • Nebelman

      Pour ma part j’ai des anomalies (warning) dans l’espace privé liées au plugin « Tri des articles par rubrique ». Ce n’est pas un problème de compatibilité car je ne peux pas utiliser Tri, même lorsqu’il est le seul actif. Donc le moindre mal pour l’instant est de revenir à la 1.1.17 qui n’exige pas le plugin « Tri ». Y a-t-il d’autres personnes qui ont ce problème ?

    • rcaron

      Oui, moi aussi, bon nombre de « Warning » !

      Robert

    • chankalan

      Je vous remercie de m’aider à vous aider en me donnant quelques précisions sur ces warnings...
      De mon côté je viens tester sur un SPIP 3.2.7 avec tous les plugins à jour, et je ne trouve aucun warnings que ce soit en PHP 7.2 ou 7.3
      Pour SPIP 3.3-dev ça fonctionne très bien aussi sur PHP 7.3
      Merci de bien tester en vidant le cache, manuellement s’il le faut en supprimant /tmp/cache et tout ce qui est dans /local/...

    • Nebelman

      Voici ce qui est indiqué :

      Warning : in_array() expects parameter 2 to be array, null given in D :\Travaux\Atlas24\dordogne\ecrire\public\composer.php(92) : eval()’d code on line 31

      ...suivi par « Call stack » et pas mal de lignes.

      Il s’agit d’un serveur local, sur un serveur distant où la mise à jour en 1.2.2 n’a pas été tentée, le plugin Tri par rubrique ne pose pas de problèmes.

    • rcaron

      De mon côté :

      Warning : in_array() expects parameter 2 to be array, null given in ecrire/public/composer.php(92) : eval()’d code on line 31

      Warning : in_array() expects parameter 2 to be array, null given in ecrire/public/composer.php(92) : eval()’d code on line 31

      Warning : in_array() expects parameter 2 to be array, null given in ecrire/public/composer.php(92) : eval()’d code on line 31

    • chankalan

      Et quelle est votre version de SPIP et celle de PHP ?

    • Nebelman

      Spip 3.2.7, mais php 5.6.16 (Serveur local pas mis à jour depuis longtemps, je sens arriver les reproches...)

    • chankalan

      Ça dépend peut-être du serveur de production, des fois on peut pas faire autrement... mais dans l’idéal ils devraient tous être mis à jour, avec php 7.2 ou 7.3...

    • rcaron

      Comment résoudre le problème des Warnings suivants (j’ai déjà vidé tout le dossier tmp)

      Warning : in_array() expects parameter 2 to be array, null given in ...cache/skel/html_88a2b6f83b245b75c18258878786504b.php on line 306

      Warning : in_array() expects parameter 2 to be array, null given in ...cache/skel/html_88a2b6f83b245b75c18258878786504b.php on line 306

      Warning : in_array() expects parameter 2 to be array, null given in ...cache/skel/html_88a2b6f83b245b75c18258878786504b.php on line 306

      Warning : in_array() expects parameter 2 to be array, null given in ...cache/skel/html_88a2b6f83b245b75c18258878786504b.php on line 306

      Warning : in_array() expects parameter 2 to be array, null given in ...cache/skel/html_88a2b6f83b245b75c18258878786504b.php on line 306

      Warning : in_array() expects parameter 2 to be array, null given in ...cache/skel/html_88a2b6f83b245b75c18258878786504b.php on line 306

      PHP 7.3.16
      Spip SPIP 3.2.7 [24473]

      Que faire ?

      Merci

    • chankalan

      Bonjour,
      ces notices sont corrigées petit à petit, elles apparaissent suivant les versions de PHP, mais ne gênent pas outre mesure l’utilisation de SPIP. En gros pour l’instant, en commentant la ligne « define(’SPIP_ERREUR_REPORT’,E_ALL) ; » dans mes_options.php, on voit pas les notices...
      Ce sera corrigé dans SPIP, et ça ne concerne pas les plugins.
      Est-ce que vous avez un problème de fonctionnement des plugins ?

    • Maïeul

      Ce que je t’avais du reste expliqué Robert par email lorsque tu avais posé la question sur la liste.

      Tu avais retrouvé le fichier en question. En l’analysant il apparaît que c’est clairement un fichier du plugin tri_par_rubrique. Je vais de ce pas signaler cela sur le gestionnaire de ticket du plugin en question.

    • chankalan

      J’ai pas tout vu alors... désolé...

    • chankalan

      Bonjour,
      est-ce que les notices sont toujours affichées ?
      De mon côté je n’ai pas pu identifier le problème...

    Répondre à ce message

  • 2
    rcaron

    Problème article « héro »

    Je n’arrive pas à le faire fonctionner... Exemple : actes-de-lecture.org, l’article mis en « héros » s’affiche presque complètement et ne prend pas en compte le texte du « descriptif ».

    Qu’est-ce que je fais mal ?

    Merci

    Robert

    Répondre à ce message

  • 1
    lucTech

    Bonjour,
    Je viens de commiter (V 1.1.15) la prise en compte des mots clés. Avec possibilité de configuration de la navigation du menu gauche sur les mots à la place des rubriques.
    Ca vous va comme cela ?
    Luc

    • chankalan

      Bonjour,
      merci pour le partage de ces modifs.
      De mon côté j’ai ajouté le choix du tri des articles dans les rubriques avec le plugin Tri par rubrique qui est maintenant nécessité. Est-ce que tu pourrais tester pour me confirmer que l’usage des mots-clefs est toujours correct. Il faudrait prendre la version ici : https://git.spip.net/spip-contrib-squelettes/html5up_editorial

      Merci !

    Répondre à ce message

  • nuages

    Bonjour,

    Je souhaiterais avoir un renseignement.

    J’utilise des logo en format SVG (en utilisant le plugin Logo SVG),

    Ces derniers apparaissent bien dans l’espace privé.

    Mais ils n’apparaissent pas sur l’espace public.

    Y a t il un réglage spécifique pour le permettre ?

    Répondre à ce message

  • 4
    nuages

    Bonjour,

    J’ai une difficulté avec le plugin Pages unique et je me demande s’il n’est pas lié au squeletteHTML5UP Éditorial

    L’installation de ce plugin se déroule normalement.

    Mais, quand je veux créer une page unique, j’obtiens le message d’erreur suivant :

    Message :
    Erreur SQL 1054
    Unknown column ’page’ in ’field list’
    SELECT page FROM spip_articles WHERE id_article=0

    Squelette :
    /home/xxxx/www/plugins/pages/pages_pipelines.php

    Boucle :
    pages_affiche_hierarchie() sql_getfetsel() ;

    Ligne :
    310

    Quelqu’un serait-il en mesure de m’aider ?

    • chankalan

      Bonjour,
      il faut obligatoirement qu’’une rubrique existe avant de créer un article, même si c’est une page unique... cf la doc de page unique.

    • nuages

      Merci pour votre réponse, mais je ne suis pas sur de bien la comprendre. Mon site comporte bien des rubriques, et même plusieurs.

      Par ailleurs, je m’aperçois que d’autres erreurs apparaissent concernant :

      boucle : pages_boite_infos() sql_getfetsel() ; / ligne : 281

      boucle : pages_affiche_milieu_identifiant() sql_getfetsel() ; / ligne 83

      Toujours avec le même message d’erreur

    • chankalan

      Alors ce n’est pas ce que je pensais en premier. Sans les plugins est-ce que c’est encore le cas ? Les mêmes erreurs ?

    • nuages

      Merci pour cette suggestion. Effectivement le problème ne vient pas du squelette HTML5UP Éditorial puisqu’il existe même quand je désactive ce plugin et même quand je désactive tous les plugin à part Pages.

    Répondre à ce message

  • lebardix

    Bonjour,

    merci pour ce portage pour un modèle Editorial, j’ai du , comme Didier, revenir à une version antérieure de SCSSPHP (1.9.2) sous peine de rencontrer des erreurs de compilation.
    cependant je désire vous poser la question suivante :
    -  je n’arrive pas à accéder au rubrique de 1er niveau depuis le menu latéral
    (le menu latéral se développe bien, mais la page de la rubrique ne s’affiche pas, il reste la dernière page ouverte)
    tandis que les rubriques de niveau inférieur s’ouvrent (le menu latéral se développe bien, et la
    page de la rubrique s’affiche)
    par exemple sur le site (http://www.mgdevelop.eu/)
    -  un clic sur le menu latéral « Magazine, Reflexions,... » développe le menu avec ses sous-rubriques, mais l’affichage reste sur la page d’accueil
    -  un clic sur le menu latéral « Notes stratégie » ouvre la page de la rubrique (le menu étant déjà développé il n’y a pas de changement)

    Donc mes questions :
    -  est-ce le fonctionnement normal ?
    -  peut-on y apporter une correction ? c’est à dire au clic -> développer le menu ET ouvrir la page de la RUBRIQUE

    merci

    Répondre à ce message

  • 2
    Henry

    Bonjour
    Quelqu’un pourrait-il expliquer la fonction :

    #LOGO_ARTICLE_RUBRIQUE| html5up_image_reduire 416,256

    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