SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 130 visiteurs en ce moment

Accueil > Squelettes > Squelettes spéciaux > ÉDITORIAL (HTML5UP) > Éditorial (HTML5UP)

Éditorial (HTML5UP)

27 novembre 2017 – par chankalan – 112 commentaires

22 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 http://fontawesome.io/icons/)
  • |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>

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.

Voir en ligne : https://plugins.spip.net/html5up_ed...

Dernière modification de cette page le 5 septembre 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 5 novembre à 22:17, par RP En réponse à : Éditorial (HTML5UP)

    Comment on fait pour désigner un article comme héro ?

    Répondre à ce message

  • Le 17 février à 18:00, par gus En réponse à : Éditorial (HTML5UP)

    Bonjour,
    Merci pour ce plugin. J’ai 2 questions pour lesquelles je n’ai pas trouvé de réponse.
    Est-il possible de ne pas faire apparaître le titre des articles dans le menu latéral gauche, mais uniquement les rubriques et sous-rubriques ?
    Où peut-on définir le nombre d’articles visibles sur la page d’accueil ?
    D’avance merci.

    Répondre à ce message

  • Le 26 octobre à 15:36, par BARRET En réponse à : Éditorial (HTML5UP)

    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.

    Répondre à ce message

  • Le 23 octobre à 11:37, par BARRET En réponse à : Éditorial (HTML5UP)

    Bonjour,
    J’essaye d’adapter un ancien site spip avec ce thème et si presque l’ensemble du site fonctionne, bien que je doive faire des ajustements, j’ai un message d’erreur, notamment sur la page d’accueil et celle des résultats de recherches. Je pense qu’il s’agit du même problème.
    Pour le visiteur cela se traduit par une erreur 404.
    Site www.maximaphiles-francais.org
    Spip 3.2.1
    Version plugin 1.1.8
    En fichier joint les messages d’erreur
    Merci pour votre aide.

    • Le 23 octobre à 12:22, par BARRET En réponse à : Éditorial (HTML5UP)

      OOOps
      Désolé ! Le problème est résolu.
      J’avais pas activé le plugin API de VERIFICATION
      Vous pouvez supprimer mon post qui fait un peu bazar.

    Répondre à ce message

  • Le 9 octobre à 16:53, par David En réponse à : Éditorial (HTML5UP)

    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

    1. <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

    • Le 9 octobre à 17:16, par chankalan En réponse à : Éditorial (HTML5UP)

      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

    • Le 9 octobre à 17:51, par David En réponse à : Éditorial (HTML5UP)

      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

    • Le 9 octobre à 21:32, par chankalan En réponse à : Éditorial (HTML5UP)

      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 ?

    • Le 10 octobre à 05:56, par David En réponse à : Éditorial (HTML5UP)

      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 :

      1. aa
      2.  
      3. <https://youtu.be/W0cCUOyYs8s>
      4.  
      5. bb

      Télécharger

      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 :

      1. <p>aa                                    Lecture                                           Titre  by Auteur https://youtu.be/W0cCUOyYs8s    
      2.  
      3. bb</p>

      Télécharger

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

      1. <p>aa</p>
      2. <figure class='spip_documents spip_documents_center ressource oembed oembed_video oembed_youtube'>
      3. ...
      4. <figcaption>
      5. ...
      6. </figcaption>
      7. </figure>
      8. <p>bb</p>

      Télécharger

    • Le 10 octobre à 06:37, par David En réponse à : Éditorial (HTML5UP)

      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 :

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

      par

      1.         [<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...

    • Le 10 octobre à 08:36, par chankalan En réponse à : Éditorial (HTML5UP)

      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 ?

    • Le 10 octobre à 08:49, par David En réponse à : Éditorial (HTML5UP)

      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

  • Le 26 août à 09:07, par Jean Paul Aubel En réponse à : Éditorial (HTML5UP)

    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

  • Le 24 juillet à 20:56, par metaldark En réponse à : Éditorial (HTML5UP)

    Bonjour,
    J’ai une erreur 404 (cad la page 404 qui s’affiche) lorsque je clique sur le logo du site ou dans la barre d’outil à gauche sur accueil.
    Je pense qu’il manque un fichier dans le plugin comme par exemple sommaire.html.
    Ou bien alors j’ai mal configuré ce qui peut être le cas.
    Merci d’avance pour aide.
    Je suis en spip 3.2

    • Le 24 juillet à 21:01, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      il faut peut-être vérifier que le plugin est entier et correctement téléchargé ?
      https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/sommaire.html
      Sinon, est-ce identique avec et sans plugins ?

    • Le 26 juillet à 10:13, par metaldark En réponse à : Éditorial (HTML5UP)

      Bonjour,
      Merci pour votre réponse.
      J’ai réinstaller mon spip de test, et tout est rentré dans l’ordre.
      Ce plugin est très intéressant, et j’aimerai le personnalisé pour l’adapter à nos besoins.
      Je souhaiterais par exemple agrandir l’affichage du logo spip et ajouter après le nom du site une image pour faire une bannière.
      Dans quelle partie du squelette, je dois procéder à ces modifications.
      Merci d’avance.

    • Le 26 juillet à 11:16, par chankalan En réponse à : Éditorial (HTML5UP)

      ce devrait être par là :
      https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/header/dist.html
      à surcharger dans le dossier squelettes du site...

    • Le 31 juillet à 00:15, par Metaldark En réponse à : Éditorial (HTML5UP)

      Bonjour,
      merci pour toutes ces informations, j’avance dans ma personnalisation.
      Il me manque une information : dans quel fichier est géré la taille du logo de mon site ? Il est toujours réduit par rapport à l’original. Je souhaiterais pouvoir personnaliser cette réduction de taille.
      merci pour votre aide.

    • Le 3 septembre à 17:40, par Fred En réponse à : Éditorial (HTML5UP)

      Bonjour, l’affichage du logo du site est dans le header_dist.html

      Il faut modifier les infos de la ligne 2 en jouant sur les chiffres

      Quelqu’un a t’il réussi à intégrer un agenda dans ce plug-in ?

    Répondre à ce message

  • Le 25 août à 09:59, par Jean Paul Aubel En réponse à : Éditorial (HTML5UP)

    vraiment TB ce plugin bravo bien trouvé

    Répondre à ce message

  • Le 3 août à 11:12, par Fred En réponse à : Éditorial (HTML5UP)

    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

  • Le 7 juillet à 12:06, par pamillet En réponse à : Éditorial (HTML5UP)

    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

    • Le 7 juillet à 20:20, par chankalan En réponse à : Éditorial (HTML5UP)

      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 ...

    • Le 9 juillet à 22:12, par pamillet En réponse à : Éditorial (HTML5UP)

      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

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Facteur

    21 janvier 2010 – 420 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Zpip et la création rapide de pages

    23 mars 2010 – 38 commentaires

    Le modèle de squelettes Zpip est organisé pour faciliter et accélérer le développement d’un site. Deux fonctionnalités particulières permettent la création rapide de pages types dans votre squelette, en un minimum de développement. Organisation de (...)

  • Plugin SEO

    6 août 2009 – 255 commentaires

    SEO est un plugin qui ajoute la possibilité d’insérer manuellement où vous le souhaitez ou de manière automatique dans la partie de votre site web : meta tags, URL canonique, Google webmaster tools Meta Code et Google Analytics javascript. Il est (...)

  • GIS 4

    11 août 2012 – 1526 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • ScolaSPIP 4

    19 janvier 2016 – 383 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)