Bazar

Un squelette pour étaler son bazar sur l’accueil.

Bazar est un squelette HTML5/CSS3 issu du squelette neo-dist (http://zone.spip.org/trac/spip-zone/browser/_core_/plugins/neo-dist) : c’est un choix fait au départ, qui à l’avantage d’intégrer Tinytypo (http://tinytypo.tetue.net/) et de rester simple à prendre en main.

La page d’accueil

L’intérêt de Bazar est de pouvoir paramétrer facilement les informations affichées sur la page d’accueil. Elle fait ressortir de un à cinq articles côte à côte sur autant de lignes qu’on veut.

Voici ce qu’on peut faire (trop) facilement :

  • créer autant de ligne qu’on veut
  • pour chaque ligne, on peut :
    • sélectionner la rubrique dont seront issus les articles. Ils s’affichent par ordre de numéro du titre, sinon par ordre chronologique inversé.
    • choisir le nombre d’articles, de 1 à 5 articles (si plusieurs lignes avec la même rubrique, les articles ne s’affichent pas plusieurs fois, ce sont les suivants qui sont utilisés).
    • le premier document ajouté à un article par ordre chronologique, de format jpg, gif ou png peut être utilisé :
      • sous le titre, comme un logo.
      • en arrière-plan.
    • choisir d’afficher l’introduction
    • choisir la longueur de l’introduction

En activant le plugin Couleur d’Objet (+ choisir d’activer la couleur des articles), on peut aussi choisir une couleur d’arrière-plan, dans ce cas la typographie est colorée par la couleur complémentaire.

CSS3
La propriété « Flexible Box Layout Module » (documentée ici et là aussi) est utilisée pour l’interface de cette page d’accueil.

Les autres pages

SPIP 3.0 et SPIP 3.1

Le squelette marche tout seul avec SPIP 3.1, mais avec SPIP 3.0 il vous faudra :

  • télécharger le squelette « neo-dist »
  • mettre son contenu dans le dossier /squelettes à la racine du site SPIP (le créer si nécessaire)

La philosophie

L’ensemble voudrait être un petit squelette simple à manœuvrer : c’est pour ça que l’idéal est de prendre comme point de départ le squelettes-dist de SPIP 3.1, et de ne pas trop s’en écarter non plus.

Et rien n’empêche de le transformer à sa guise...

Voir une démo : http://bazar.choc02.fr/

Dernière modification de cette page le 13 février 2019

Discussion

10 discussions

  • 6

    Bonjour,

    Merci à chankalan pour ce squelette aussi original que facile à paramétrer, c’est un réel plaisir :)

    J’ai expérimenté un petit souci avec l’assertion selon lequelle on peut « créer autant de ligne qu’on veut ». J’ai l’impression qu’en fait on est limité à... 6 ! Mon site (https://sammyfisherjr.net/blog/) a actuellement 7 rubriques et, si je renseigne (ligne1,ligne2,ligne3... ligne7) dans la page de configuration du Bazar, en mettant strictement la même chose à chaque fois (5 articles sur la ligne, afficher l’introduction), il y aura toujours une « ligne » qui sautera aléatoirement lors de la validation.

    Après avoir désactivé tous les autres plugins non-verroullés, j’en suis venu à la conclusion que le problème était bien inhérent au Bazar et de fait, lorsque je me limite à 6 lignes, tout marche parfaitement.

    Je suppose qu’il y a quelque chose à changer dans le squelette, une ligne qui indique le maximum de « lignes » à afficher sur la page d’accueil ?

    • Bonjour,
      tant mieux si c’est utile :o)
      Pour le nombre de lignes, je ne constate pas, je connais un site qui défini 15 lignes haut la main...

    • Par contre on ne peux pas afficher deux fois le même article... est-ce une indication pour trouver le problème ?

    • Merci pour ta réponse rapide !
      J’y ai réfléchi en mangeant :o) mais pour autant, je ne comprends toujours pas : mes articles appartiennent chacun à une seule rubrique, je n’ai pas fait de bidouillages particuliers, et même les mots-clés sont à peine utilisés (je ne suis même pas certain qu’ils pointent des articles dans des rubriques différentes, c’est dire ! C’était avant tout pour tester)

      Par-contre, je me demande si le problème ne viendrait pas de ma page d’accueil : regarde mon pied de page, il est tout cassé (alors que je n’ai rien fait de particulier). Est-ce que ça ne pourrait pas jouer ?

      C’est d’autant plus rageant que j’ai d’abord testé en local, sur un SPIP qui a subit les pires outrages, et que ça marchait malgré tout parfaitement ^^

    • sammyfisherjr

      J’ai rien dit pour le pied de page, il suffisait de vider le cache de Firefox...

    • En fait non ?! Ce qui varier l’apparence du pied de page (la zone avec mots clés / dernières brèves et nouveautés sur le web) c’est selon si je suis connecté ou pas... Lorsqu’on n’est pas identifié sur le site, on voir la page telle que tu dois la voir si tu y vas ; lorsqu’on est connecté, les différents éléments que je viens de citer sont empilés et non plus côte a côte...

      Je suis en train de faire des test s pour voir si mon problème de lignes (6 ou plus) ne viendrait pas de là également, mais pour le moment je n’en ai pas l’impression.

    • Hum. Ca marche. On va mettre ça sur le dos d’un obscur problème d’interface chaise-clavier.

      Par-contre, j’ai une autre question :D
      Je ne sais pas si j’ai touché quelque chose que je n’aurais pas dû, ou si c’est un plugin (?) ou si c’est inhérent à ce squelette, mais les articles sont classées par ordre alphabétique au sein des rubriques (mais ce sont pourtant bien les plus récent de chaque rubrique qui aparaissent sur la page d’accueil).
      Est-il possible de revenir au classement antéchronologique « classique » au sein des rubriques ?

    Répondre à ce message

  • 1
    Renée Picard

    Merci pour ce squelette. En sommaire,si je veux mettre un lien dans le texte d’introduction, cela casse la présentation. Je ne sais pas quoi changer dans le css ?

    • Bonjour,
      c’est la balise #INTRODUCTION qui doit couper les liens, elle n’est pas censé les préserver.
      Il vaut mieux surcharger la page sommaire.html et mettre une condition suivant l’article, si on peut déjà savoir l’ID de l’article, ici le n°1 , pour remplacer la ligne 48 :

      [(#ID_ARTICLE|=={1}|oui) [<div class="introduction">(#TEXTE})</div>]] ]
      [(#ID_ARTICLE|=={1}|non) [<div class="introduction">(#INTRODUCTION{#GET{couper}})</div>]] ]

    Répondre à ce message

  • 4
    Ysabeau

    Y aurait-il un moyen d’avoir une ligne qui affiche automatiquement les derniers articles du site sur la page d’accueil indépendamment des rubriques ?

    Ce serait formidable.

    C’est vraiment un excellent squelette, encore merci.

    • Bonjour,
      et bien sûr, tout est possible... mais il faut mettre un peu les mains dans le cambouis !
      Il faut surcharger la page sommaire.html en prenant exemple sur le code déjà utilisé, mais faire une boucle qui ira chercher les derniers articles.
      Après ça, je ne sais pas comment vous voyez les choses précisément...

    • Une ligne avec les premiers articles (la description, ou le chapeau ou les x premières caractères) présentés en pavés comme le reste.
      Je me demande comment ça peut s’articuler avec le reste (les lignes « au choix ») en fait.

      J’imagine qu’il faut changer ceci :

              <BOUCLE_article(ARTICLES){id_rubrique=#CONFIG{bazar/rubrique_#VALEUR}}{0,#CONFIG{bazar/nb_#VALEUR}}{par num titre}{!par date}{doublons}>

      En trouvant moyen d’ajouter un genre de « tu me rajoutes les X derniers articles en première ligne » je suppose.

    • En ajoutant une ligne en plus, si on en veut 4 :

      <BOUCLE_derniersarticles(ARTICLES){!par date}{doublons}{0,4}>
      <!-- là il faut récupérer le code html comme pour les autres boucles ou adapter... -->
      </BOUCLE_derniersarticles>
    • Ysabeau

      Merci.

      À suivre dès que j’ai fait les modifications.

    Répondre à ce message

  • 3

    Par contre, il y a un problème d’affichage du portfolio !

    Exemple : http://dutailly.net/refonte-du-site

    C’est le squelette ? Je n’ai pas ce problème avec un site basé uniquement sur la dist.

    Répondre à ce message

  • Je confirme que c’est plutôt simple à configurer et surtout à personnaliser.

    Pour les tuiles de la première page, comme je trouvais que les couleurs c’était un peu délicat à configurer pour avoir un résultat qui ait de l’allure (en plus il faut le faire pour chaque article) et que mon site a surtout du texte et des illustrations du type « capture d’écran » j’ai rajouté une ombre, un code piqué sur le site alsacreations et évidemment personnalisé :

    box-shadow:0px 2px 6px #e1e4f8;

    Si vous voulez voir ce que ça donne.

    Le site rend rend hyper bien sur un petit téléphone, chapeau.

    Un regret, j’aurais bien aimé avoir aussi la barre de recherche sur la page d’accueil, mais bon. Et je ne suis pas assez calée pour l’ajouter moi-même sans tout bousiller :-)

    Un grand merci pour ce plugin qui m’a évité de me casser la tête pour faire pareil en plus de temps et nettement moins bien.

    Sinon, pour ceux que ça intéresse Raphael Goetter a écrit un bouquin sur le sujet : CSS3 Flexbox, éditions Eyrolles (bouquin que je n’ai pas fini d’ailleurs).

    Répondre à ce message

  • 2

    Bravo pour ce bazar, j’aime beaucoup.

    Par contre, mes images de fond posent problème : elles sont parfois sombres, parfois claires, parfois hyper contrastées. Le texte est illisible, et changer la couleur du texte n’est pas une solution.
    A force de chipoter, j’ai vu qu’on pouvait « blanchir » le texte, avec un cliquer-glisser, mais bon, je ne parie pas sur la patience, et le goût pour le chipotage, du visiteur lambda ;)

    J’ai essayé à tâtons de faire disparaître l’image de fond des tuiles quand la souris passe dessus du sommaire avec un

    1. .tile:hover {background-image:none;}

    dans le fichier theme.css
    Bien sur, à chaque tentative infructueuse, je remets les fichiers CSS d’origine.

    Mon petit doigt me dit que tout se joue dans sommaire.html. Un vague souvenir d’ordre de priorités. Si je comprends bien les balises, c’est là que SPIP définit background-image avec

    background-image:url(’(#GETlogo#ID_ARTICLE)’) ;
    1. <a class="tile" style="[(#CONFIG{bazar/bkg_#VALEUR}|=={oui}|oui)[background-image:url('(#GET{logo#ID_ARTICLE})');]][background-color:(#COULEUR);][color:#(#COULEUR|sinon{#ffffff}|couleur_inverser);]" href="#URL_ARTICLE">

    Il doit exister un moyen de faire jouer :hover sur l’affichage, ou encore mieux sur l’opacité de cette image... non ?

    Si l’un.E de vous l’a fait, ou a envie de me filer un coup de main, des fois que certains s’ennuient en cette fin juillet. On ne sait jamais !

    • Pour compléter, j’ai également essayé sans succès d’ajouter une contrainte en CSS dans la partie head de sommaire.html.

    • Au cas où ça intéresse quelqu’un, j’ai trouvé une solution.
      La voici :

      Créer une image blanche et transparente à environ 40% pour servir de « voile »
      L’enregistrer au format .PNG
      La transférer dans le répertoire css/img/

      Créer perso.css dans le répertoire css/ avec la ligne suivante :

      1. .tile:hover .h1, .row .tile:hover .introduction  {background-image: url("img/voile.png"); font: black; opacity: 1.0; }

      Par ici pour visualiser le résultat

    Répondre à ce message

  • ... ou du moins que quelques articles et rubriques comportent une image et un logo ...

    Répondre à ce message

  • Bonjour,

    Votre démo http://bazar.choc02.fr/ est intéressante, cependant il serait utile que chaque article et rubrique comporte une image et un logo afin d’illustrer plus complètement les possibilités et le comportement du squelette Bazar.

    Bien cordialement

    FDG

    Répondre à ce message

  • 1

    Si je comprends bien, comme il est basé sur la dist il est tout à fait multilingue non ?

    Si c’est le cas, il est possible que je l’adopte quelque part.

    Merci.

    • L’inclusion des liens de traductions d’article existe, pas de soucis pour ça.
      Pour le menu de langue je ne l’utilise pas par défaut, mais c’est pas bien difficile de l’ajouter...

    Répondre à ce message

  • 1

    heu... dans le paragraphe « SPIP 3.0 et SPIP 3.1 » le conseil d’installation me semble bizarre...
    Ne vaudrait il pas mieux faire plus classiquement :

    • télécharger le squelette neo-dist
    • mettre son contenu dans le dossier squelettes/ à la racine du SPIP (si nécessaire le créer)

    cette méthode devrait fonctionner à l’identique mais sans avoir à modifier le « noyau » de SPIP (ce qui posera un problème à la première mise à jour...)

    • oui en effet, la formulation pouvait prêter à confusion... il n’est pas question de modifier le noyau de SPIP...
      J’ai reformulé comme tu le proposes, merci !

    Répondre à ce message

Ajouter un commentaire

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

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