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

La VERSION 2 du plugin CIBLOC est configurable depuis l’espace privé de SPIP. Le plugin CIBLOC permet de mettre en forme le texte d’articles avec des blocs, des colonnes, des icônes et des boutons.

IMPORTANT

Si la version 1 de CIBLOC est déjà installée, il est indispensable de lire le paragraphe ‘Migration de la version 1 à la version 2’.
Si le site est sous SPIP 3.0 ou SPIP 3.1, il convient de lire le paragraphe ‘Utilisation sous SPIP 3.0 ou SPIP 3.1’

Les objectifs de ce plugin

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

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

Les listes des blocs, colonnes, ensembles, icônes et boutons sont configurables depuis l’espace privé de SPIP.

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.

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

Vidéo de démonstration

Cliquer ci-dessous pour afficher cette vidéo :
vidéo

Installation

Il nécessite d’installer le plugin CISTYLE, qui est livré avec le plugin CIBLOC version 2.

Remarque : Si le site utilise le plugin CISF, il est nécessaire d’utiliser au moins la version 4 de CISF.

Migration de la version 1 à la version 2

La version 1 de CIBLOC utilisait des fichiers XML de configuration. La version 2 du plugin CIBLOC ne les utilise pas. En effet, la version 2 est configurable depuis l’espace privé de SPIP.
Par ailleurs la version 2 de CIBLOC nécessite d’installer immédiatement le plugin CISTYLE, qui est livré avec.
Remarques :

  • Dans le cas où le site utilise déjà CIBLOC version 1 dans le dossier /plugins/ , après avoir copié CIBLOC version 2 et CISTYLE dans le dossier /plugins/, il est nécessaire d’activer immédiatement le plugin CISTYLE.
    A noter que la page [Configuration] / [Gestion des plugins] affichera le message suivant : “Impossible d’activer le plugin ../plugins/cibloc Nécessite le plugin CISTYLE en version ≥ 1.0.0.”. Il suffit d’activer CISTYLE et SPIP activera alors CIBLOC version 2.
  • Dans le cas où le site utilise déjà CIBLOC version 1 dans le dossier /plugins-dist/ , après avoir copié CIBLOC version 2 et CISTYLE dans le dossier /plugins-dist/, il est nécessaire de déclencher l’activation de ces plugins, par exemple en affichant la page [Configuration] / [Gestion des plugins].

Utilisation sous SPIP 3.0 ou SPIP 3.1

L’utilisation de CIBLOC sous SPIP 3.0 et sous SPIP 3.1 présente plusieurs problèmes qui sont détaillés en annexe de la documentation. Ces problèmes ne se produisent pas sous SPIP 3.2.

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.

Il est possible de choisir l’échelle de l’icône, son alignement et sa couleur.
Exemple d’icône ainsi générée :
<icone|nom=exclamation-triangle|echelle=5|couleur=couleur3|center>

Comment insérer un bouton ?

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 bouton.
c) Cliquer sur le nouveau bouton « Insérer un bouton ».

d) Renseigner le titre et l’adresse du lien puis sélectionner l’alignement et la couleur.

Un plugin configurable

La version 2 du plugin est configurable depuis l’espace privé de SPIP.

Depuis l’espace privé de SPIP, on peut :

  • Configurer les blocs, les multi colonnes, les ensembles de blocs
  • Configurer les boutons, les couleurs des icônes, la liste des icônes, les points divers
  • Créer un nouveau bloc
  • Créer un nouvel ensemble de blocs
  • Choisir une palette de couleurs
  • Configurer le style d’affichage de la liste des blocs
  • Exporter ou importer la configuration

La configuration est facultative. En effet, les blocs disposent d’une configuration par défaut, etc.
Seul un administrateur du site peut configurer le plugin.
Pour le configurer, il convient de se placer dans l’espace privé de SPIP et de cliquer sur le menu [Configuration] / [Configurer les blocs, etc.]

La page ci-dessous s’affiche :

Exemple de choix d’une palette de couleurs :

Exemple de configuration d’une palette personnalisée :

Exemple de configuration d’un bloc :

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

Versions successives du plugin CIBLOC

  • Version 1.* : Version initiale.
  • Version 2 :
    -  Est nettement plus facile à configurer. En effet, elle est configurable depuis l’espace privé de SPIP et elle permet d’exporter, d’importer ou d’imposer une configuration.
    -  Facilite l’ajout d’un bouton.
    -  Ajoute des blocs en couleurs.
    -  Offre au rédacteur le choix entre plusieurs couleurs pour les icônes.
    -  Permet à l’administrateur du site de créer des ensembles de blocs (même si la configuration est imposée), ce qui peut également être utilisé pour des textes types d’article.
    -  Permet d’aligner le texte à gauche, au centre, à droite.
    -  Prend en compte le cas où la variable de SPIP ‘debut_intertitre’ a été personnalisée.
    -  Apporte la compatibilité avec le plugin “Crayons” (sous SPIP 3.1 et SPIP 3.2).
  • Version 2.1 : Prend en compte le cas particulier des sites qui utilisent sjcycle ou Bootstrap ou FontAwesome.

Portfolio

updated on 4 October 2019

Discussion

33 discussions

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

    Reply to this message

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

    Reply to this 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)”.

    Reply to this message

  • BRAVO !

    Reply to this 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

    Reply to this message

  • La version 1.1 du plugin CIBLOC vient de sortir.

    Reply to this message

  • 2
    bernard

    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.

    Reply to this 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]

    Reply to this message

  • 1
    Patrick

    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.

    Reply to this 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 3ème 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

    Reply to this message

Comment on this article

pre-moderation

Warning, your message will only be displayed after it has been checked and approved.

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