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 22 mars 2019

Discussion

22 discussions

  • 2
    Bernard D

    Bonjour,
    Super plugin, merci !

    Pour aller plus loin (si c’est possible) :
    Définir la largeur d’une image (en %) et sa position pour habiller un texte dans le même bloc.

    • Le plugin est extensible. Pour en savoir plus, consulter le document de description du plugin CIBLOC qui figure dans la présente page (au format PDF) .

    • Il est possible de mettre un multicolonnes dans un bloc. « L’ensemble de blocs 2 » illustre cette possibilité.

    Répondre à ce message

  • 1

    Bonjour,
    merci pour ce plugin
    est-il possible de l’utiliser avec le plugin ckeditor
    Bruno

    • Le plugin CIBLOC fonctionne avec le plugin « porte plume » (livré avec SPIP).
      Dans la page (sur contrib.spip.net) du plugin ckeditor, il est indiqué « Ce plugin remplace l’éditeur par défaut de spip (en particulier le porte-plume disparaît) ».

    Répondre à ce message

  • BRAVO !

    Répondre à ce message

  • 1

    Bonjour,
    super plugin, efficace et simple d’emploi.
    j’ai tout de même deux interrogations,
    1) je n’ai pas réussi à l’installer en auto, même avec le préfixe et pas référencé sur plugins.spip.net. Y a une astuce pour éviter une installation en non auto ?
    2) Y a t-il moyen de changer la couleur des icônes ?

    Pour info, il existe une version plus récente fontawesome 5.3 : https://fontawesome.com/
    cordialement

    • Bonjour,
      1) C’est normal. Il ne s’installe pas en auto.
      2) Le chapitre 7.4 « Comment personnaliser les trois listes et les styles ? » de la documentation indique comment modifier les styles. La couleur des icônes est donnée par la classe « fa » des balises « i », soit i.fa{...}.
      Cordialement

    Répondre à ce message

  • La version 1.1 du plugin CIBLOC vient de sortir.

    Répondre à ce message

  • 2

    Bravo pour ce travail... n’y aurait il pas un problème dans la compatibilité ? C’est marqué 3.0 et 3.2, mais pas 3.1 ? Une erreur, un oubli ou un vrai problème de compatibilité...?
    Ca tombe justement mal, car mon site est en 3.1 :))

    • Le plugin CIBLOC a été testé une fois sous SPIP 3.0 et une seconde fois sous SPIP 3.2. Il n’a pas été testé sous SPIP 3.1.

    • Le plugin CIBLOC est compatible avec SPIP 3.1. En effet, les tests que je viens d’effectuer sur CIBLOC, sous SPIP 3.1, se sont déroulés sans problème.

    Répondre à ce message

  • 1

    J’ai constaté un petit problème avec les balises <multi>.
    Quand on ajoute un nouveau modèle de colonnes et que l’on enregistre l’article, il vide le contenu de celui-ci.

    • Je n’arrive pas à reproduire le problème.
      J’ai créé un article avec le texte ci-dessous et il s’affiche sans problème :

      [multi_colonnes]
      [colonne_50]
      <multi>[fr]en français[en]in english</multi>
      [/colonne_50]
      [colonne_50]
      <multi>[fr]en français[en]in english</multi>
      [/colonne_50]
      [/multi_colonnes]

    Répondre à ce message

  • 1

    Bonjour et bravo pour ce plugin,
    Son utilisation en local est des plus facile.
    Petit soucis avec le plugin « les crayons » en public, la barre d’outil s’affiche et peut être activée, la fenêtre « cibloc » s’ouvre mais reste inaccessible sous celle des crayons.
    En privé pas de problème.
    Enfin les possibilités d’organiser les pages sont si importantes qu’il me semblera difficile à un administrateur de freiner l’ardeur de ses rédacteurs lorsqu’ils seront nombreux (du vécu).
    Peut être la raison du plugin à fabriquer soi même ?
    Encore bravo et merci.

    • Bonjour,
      L’incompatibilité avec le plugin « les crayons » ne me surprend pas. En effet, j’ai réalisé une nouvelle version du plugin CISF « Saisie facile » (dont je suis l’auteur) afin de le rendre compatible avec le plugin CIBLOC.

      Par ailleurs, comme l’indique la documentation, il est possible de rétrécir (ou d’enrichir) la liste des blocs.

    Répondre à ce message

  • 2
    christian voillemont

    bonjour,
    merci pour ce fantastique plugin.
    je l’ai essayé et il est parfait pour faire des mises en page élaborées facilement.

    seul petit soucis, comment récupérer des images de ma médiathèque pour mettre dans les blocs ?

    salutations

    • Bonjour,
      La vidéo jointe à cet article montre comment mettre ses propres images dans un bloc (à partir de la 3e minute de la vidéo).

    • christian voillemont

      Merci ! je n’avais pas vu la vidéo.
      C est vraiment le plugin qu’il manquait à spip !
      Merci pour ton formidable travail

    Répondre à ce message

  • BRAVO !!!!

    c’est une contribution fantastique qui va permettre je l’espere de redonner un peu de force a SPIP qui est vraiment en retrait du cote des plugins de mise en forme.

    J’adore, et je vais de suite le tester ;)

    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