HTML5UP Landed

Published : 28 August 2023 – updated on 27 January 2025 – by tot44 – 3 commentaires

1
2
3
4
5
3 Votes

Squelette SPIP pour intégrer le modèle Landed de HTML5UP
https://html5up.net/landed

Description

Ce squelette distribué en plugin est un portage pour SPIP du thème responsive « Landed », proposé sur le site https://html5up.net/.
Voir la démo originale : https://html5up.net/landed

Sites utilisant le plugin :

Théâtre de rue

J’utilise ce plugin pour présenter et promouvoir des projets artistiques.
L’originalité et le design du squelette se situe sur la page d’accueil (sommaire).

Installation

Le squelette se présente sous la forme de plugin et s’installe donc comme tous les plugins.

Il nécessite le plugin saisies et utilise les plugins palette, menus, sociaux, socicon et centre_image.

Mise à jour après un passage de SPIP 3 à SPIP 4.

Pour s’assurer le bon fonctionnement du jeu de squelette ainsi que des plugins, on pensera à vider le cache après installation.

Configuration

Au préalable activer l’utilisation du descriptif dans un article.

La page de configuration du plugin est accessible dans le menu de l’espace privé sous l’entrée “Squelettes”.

Page d’accueil

Formulaire de configuration du squellette Landed
Formulaire de configuration du squellette Landed 1/2

Pour définir l’article en page d’accueil sélectionner un article dans la liste.
Choisir le numéro d’une image de la bibliothèque pour habiller le fond. On peut définir l’opacité de l’image de fond (de 0 à 1) indépendamment le haut du bas de l’image.
Le titre puis l’introduction de l’article sont affichés sur la page sommaire. Le logo de l’article est retaillé en disque pour illustrer le texte d’accueil ainsi que l’article.

Les autres articles mis en avant sont ceux associés aux mots-clés:

  • intro gauche > positionne l’introduction de l’article associé à gauche
  • intro droite > idem à droite
  • intro dessous > idem en bas

Ces mots-clés sont créés dans le groupe (de mots-clés) HTML5UP Landed à l’activation du plugin. On les ajoute à l’article lors de son édition.

Il est possible d’associer un même mot-clé à plusieurs articles pour qu’ils apparaissent sur la page sommaire avec le même type d’affichage.

Il faut numéroter les articles concernés (01. Titre1, 02. Titre2, ...), ils s’affichent dans l’ordre croissant. Les articles non-numérotés s’affichent en dernier.

L’image de fond de l’encart associé à un article est le logo de l’article [1].
Le texte est l’introduction de chaque article.

On peut utiliser des modèles dans l’introduction d’un article mais les liens sont inactivés pour l’affichage en page sommaire.

Thème

Formulaire de configuration du squellette Landed
Formulaire de configuration du squellette Landed 2/2

La page de configuration permet de choisir les couleurs du thème: bandeau, fond de la rubrique active dans le bandeau, couleur de bordures/formulaires et des liens.

Cocher inclure un fil d’ariane ou non, sur les pages articles et rubriques.

Plugins

Menu

Gestion de la barre de navigation principale avec le plugin Menus, nommer l’identifiant du menu “navbar” sinon on utilise les rubriques du site.

Pied de Page

Gestion des liens de pied de page avec le plugin Menus, nommer l’identifiant du menu “footer”.

Les icônes de réseaux sociaux

Gestion des RSALC (réseaux sociaux à la con) avec les plugins Liens sociaux et Socicon.

Formulaire de contact

Gestion de l’encart/page contact via le plugin Formulaire de contact avancé.

TODO

  • tiles en autogrid / background au survol
  • config pour afficher les listes d’articles/rubriques sous forme de vignettes/listes.

Le site html5up.net propose d’autres thèmes dont certains ont été adaptés pour SPIP. La liste ici....

Vous souhaitez contribuer à la communauté SPIP en portant des thèmes HTML5UP sous forme de plugins, rendez-vous par ici.

Footnotes

[1] Sur la page d’accueil et les pages de rubriques, si le logo (#LOGO) n’existe pas pour article ou la rubrique alors le plugin cherche et choisit le premier document (de l’article...) pour l’illustration.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

2 discussions

  • 1
    AlainF

    Bonjour, je viens de découvrir ce plugin et je souhaiterais l’utiliser pour mon site.
    Je le trouve très sobre et c’est ce que je recherche, bravo pour le travail.

    J’utilise les groupes de mots clés et je suis un peu dans la recherche pour savoir si je dois mettre le mot clé sommaire à tous les articles que je souhaite voir en page d’accueil, puis intro droite ou intro gauche pour les placer sur la page ? Je les ai créés dans un groupe de mots clé qui s’appelle “Mise en page” et ce n’est pas convaincant.

    Si je regarde dans le squelette sommaire du plugin, j’ai :

    <BOUCLE_mots(MOTS){id_article}>
				[(#ID_MOT|=={#CONFIG{html5_landed/id_mot_intro_droite}}|oui) #SET{class,spotlight right} #SET{container, 0} ]
				[(#ID_MOT|=={#CONFIG{html5_landed/id_mot_intro_gauche}}|oui) #SET{class,spotlight left} #SET{container, 0} ]
				[(#ID_MOT|=={#CONFIG{html5_landed/id_mot_intro_dessous}}|oui) #SET{class,spotlight bottom} #SET{container, 0} ]
				</BOUCLE_mots>

    Je ne trouve pas où configurer dans html5_landed ces mots clés ? Merci de m’aider. Par avance, merci, AlainF

    • tot44

      Salut,
      Un groupe de mot-clés HTML5UP Landed est créé à l’activation du plugin avec les mot-clés nécessaires.
      Pour chaque article il faut choisir parmi les mots proposés dans le groupe.
      J’ai précisé dans la doc. c’était flou.
      J’en ai aussi profité pour clarifier l’ordre d’affichage.
      Merci.

    Reply to this message

  • olivier

    Merci pour ce plugin que nous decouvrons.

    Attention, toutes les dependances ne sont pas sur les depots pour spip 4.2 , certaines sont a installer avec ftp ou via “Télécharger un plugin depuis son archive”

    Reply to this message

Add a comment

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom