cibloc : mettre en forme le texte d’articles avec des blocs

Le plugin CIBLOC permet de mettre en forme le texte d’articles avec des blocs. Il offre des blocs, des colonnes, des icônes et des boutons.

Les objectifs de ce plugin

Le plugin CIBLOC offre des blocs, des colonnes, des icônes et des boutons :

  • 10 blocs
  • 8 multi colonnes
  • 12 ensembles de blocs et/ou colonnes prêts à l’emploi
  • 186 icônes
  • 5 boutons

Les listes des blocs, colonnes, ensembles, icônes et boutons peuvent être enrichies (ou rétrécies) via un autre plugin.

Les blocs et les colonnes sont "responsives".

Les fonctionnalités sont détaillées dans le document de description du plugin CIBLOC ci-joint au format PDF.

Il ne nécessite pas d’installer d’autres plugins.

Exemples de blocs et/colonnes proposés par le plugin CIBLOC

Vidéo de démonstration

Cliquer sur le logo ci-dessous pour afficher cette vidéo :

Vidéo de démonstration du plugin CIBLOC

Comment insérer un bloc et/ou des colonnes ?

a) Aller dans la page qui permet de modifier le texte de l’article.
b) Cliquer à l’endroit du texte où l’on veut insérer le bloc.
c) Cliquer sur le nouveau bouton « Choisir un bloc ».

d) Une liste s’affiche. Faire défiler verticalement la liste pour voir les blocs proposés.
e) Cliquer sur le bloc souhaité.

f) Afficher l’article sur le site public (en prévisualisation s’il n’est pas publié).

g) Modifier le texte de l’article afin de remplacer le texte fictif du bloc par votre texte.

Liste des blocs

Liste des multi colonnes

Liste des ensembles de blocs et/ou multi colonnes

Ces ensembles de blocs sont des combinaisons prêtes à l’emploi de blocs et/ou de colonnes. Il suffit de cliquer sur l’un des ensembles pour l’insérer dans le texte de l’article.

Liste des ensembles qui sont presque des pages

Les ensembles suivants constituent presque des pages prêtes à l’emploi.Il suffit de cliquer sur l’une des combinaisons pour l’insérer dans le texte de l’article.Une fois insérée, il est bien sûr possible de supprimer une partie de la combinaison, d’ajouter d’autres blocs, etc.

Comment insérer une icône ?

a) Aller dans la page qui permet de modifier le texte de l’article.
b) Cliquer à l’endroit du texte où l’on veut insérer l’icône.
c) Cliquer sur le nouveau bouton « Choisir une icône ».

d) Dans la liste qui s’affiche, cliquer sur une icône pour l’insérer dans le texte
Cette liste comprend une sélection de 186 icônes (FontAwesome) triées par signification ou forme.

L’icône est insérée avec la syntaxe : <icone|nom=...|echelle=2>
Il est possible de modifier l’échelle de l’icône (de 1 à 5).

Un plugin extensible

Le plugin CIBLOC dispose de trois listes :

  • La liste des blocs, des colonnes et des ensembles
  • La liste des icônes
  • La liste des boutons

Via le dossier "squelettes" (ou bien via un autre plugin) il est possible de :

  • Ajouter des blocs, des multi colonnes, des ensembles à la liste
  • Retirer des blocs, des multi colonnes, des ensembles de la liste
  • Ajouter ou retirer des icônes
  • Ajouter ou retirer des boutons
  • Donner un style différent à des blocs de la liste, aux icônes, à des boutons

Par exemple, on peut ajouter un "bloc bleu" et supprimer le "bloc gris" :

Pour en savoir plus, consulter le document de description du plugin CIBLOC ci-joint au format PDF.

