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

Published : 8 July 2019 – updated on 24 June 2025 – by Equipement – 171 commentaires

1
2
3
4
5
92 Votes

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.

Compatibilité

La compatibilité avec les versions de SPIP figure dans la colonne de droite de la présente page.

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 figure également dans la colonne de droite de la présente page, dans la section "Autres téléchargements).

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.
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.
  • Version du 02/11/2020 : CISTYLE (livré avec CIBLOC) passe en version 1.1.
  • Version 2.2 : Apporte la compatibilité avec PHP 7.2, 7.3, 7.4 et avec SPIP 4.0.
  • Version 2.3 : Apporte la compatibilité avec PHP 8.0 et 8.1 et avec SPIP 4.1
  • Version 2.3.1 : Contourne des incompatibilités avec l’ancien PHP 5.4.
  • Version 2.4 : Apporte la compatibilité avec SPIP 4.2.
  • Version 2.5 : Apporte la compatibilité avec PHP 8.2.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

61 discussions

  • 3
    Michel Suquet

    Bonjour,

    je viens de voir que le plugin Cibloc a une mise à jour, de 2.5.1 vers 2.6.0, et elle s’effectue sans problème via le site en Spip. Cependant, ce plugin nécessite l’installation du plugin Cistyle dont je vois qu’il y a une nouvelle version (mise à jour de 2.2.0 à 2.3.0). Pourquoi ce plugin n’est pas lui aussi mis à jour automatiquement ?

    Cordialement

    • Equipement

      Bonjour,

      Je viens de demander le référencement du plugin CISTYLE.

      En attendant, il convient d’installer manuellement les rares nouvelles versions de CISTYLE.

      Cordialement

    • Michel Suquet

      Merci pour cette demande de référencement :-)

      Pour la mise à jour de Cistyle, il suffit d’écraser l’ancienne version, c’est bien cela ?

      Pour préparer le référencement de Cistyle, peut-on mettre l’ensemble du répertoire cistyle dans un répertoire v2.3.0, comme par exemple cela est fait dans le répertoire cibloc ? Ou bien cela sera fait automatiquement lors du passage en référencé ?

    • Equipement

      Le plugin CISTYLE est désormais référencé ( https://plugins.spip.net/cistyle.html ).

    Reply to this message

  • 1
    Manu

    Icône “insérer un bouton” non présente dans la liste proposée par les crayons
    Comportement étrange... Je remarque ce matin dans la barre d’édition de “crayons” l’absence de l’icône “choisir un bouton” (voir copie d’écran). Qu’est-ce qui peut expliquer cette absence alors que les deux autres icônes (choisir un bloc et choisir une icônes) sont elles bien présentes ?

    • Equipement

      Avec :
      -  SPIP v4.4.13
      -  Crayons v3.3.0
      -  CIBLOC v2.5.1

      En utilisant Squelettes-dist, après vidage du cache de SPIP, je ne constate pas ce problème.

    Reply to this message

  • 7
    Philippe

    Bonjour, ce plugin est super, mais pas compatible avec Multilang. Une fois l’article enregistré, on ne récupère pas tout le contenu dans les onglets de langues quand on souhaite le modifier.

    • Je confirme, j’ai le même comportement.
      Cela est problématique.

    • Equipement

      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]

    • En effet, mais comme indiqué, cela n’est pas compatible avec le plugin Multilang qui fonctionne avec la syntaxe :

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

      Dans ce cas, le texte une partie du texte est perdu après l’enregistrement.

    • Equipement

      Si le plugin multilang n’est pas activé, un article avec le texte ci-dessous s’affiche sans problème :

      <multi>[fr]en français

[bloc_bordure]
{{{Intertitre}}}
Si autem filium parvulum habuerit,
[/bloc_bordure]

[en]in english

[bloc_ombre]
{{{Intertitre}}}
Text in english.[/bloc_ombre]
</multi>

      Aussi, SPIP gère très bien ce cas,

      Si le plugin multilang est activé, seule la phrase “en français” s’affiche dans le champ de saisie du texte de l’article, En revanche, tout est bien enregistré dans la base de données.

      Visiblement le plugin multilang considère [bloc_bordure] comme [en] (ou une autre langue) et ne l’affiche pas.

      Il convient donc de signaler ce problème sur la page du plugin multilang.

    • Merci pour ce retour.

    • Equipement

      J’ai ouvert un ticket (sur le plugin multilang) à ce sujet décrivant le problème et une solution :

      https://git.spip.net/spip-contrib-extensions/multilang/-/issues/13

    • Philippe

      Bravo, je viens de tester et ça fonctionne parfaitement. Merci, ça règle un problème que je rencontrais sur de nombreux sites.

    Reply to this message

  • 2
    Julien

    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.

    • Equipement

      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]
    • Philippe

      En fait le problème apparaît quand on englobe les [multi colonnes] avec la balise <multi>

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

      Ce qui empêche d’utiliser les multi colonnes avec le plugin multilang

    Reply to this message

  • 3
    Manu

    Bouton et lien

    Il me semble qu’il y a un hic avec les boutons quand on leur affecte un lien. Le code produit est alors de la forme :

    <a href="(url)">
<button class="classe1 (classe2 ...)">
texte du bouton
</button>
</a>

    Le hic, c’est que cette imbrication de button dans a n’est pas valide w3c, ce qui est un peu ennuyeux.
    Est-ce qu’une évolution de ce plugin qui est tout de même carrément efficace et intuitif pourrait être que le code produit soit de la forme :

    <a href="(url)" classs="class="classe1 (classe2 ...)">
