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

  • 2
    Frédérique

    Bonjour,

    merci pour ce squelette.
    Je cherche à harmoniser la page de connexion à l’espace privé avec le reste, mais ai du mal. quelqu’un a-t-il une piste ?
    Merci de votre aide.

    Répondre à ce message

  • 6
    rcaron

    Je ne comprends pas...

    Pourquoi à l’adresse http://actes-de-lecture.org/spip.php?article33 le menu de gauche n’est pas totalement visible ?

    Merci

    Répondre à ce message

  • 4
    jeanmarie

    Salut,

    merci pour le portage de ce thème, c’est important qu’on puisse avoir des thèmes prêt-à-l’emploi !

    On dirait que la police utilisée pour la titraille est Roboto (sans sérif) alors que celle du thème original (et le nom font-face dans le _font.scss) est Roboto Slab (sérif).
    C’est voulu ?

    Répondre à ce message

  • 2
    rcaron

    Je cherche à élargir le titre des documents joints qui est actuellement fixé à 120px. Où dois-je modifier ?

    Merci

    • chankalan

      Bonjour,
      Je ne sais pas si je comprends bien : est-ce lors de l’inclusion d’un document dans un texte ?
      Si c’est le cas, ça vient du modèle utilisé pour afficher le document.
      Il faut donc chercher dans le dossier plugins-dist/medias/modeles puis surcharger le fichier que vous utilisez.

      Si j’ai mal compris merci de préciser.

    • rcaron

      Superbe, parfait... C’est cela !

      Merci

    Répondre à ce message

  • Philippe Robin

    bonjour

    pour info, l’appel des icones https://fontawesome.com/v4.7.0/icons/ est perturbé par l’activation du plugin article PDF

    voili voilou ...

    Répondre à ce message

  • 2
    THomas

    Bonjour,

    Tout d’abord, merci pour ce thème très bien fait. Il me permet de monter un site web simple et épuré.

    Je souhaite modifier le menu pour exclure l’affichage et donc les liens vers certaines rubriques.

    Pour le faire facilement j’aurais bien utilisé le plugin menus1 mais cela ne fonctionne pas ou je ne sais pas comment m’y prendre :).
    J’ai bien compris que pour mon besoin, tout se passe dans le fichier « sidemenu.html » du dossier inclure.
    Pouvez vous m’aider, cela fait 2 jours que j’essaie sans trouver de solution, certainement un manque de connaissances.

    • chankalan

      Bonsoir,
      Dans une booucle de rubriques, on peut exclure certains résultats en ajoutant {id_rubrique !IN 1,2,3} par exemple pour exclure les rubriques 1,2 et 3...

    • THomas

      Parfait ! Excellent ! Un GRAND Merci ! :D

    Répondre à ce message

  • 1
    RP

    Pour faire des sous-rubriques en espace public j’ai mis [(#FORMULAIRE_EDITER_RUBRIQUE{oui, #ID_RUBRIQUE, [(#SELF|parametre_url{id_rubrique, #ID_RUBRIQUE})]})] et pour faire afficher la sous-rubrique j’ai mis <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent}{tout} {par num titre}{!par date}> jusque la tout va bien.
    Maintenant si je clique sur le lien de la nouvelle rubrique que je viens de créer, j’obtiens une erreur 404 puisqu’il n’y a pas encore d’articles de créer. Pour palier à cela j’ai mis dans head/rubriques <BOUCLE_rubrique_head(RUBRIQUES) {id_rubrique}{tout}> mais cela ne fonctionne pas. Il y a toujours une erreur 404. Que puis-je faire ?

    • chankalan

      Bonjour,
      je vous conseille de poster cette question sur la liste SPIP, vous aurez beaucoup plus de chance d’avoir une réponse, ou même plusieurs...
      Mais donc c’est possible, à condition de changer l’action du formulaire, pour faire en sorte de donner un statut « publie » à la rubrique dès sa création. Cela se passera dans la fonction traiter du formulaire. Pour ne pas polluer la création générique des rubriques, il faudra certainement dupliquer le formulaire, les deux fichiers html et php, pour le renommer par exemple editer_rubrique_publique, et renommer à l’intérieur les fonctions aussi.... on peut continuer la discussion sur la liste SPIP si vous voulez : https://listes.rezo.net/mailman/listinfo/spip

    Répondre à ce message

  • 3
    Benji

    Bonjour,
    Ce squelette utilise le filtre adaptive_image. Est-il donc nécessaire d’installer le plugin adaptive_image ? Je pose la question parce que pour ma part je préfèrerai utiliser « insertion avancée d’images » qui offre des effets très sympas.... est-ce qu’il y a une incompatibilité ?
    Merci de votre réponse

    • chankalan

      Bonjour,
      je ne sais vraiment pas si les deux plugins Adaptive Images et Insertion avancée d’images sont incompatibles, il faut essayer pour voir... mais le premier n’est pas obligatoire, donc il n’y a pas de raison...

    • Benji

      Bonjour !
      Je reviens faire un petit point sur l’utilisation d’insertion avancées d’images. En gros ça fonctionne, Il ne semble pas y avoir d’incompatibilité majeure. L’alignement d’images et le diaporama qui sont deux fonctionnalités très intéressantes malheureusement ne donnent pas le résultat espéré. Je pense que c’est lié au plugin « insertion avancées d’images » lui-même.
      Par contre, j’ai un message d’erreur « filtre adaptive_image non défini » qui surgit dans mes pages comportant des images. Pour le désactiver j’ai dû retirer le filtre adaptive_image des squelettes article.html et rubrique.html, ce qui n’est pas normal. Je ne comprends pas d’où vient le problème.
      Si quelqu’un a une piste... cela m’ennuie de trafiquer les squelettes de base du plugin.

    • chankalan

      Bonsoir, dans z-core le filtre adaptive_image est présent sans servir à grand chose sinon rendre le plugin adaptive_image efficace dès son activation, sans avoir besoin de modifier les squelettes. Dans Editorial on déclare le plugin z-core nécessaire, on peut donc utiliser le filtre, qui ne devrait pas causer d’erreur.
      C’est juste que si on active adaptive_image (le plugin), alors on bénéficie de ses avantages sans avoir à toucher au code, puisque le filtre est déjà dans le squelette.
      On devrait avoir intérêt à laisser tel que.

      Est-ce que tous les plugins sont bien à jour ?

    Répondre à ce message

  • 5
    pamillet

    merci de ce squelette qui m’a permis de faire rapidement un site simple et beau..

    mais je voudrais afficher une page « rubrique » et bizarrement, elle n’affiche que le dernier article de la rubrique... qui en contient pourtant 2...

    et essayant de comprendre le squlette, je butte sur html5up_editorial/v1.1.8/breadcrumb/dist.html dont je ne comprends pas le code...

    [(#ENV{id_rubrique}|oui)#SET{objet,rubrique}#SET{id_objet,#ENV{id_rubrique}}]
[(#ENV{id_syndic}|oui)#SET{objet,site}#SET{id_objet,#ENV{id_syndic}}]
[(#ENV{id_breve}|oui)#SET{objet,breve}#SET{id_objet,#ENV{id_breve}}]
[(#ENV{id_article}|oui)#SET{objet,article}#SET{id_objet,#ENV{id_article}}]
[(#ENV{id_objet}|oui)#SET{objet,#ENV{objet}}#SET{id_objet,#ENV{id_objet}}]

    je me dis que si j’ai une rubrique et un article dans #ENV, je me retrouve toujours avec l’article comme id_objet... ce qui explique ce que je constate...

    a quoi peut bien servir cette succession de test qui finiront toujours pas mettre un article dans id_objet ???

    et pour en revenir au besoin, existe-t-il une page html5editorial prévue pour afficher une rubrique, sous forme de liste article comme dans la page sommaire...

    merci d’avance...
    pam

    • chankalan

      Bonjour,
      tous ces tests servent à inclure un fichier avec les bons paramètres pour chaque situation. Mais au final c’est un seul fichier qu’on peut modifier pour modifier toutes les situations, où il est donc utilisé avec des paramètres différents.

      Le squelette qui s’occupe du contenu de la page rubrique est bien prévu : https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/rubrique.html?order=name
      C’est surtout parce qu’on peut y accéder par le fil d’ariane ou par le plan du site, mais le modèle de site n’est pas vraiment prévu pour y passer. Il vaut mieux utiliser le plugin court-circuit en complément pour ne pas passer du tout par la page rubrique, et rediriger sur le premier article directement.
      Sinon il faut modifier un peu le menu pour que la rubrique soit la page obligée, en supprimant l’effet d’ouverture/fermeture de la liste des articles.

      à choisir ...

    • pamillet

      merci de ta réponse,
      donc, s’il y a dans #ENV un article identifié, alors on ressort toujours avec l’affichage d’un article. L’ordre d’écriture des tests à son importance, car si par exemple, on a à la fois une rubrique et une brève dans #ENV, compte tenu que le test sur la brève est après, c’est lui qui va initialiser l’objet et donc faire appel à breadcrumb/inc-objet avec comme paramètre la brève... ai-je bien compris ?

      Ensuite, je n’utilise pas court-circuit mais mon souhait n’est pas d’afficher le premier article, mais au contraire de montrer un ensemble d’article comme dans content/sommaire.html après l’article hero, ou on voit un certain nombre d’article (nombre paramétré dans la config).. il me semble que la page rubrique devrait faire à peu près ça ?

      Enfin ta remarque sur l’effet d’ouverture/fermeture concerne le sidemenu... mais je ne vois pas le lien entre le choix dans le side menu et l’affichage dans la partie principale... Est-il possible quand on clique sur une rubrique ouverte du sidemenu, que son contenu liste d’articles et éventuellement de rubriques soit affiché dans la partie principale..?

      pam

    • Phyness

      Bonjour Pam,

      As tu trouvé une solution ?
      Ca m’intéresse également pour le faire.

      J’aimerai afficher les sous-rubrique puis les articles lorsque l’on clique sur n’importe quelle rubrique

      Merci

      Le site en construction : http://www.libairterre.fr

    • pamillet

      désolé, mais pas vraiment
      et comme mon site avait un but défini et limité dans le temps... je n’ai pas cherché plus

      http://manifestecommuniste2018.fr

      pam

    • chankalan

      Bonsoir,
      en relisant la question, il me semble que la réponse est dans ce fil, pour arriver à modifier un peu le menu pour ne pas afficher les articles et passer par la page rubrique : https://contrib.spip.net/Editorial-HTML5UP-4947#comment499693-498579

    Répondre à ce message

  • 2
    BARRET

    Bonjour,
    J’ai un gros problème avec le menu que je n’arrive pas à adapter. J’ai bien lu qu’il fallait modifier sidemenu.html et sidemenu-rubrique.html mais je ne m’en sors pas.
    Il s’agit du site www.maximaphiles francais.org
    Je souhaite que les articles n’apparaissent pas dans le menu. En effet, j’ai une rubrique blog avec plein d’articles et cela fait un peu fouillis tous ces articles dans le menu.
    Par ailleurs, si je clique sur une rubrique principale (par exemple BLOG) j’aimerai avoir ma page principale qui s’affiche comme lorsque je clique sur une sous-rubrique.
    Y a-t-il une personne pour me montrer les modifs à faire pour adapter ce menu ?
    Merci beaucoup.

    • Phyness

      Bonjour,
      Je cherche à faire la même chose.
      J’ai pu enlever les articles.
      Me reste à rendre le clic actif sur les rubriques pour afficher les articles de la rubrique

    • chankalan

      Bonjour,
      je vous propose de modifier le menu en excluant la rubrique que vous voulez du déroulement normal.
      Elle contient des articles mais on veut aller à la page rubrique qui présente les articles, et ne pas avoir les articles dans la colonne du menu. Il faut surcharger le fichier inclure/sidemenu.html et ajouter à la ligne 22 :
      [(#ID_RUBRIQUE|=={1}|oui)#SET{smenu#ID_RUBRIQUE,non}]
      Là il faut remplacer le 1 par l’identifiant de la rubrique en question.

    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