Versions successives du plugin CIBLOC

  • Version 1.1 : Evite que la balise INTRODUCTION de SPIP laisse une balise de bloc non fermée en coupant le texte. Dans l’espace privé, évite d’agrandir, pour certains blocs, la flèche qui symbolise le retour à la ligne. Légère amélioration cosmétique des multi colonnes "sans marge", etc.
  • Version 1.2 :
    Evite de devoir vider le cache du site, après avoir activé le plugin, afin de voir les nouveaux boutons (ajoutés par le plugin) dans la barre d’outil du texte des articles.
    Dans le cas d’un article qui contient des blocs accordéon, il est désormais possible de :
    a) Copier l’adresse de l’un des items d’un bloc accordéon (via un clic droit / copier l’adresse du lien)
    b) Coller cette adresse dans un courriel ou bien l’insérer dans un autre article. Exemple : adresse_du_site/titre_de_la_page#accordeon-1-3
    c) Lorsque l’on clique sur cette adresse, l’article s’affiche et l’item du bloc accordéon est automatiquement déplié.
  • Version 1.3 :
    Elle apporte la compatibilité avec :
    -  un saut de ligne simple (un seul retour « touche entrée »)
    -  le plugin Formidable
    -  le plugin Pdf.js
    Elle ajoute des traductions en anglais, en allemand et en espagnol.
    Une adresse du type adresse_du_site/titre_de_la_page#accordeon-1-3 permettait déjà de déplier automatiquement l’item du bloc accordéon. Désormais, elle permet, en plus, de scroller la page jusqu’à cet item.
    Le mécanisme de purge sélective du cache, lors de l’activation d’une nouvelle version du plugin, est désormais compatible avec n’importe quelle évolution du plugin.

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

Discussion

22 discussions

  • 7

    Bonjour, bien que vous indiquiez que votre plugin fonctionne avec un spip 3.0, j’ai le regret de vous informer qu’il ne fonctionne pas du tout sur un site en 3.0.17 [21515]. Je ne vois pas du tout d’icône carrée dans la barre d’outils des textes d’articles ... Dommage ! Il a l’air très bien.

    • Si l’icône n’apparaît pas dans la barre d’outils du texte de l’article, il convient de suivre la procédure suivante :

      a) S’assurer que la barre d’outil est bien celle de SPIP. En effet, le plugin CIBLOC fonctionne avec la barre d’outils de SPIP (et pas avec celle du plugin ckeditor par exemple).

      b) Vérifier que le plugin CIBLOC est bien activé.

      c) Vider le cache de SPIP. En effet, la barre d’outils de SPIP est mise en cache.

      d) Contourner le cache du navigateur en faisant CTRL + F5 dans la page de modification de l’article.

    • La version 1.2 du plugin CIBLOC (du 20/11/2018) évite de devoir vider le cache du site, après avoir activé le plugin, afin de voir les nouveaux boutons (ajoutés par le plugin) dans la barre d’outil du texte des articles.

    • Bonjour,

      J’ai également le problème,

      • je n’utilises pas ckeditor.
      • j’ai spip 3.0.19
      • mediabox de base en 0.8.11 default
      • cibloc 1.3.0

      Et toujours pas de boutons visible.
      Mais je n’ai pas vidé tout le cache… car ça risquerait de mettre le site un peu à plat…

      J’ai essayé d’activer/ désactiver… Je sèche un peu… je continue de voir…
      Si vous avez des idées ! merci !

    • La barre d’outils de SPIP est mise en cache. Pour éviter de vider tout le cache de SPIP, on peut supprimer manuellement le contenu du dossier /local/cache-js/

      Il convient ensuite de contourner le cache du navigateur en faisant CTRL + F5 dans la page de modification de l’article.

    • Merci pour l’info… le problème ne dois venir de là alors.

      J’ai même vidé le cache local/css… vider le cache du nav (que je n’ai jamais d’ailleurs avec un plugin pour celui-ci d’ailleurs).

      Toujours pas d’icône malheureusement.

    • OK, c’était une incompatibilité porte plume partout en 1.0.6…

      J’essaie de monter la version…

    • Il s’agit du dossier /local/cache-js/ c’est-à-dire celui qui contient des fichiers javascript (*.js).

    Répondre à ce message

  • 4

    Bonjour,

    Comment peut-on contribuer à la traduction du plugin ? C’est sur un dépôt git ?

    Répondre à ce message

  • 2

    Bonjour,
    Je suis très heureux ou presque de pouvoir utiliser ce plugin parce qu’il semble y avoir une incompatibilité avec pdf.js.

    En effet, tous les pdf incrusté dans mes articles pour être directement lus s’affichent désormais sur tous les articles du site avec une hauteur fixe très petite empêchant de voir l’intégralité du document.
     : Un exemple ici

    Quand je désactive CIBLOC tout revient à la normal mais quelle catastrophe pour le bel article publié avec CIBLOC. Pensez-vous pouvoir résoudre ce problème ?
    J’ai bien essayé d’indiquer une hauteur de mon choix au PDF, mais rien ne change...

    En vous remerciant par avance :)

    • Pour éviter ce problème, il convient de supprimer les lignes suivantes dans le fichier cibloc/_config_cibloc/_css/cibloc.css :

      .spip_documents {
        max-width: 100% !important;
        height: auto;
      }
    • La nouvelle version 1.3 du plugin CIBLOC apporte la compatibilité avec le plugin Pdf.js

    Répondre à ce message

  • 3

    Bonjour,
    Encore 1000 mercis pour ce formidable outil.
    Deux petits retours utilisateur :

    1 - pb de redimensionnement
    J’ai rencontre un souci lors du redimensionnement d’une page contenant un formulaire « formidable » selon que celui-ci est inséré dans un bloc multi_colonnes ou un bloc multi_colonnes_sans-marge (voir copie d’écran).
    J’ai corrigé en modifiant la feuille de style (patch sur la copie d’écran). Je ne sais pas si ce patch est le meilleur possible mais il marche. Par contre, il présente peut-être des effets de bord indésirables...


    2 - crayons
    Si on configure les crayons pour que la barre d’outils soit présente, la fenêtre popup permettant de choisir les blocs est toute embrouillée.
    On peut corriger le problème en recopiant dans perso.css les déclarations /*========== cibloc : cibloc_popin_blocs (ne pas modifier) ==============*/ présentes dans cibloc_modal.css
    Je ne sais pas trop où ça se tient, mais est-ce que ça ne serait pas intéressant de faire les modifications pour que l’affichage via les crayons soit propre « out of box » ?

    Encore 1000 mercis (10 000, même !) pour ce chouette outil

    • 1- Redimensionnement du formulaire

      Pour contourner le problème, il convient d’ajouter dans la CSS les lignes suivantes (et non pas recopier celles relatives aux colonnes sans marges) :

      @media (max-width: 959px) {
          .cimulti_colonnes div[class^='col-sm-'] {
              width: 100%;        
          }
      }

      2 - crayons
      La question a déjà été posée et j’ai déjà répondu :
      https://contrib.spip.net/cibloc-mettre-en-forme-le-texte-d-articles-avec-des?debut_comments-list=@497714#comment497714

    • OK pour -1
      Pour crayons, j’avais vu la réponse. Mais je ne sais pas très bien comment la comprendre... Les crayons sont très répandus (et sacrément commodes) et c’est dommage que les blocs ciblocs soient si mal présentés dans la boîte modale à cause d’une petite question de css, non ?
      (mais peut-être n’ai-je pas bien compris)

    • La nouvelle version 1.3 du plugin CIBLOC apporte la compatibilité avec le plugin Formidable.

    Répondre à ce message

  • 10

    Saut de ligne non pris en compte ?
    Dans un article, j’ai inséré un bloc 50% / 50%.
    Les sauts de paragraphe (2 retours « touche entrée ») sont OK mis les sauts de ligne (1 retour « touche entrée ») ne sont pas pris en compte (voir copie d’écran jointe)
    Est-ce qu’il y a quelque chose que je fais mal ou est-ce un bug ?

    SPIP 3.2.1 + dernière version cibloc

    • En laissant une ligne vide entre la balise de début du bloc et le début du texte, est-ce que le problème se produit ?

    • Ah, effectivement avec une ligne vide après [colonne50], les sauts de ligne sont bien respectés

    • La prochaine version du plugin CIBLOC apportera une solution à ce problème.

    • Pouvez vous m’indiquer si le patch ci-joint règle le problème :
      patch

    • Ah, alors c’est super !
       ;-)))

    • Ah, les messages se sont croisés : le « Ah, super » concernait le fait d’un patch à venir.
      Le patch proposé ne résout pas le dysfonctionnement observé ;-((

    • Après avoir copié le fichier du patch (au bon endroit), il est indispensable de vider le cache de SPIP.

    • C’est OK avec ce patch.


      Le cache de SPIP a des fonctionnements qui restent parfais un peu mystérieux : j’avais testé le patch en faisant un « recalcul » de la page. Pourquoi cela n’a-t-il pas donné le même résultat qu’après avoir vidé le cache ? Je pensais que ces deux manip’s étaient équivalentes (au détail près, bien sûr, que le recalcul n’affecte que la page en cours)

    • Cette nouvelle version du patch évite un effet de bord :
      patch

    • La nouvelle version 1.3 du plugin CIBLOC apporte la compatibilité avec un saut de ligne simple (un seul retour « touche entrée »).

    Répondre à ce message

  • Bonjour,
    Merci encore une fois pour ce chouette plugin.
    Je suis en train de monter les premières bases d’un site et je tombe toutefois sur un os : intégré dans un site qui s’appuie sur l’utilisation de foundation, les blocs menu accordéon ne fonctionnent pas (= tout le texte est visible et il n’y a pas d’effet de pliage/dépliage)
    C’est visible ici http://new.desarticule.fr/spip.php?article7
    (je peux donner un accès privé si vous le souhaitez)

    Une incompatibilité entre les js ? Autre chose ? Quelque chose que je fais mal ?

    Répondre à ce message

  • 2

    Bonjour,
    Une question me taraude en examinant les fichiers du plugin CIBLOC (extrêmement utile et qui m’a permis d’apprendre le css par ailleurs ! )
    A quoi sert le fichier monitoring_cibloc ?
    Merci.
    Cordialement
    « Naema »

    • Le fichier monitoring_cibloc permet de connaître deux nombres :
      -  le nombre d’articles qui ont au moins un bloc
      -  le nombre de rubriques qui ont au moins un bloc

    • Entendu, merci. Cordialement

    Répondre à ce message

  • 1

    Bonjour. Il est où ? Je ne le trouve pas sur la zone… ni ailleurs

    • Le fichier ZIP contenant le plugin CIBLOC figure deux fois dans la présente page :
      -  En haut de la colonne de droite (« Téléchargements »)
      -  Juste avant les commentaires (« Documents joints »)

    Répondre à ce message

  • 3

    Bonjour,

    Merci pour ce plugin intuitif.

    J’ai 2 questions concernant le bloc accordeon dépliable :

    1/ est-ce qu’il est possible de déplier par défault une autre zone (H2) que la première ?

    2/ autre question : J’ai fait des ancres classique sur chaque H2 et je voudrais pouvoir déplier chaque ancre en ajoutant un code. Exemple à partir d’une page A, je voudrais faire un lien vers la page B (qui contient le bloc accordeon) et grâce au lien ouvrir le 3e accordéon.

     :)

    • Le bloc accordéon (avec un seul item déplié à la fois) déplie par défaut le premier item.
      Les blocs accordéon ne tiennent pas compte des ancres.

      Via le dossier « squelettes » (ou bien via un autre plugin) il est possible de surcharger le fichier cibloc/_config_cibloc/_js/cibloc.js qui contient les scripts pour les blocs accordéon.

      Remarque : Le titre de chaque item est un intertitre au sens SPIP, donc un H3.

    • Merci pour la réponse

      Remarque : effectivement H3. :)

    • La version du plugin CIBLOC du 28/11/2018, comprend une évolution des blocs accordéon. Dans le cas d’un article qui contient des blocs accordéon, il est désormais possible de :
      a) Copier l’adresse de l’un des items d’un bloc accordéon (via un clic droit / copier l’adresse du lien)
      b) Coller cette adresse dans un courriel ou bien l’insérer dans un autre article. Exemple : adresse_du_site/titre_de_la_page#accordeon-1-3
      c) Lorsque l’on clique sur cette adresse, l’article s’affiche et l’item du bloc accordéon est automatiquement déplié.

    Répondre à ce message

  • 1
    Bernard D

    J’ai bien noté l’utilisation « L’ensemble de blocs 2 » qui ne réponds pas à ma question.
    Il s’agit d’une Image flottante suivie de endfloat dans la même colonne.

    Un exemple :
    http://bernard.dutheil1.free.fr/index.php

    Cordialement
    Bernard

    • SPIP permet d’avoir une image flottante à gauche ou à droite (avec les raccourcis <img...|left> <img...|right> ).

    Répondre à ce message

Ajouter un commentaire

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

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