texte du bouton
</a>

    qui est valide W3C et dans lequel le stylage css de la balise a pourra reproduire la mise en forme du bouton choisi ?

    (Si ce n’est pas possible, il reste toujours possible de développer et de faire appel à des modèles personnalisés, mais ce serait dommage de perdre la fonctionnalité “lien” des boutons)

    • Equipement

      Comme cela figure dans la présente page, le plugin CIBLOC permet d’insérer un bouton dans le texte de l’article (cf. Comment insérer un bouton ?).

      Pour cela, il est obligatoire de renseigner le titre et l’adresse du lien.

      Exemple des raccourcis d’un bouton inséré dans le champ de saisie du texte de l’article :

      [bouton][Mon bouton->https://www/google.fr][/bouton]

      Lors de l’affichage de l’article (sur le site public ou dans l’espace privé), ces raccourcis sont transformés en :

      <span class="cibtn cibtn-defaut">
<a href="https://www/google.fr" class="spip_out" rel="external">Mon bouton</a>
</span>

      Il s’agit donc d’un simple lien dans un span. Ceci est valide W3C.

    • Manu

      Ah, oui, désolé... la syntaxe employée par les rédacteurs n’était pas la bonne.
      Merci de cette réponse rapide et encore un grand merci pour ce très chouette plugin qui permet de belles mises en page.

    • Manu

      Merci de cette réponse rapide... qui m’a permis de constater qu’il s’agissait d’une erreur de ma part dans les consignes données aux rédacteurs.
      Y aurait-il un moyen de pouvoir attribuer une (des) classes supplémentaires (via un champ supplémentaire dans le formulaire de configuration ?) aux boutons. L’idée serait de pouvoir faire un pont avec des frameworks comme foundation par exemple et d’exploiter des classes comme expanded ou autre pour compléter/ajuster les mises en forme ?

    Reply to this message

  • 1
    Roland

    Bonjour,
    une petite note pour adapter cette documentation.

    La première ligne du paragraphe Installation affiche “Il nécessite d’installer le plugin CISTYLE, qui figure dans la colonne de droite de la présente page.” Or cistyle n’y figure pas.

    Cette note est d’ailleurs un peu en contradiction avec “Par ailleurs la version 2 de CIBLOC nécessite d’installer immédiatement le plugin CISTYLE, qui est livré avec.” quelques lignes plus bas.

    Maintenant, je vais installer et tester ces deux plugins.

    Cordialement

    • Equipement

      Le plugin CISTYLE figure dans la colonne de droite de la présente page, dans la section “Autres téléchargements”.

      Dans le chapitre “Migration de la version 1 à la version 2”, je viens d’enlever la mention “qui est livré avec”.

    Reply to this message

  • 1
    conil26

    Bonjour,

    Dans un bloc multicolonnes, est-il possible qu’une des 3 colonnes ne contienne qu’une seule cellule quand les autres en contiennent plusieurs. A l’instar des <table> avec <td rowspan="">
    Merci

    • Equipement

      Le bloc multicolonnes ne permet pas qu’une des 3 colonnes ne contienne qu’une seule cellule quand les autres en contiennent plusieurs.

    Reply to this message

  • 1
    Vincent

    Je cherche à créer un nouveau bloc pour cadrer l’insertion d’un fichier html local en iframe suivi de sa légende.
    Pour cela je déclare dans cibloc_objets.php un nouveau bloc :

    'bloc_cartehtml'=>array(
'id'=>'cartehtml',
'type'=>'bloc',
'nom'=>'Carte HTML',
'bordure'=>'non',
'rang'=>18,
'code_html_ouvrant'=>'<figure class="fr-content-media fr-content-media--lg" role="group">',
'code_html_fermant'=>'</figure>',
'paragrapher'=>'non',
'preremplir'=>'[iframe_html]Code iframe à insérer[/iframe_html]
[legende_carte]Lorem ipsum dolor sit amet consectetur adipiscing elit[/legende_carte]'
),

    Puis les 2 blocs pour l’iframe et la légende :

    'iframe_html'=>array(
'id'=>'iframe',
'type'=>'texte',
'nom'=>'Iframe qui affiche le fichier html',
'statut'=>'masque',
'paragrapher'=>'non',
'code_html_ouvrant'=>'<div class="fr-content-media__img">',
'code_html_fermant'=>'</div>',
),

'legende_carte'=>array(
'id'=>'legende',
'type'=>'texte',
'nom'=>'Légende de la carte',
'statut'=>'masque',
'paragrapher'=>'non',
'code_html_ouvrant'=>'<figcaption class="fr-content-media__caption">',
'code_html_fermant'=>'</figcaption>',
),

    Mais si le premier bloc est bien interprété, les 2 autres ne le sont pas :

    <figure class="cibloc cibloc_cartehtml fr-content-media fr-content-media--lg" role="group">
<p>
[iframe_html]Code iframe à insérer[/iframe_html]<br class="autobr">
[legende_carte]Lorem ipsum dolor sit amet consectetur adipiscing elit[/legende_carte]</p>
</figure>

    Je dois oublier quelque chose mais impossible de trouver ce qui cloche avec ce bloc : les balises html sont bien autorisées dans cibloc_verifier.php...

    Reply to this message

  • rcaron

    Bonjour,

    J’utilise beaucoup ce plugin. Joli travail !

    J’a un souci avec les blocs dépliables : lorsque le texte est long, par moments, il passe se superpose avec la flèche pour déplier. Comment régler ce problème ?

    Merci

    Voir pièce jointe

    Reply to this message

  • rcaron

    Bloc accordéon ne fonctionnent plus. J’ai désinstallé et supprimé puis réinstallé sans résultat.

    Dans le menu de cibloc il n’y a plus les images des “bloc accordéon”.

    Sous SPIP 4.2.6

    Une aide ?

    Merci

    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.

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