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

Discussion

44 discussions

  • Bonjour,
    Très bon plugin, facile à utiliser.
    Cependant j’aurais voulu modifier le rapport 33-67 du multicolonne en 20-80 par exemple.
    dans quels fichiers faut-il intervenir?
    Merci
    Sylvain

    Reply to this message

  • 2

    Bonjour,
    Dans mes logs, je constate une erreur récurrente
    AH01071: Got error '/var/www/vhosts/monsite/httpdocs/plugins/auto/cibloc/inc/cibloc_commun.php on line 300PHP message: PHP Notice: Undefined index: rang in /var/www/vhosts/monsite/httpdocs/plugins/auto/cibloc/inc/cibloc_commun.php on line 300PHP message: PHP Notice: Undefined index: rang in /var/www/vhosts/monsite/httpdocs/plugins/auto/cibloc/inc/cibloc_commun.php on line 300'
    Je suis en

    • SPIP 3.2.11 [24285]
    • Cibloc 2.1.2
    • PHP 7.4.16

    Les lignes 299 à 301 du fichier auto/cibloc/inc/cibloc_commun.php sont

    function cibloc_tri_rang($a, $b) {
            return $a['rang'] - $b['rang'];
    }

    Est-ce important ? Y-a-t-il quelque chose que je puisse faire pour ne plus générer l’erreur récurrente ?

    D’avance merci

    • Bonjour,
      a) Le chapitre “7.1 Compatibilité” de la documentation de CIBLOC indique que CIBLOC est compatible avec PHP 5.4, 5.6, 7.0, 7.1. Aussi, en utilisant PHP 7.4.16, il n’est pas surprenant qu’il y ait des warning dans les fichiers de log.
      b) Le warning constaté n’impacte pas le fonctionnement de CIBLOC.
      c) Le warning constaté signifie que le site utilise vraisemblablement une configuration imposée par fichier et que ce fichier de configuration n’est pas correct (un bloc, un ensemble ou un multi colonnes ne dispose pas de l’attribut “rang”).

    • Merci pour les explications claires.
      La notion de “rang” n’était pas dans la doc et m’était passée au dessus de la tête. Si je peux me permettre, elle mériterait d’une part une valeur vide (au lieu de “0” par défaut) et d’autre part un “obligatoire” lors d’une création de bloc/ensemble de blocs. Un ensemble de blocs avait également “0” pour valeur de rang alors que je n’en ai pas créé mais j’ai oublié lequel, désolé. J’ai mis de l’ordre avec zéro “0” :)
      Quant à la version PHP, j’avoue que je m’y perds entre les compatibilités/incompatibilités côté SPIP et le besoin croissant de sécurité avec les warnings côté administration serveur disant que PHP 7.1 est obsolète. Vu le nombre d’attaques qui croit par vague, j’essaie de naviguer au plus récent une fois stabilisé.

    Reply to this message

  • 10

    Bonjour,

    Merci pour cet outil ;-)

    En réalisant des tests sur des installations fraîches et sans plugins tiers :
    -  Avec SPIP 3.2.9 et SPIP 3.3.0-dev, la fonction Recalculer le cache des blocs affiche une page blanche.
    -  Avec SPIP 3.3.0-dev, les modifications de configurations ne sont pas enregistrées, sauf la configuration Choisir une palette de couleurs.

    françois

    • Bonjour,
      Je ne constate pas ces problèmes. Quelle est la version de PHP utilisée ?

    • -  SPIP 3.2.9 -> PHP 7.2.14
      -  SPIP 3.3.0-dev -> PHP 7.2.14 et PHP 7.2.31

    • Quels sont les messages :
      -  dans le log d’erreur d’Apache
      -  dans le log de SPIP (/tmp/log/spip.log)

    • Rien dans les logs SPIP.
      Aucun logs quand on essaie d’enregistrer une config, mais quand on essaie de vider le cache des blocs, il y a un php_error.log d’Apache : http://spip.pastebin.fr/85279 . Même log pour les 2 versions de SPIP.

    • Merci de m’indiquer si la version 2.1.2 de CIBLOC, que je viens de joindre au présent article (cibloc_210217.zip), règle ce problème.

    • Effectivement, la version 2.1.2 résout le souci de vidage du cache pour les 2 versions de SPIP, et il n’y a plus d’erreur PHP Apache.

      Donc tout fonctionne sur SPIP 3.2.9 : merci pour cette correction !

      Reste SPIP 3.3.0-dev sur lequel les configurations ne sont pas sauvegardées et il n’y a aucun log SPIP ou Apache. Je comprends aussi que CIBLOC ne couvre pas encore la 3.3.0-dev ;-)

    • Sous SPIP 3.3.0-dev, lorsque je modifie la configuration d’un bloc, elle est bien sauvegardée.

    • La seule chose que je constate ,en standard, c’est que l’enregistrement / création d’une configuration renvoi sur la page ?exec=configurer_cibloc en SPIP 3.2.9, alors que sous 3.3.0-dev, je reste sur la page de configuration “configuration icônes” (par ex.).

      Même souci avec différents navigateurs, en local ou en ligne.

    • Je viens de tester sous 3.3.0-dev (téléchargé hier), avec CIBLOC 2.1.2 et CYSTYLE 1.2, sous Chrome et sous Firefox les deux formulaires suivants :
      -  Configurer la liste des icônes
      -  Configurer les couleurs des icônes
      Les modifications sont bien enregistrées puis il y a bien un renvoi sur la page ?exec=configurer_cibloc

      Au moniteur réseau (touche F12 du navigateur, puis onglet réseau ou network) est-ce que le POST en AJAX (POST /ecrire/?exec=cibloc_config_icones_couleur) se passe normalement ?

    • Les données du formulaire passé par la requête POST /ecrire/ ?exec=cibloc_config_icones_couleur contient visiblement les bonnes valeurs à enregistrer.

    Reply to this message

  • 2

    Cibloc et champs extra
    Pour des besoins particuliers, je fais appel à des champs extra pour mes articles (= je scinde le contenu en différentes zones). J’ai ainsi rajouté 2 champs “blocs de texte”.
    A priori, les balises cibloc ne sont pas interprétées dans ces blocs supplémentaires : à l’affichage public, les balises apparaissent comme du texte (voir copie d’écran jointe)
    Que faudrait-il modifier pour que les balises soient reconnues/interprétées également dans des champs extra ?
    Merci beaucoup d’avance de votre aide (et encore merci pour ce merveilleux plugin)

    • Cibloc et champs extras (résolu)
      Une solution simple : l’application du filtre “|propre” sur le champ extra permet d’obtenir le résultat escompté. Super !

    • Nomrlamenet tu peux configurer ton champ extra pour que propre soit automatiquement appliuqé (soit dans l’interface graphique, soit dans ton php, selon la manière dont tu déclare les champs extras=

    Reply to this message

  • 2

    Bonjour,
    Tout d’abord, un grand grand merci pour ce superbe plugin qui fait désormais partie de mes indispensables.
    Je rencontre toutefois un souci avec les blocs « accordéon » dans les sites pour lesquels, dans un souci d’accessibilité, la variable de personnalisation debut_intertitre a été redéfinie de manière à ce que les intertitres deviennent des h2 au lieu des h3.

    • La prochaine version du plugin CIBLOC prendra en compte le cas où la variable de SPIP “debut_intertitre” a été personnalisée.

    • Ajout de variantes / personnalisation des blocs existant
      Pour des besoins un peu particuliers (essentiellement pour intégrer des indications de classes bootstrap dans le html des blocs générés), je souhaiterais pouvoir proposer d’autres blocs et/ou des variantes de certains blocs proposés. Je m’interroge sur la façon dont il faut procéder.
      Dans la version précédente du plugin (version 1.xx), le pdf “description du plugin” comportait pages 25 et suivante une section (Comment personnaliser les trois listes et les styles) qui répondait à cela. Cette section n’existe plus dans le manuel des versions 2.x de votre plugin : la méthode proposée pour les anciennes version est-elle encore valable ou faut-il procéder autrement ?
      Pourriez-vous m’aider en donnant ici les grandes lignes de la démarche à suivre ?
      Merci infiniment d’avance,

    Reply to this message

  • 1

    Superbe outil ! Bravo.

    J’utilise dans un article “Ensemble de blocs 8” avec des images. Comment faire pour qu’elles s’affichent en grand quand on clique dessus ?

    Merci Beaucoup

    Reply to this message

  • Renée Picard

    J’utilise texte par dessus image.
    Dans perso.css j’ai mis background-color:transparent; pour le le wrapper.
    C’est parfait.
    J’aimerais pouvoir choisir la couleur des caractères.
    J’ai essayé avec [red] ...[/red] de «tout en couleur» du couteau suisse.
    Cela ne fonctionne pas.
    Une idée?

    Reply to this message

  • 2

    J’installe ce plugin partout tant il est utile / commode
    Aujourd’hui, sur une nouvelle installation, je tombe sur une erreur fatale
    Fatal error: Cannot redeclare cibloc_lire_cache_definition() (previously declared in /home/mdrzxpkd/public_html/spip/plugins/cibloc/cibloc/inc/cibloc_lire_cache.php:12) in /home/mdrzxpkd/public_html/spip/sites/sky.mdr.zd.fr/squelettes/inc/cibloc_cache.php on line 28

    Cache vidé, suppression du répertoire, nouveau téléchargement, rien n’y fait
    PHP Version 7.2.34 - SPIP 3.2.7

    Quelle conduite à tenir ?

    • Le message d’erreur est clair. Il y a un fichier cibloc_cache.php dans le dossier squelettes du site ( sky.mdr.zd.fr/squelettes/inc/ ), alors qu’il ne devrait pas exister dans ce dossier.

    • Ouupppssss.... (grand blanc) il y a des moments où on se sent un peu couillon !
      Désolé du dérangement, merci de la réponse aussi rapide ! (et encore merci pour ce merveilleux plugin ;-))

    Reply to this message

  • Bonjour,

    je souhaiterais pouvoir mettre a jour le plugin cibloc, ainsi que la série des lugins cixxx sur notre plateforme par un script lancé en tache cron.

    Pour cela il fraudais que ceci soit sur https://git.spip.net/spip-contrib-extensions

    Pouvez vous faire le necessaire ?

    merci

    Reply to this message

  • Bonsoir,

    pourquoi lors de l’installation du plugin avec la commende suivante ne fonctionne pas

    un choix volontaire du dev de pas passer sous GIT ?

     /web/plugins-dist/pluginSF$ git clone https://git.spip.net/spip-contrib-extensions/cibloc
    Cloning into ’cibloc’...
    Username for ’https://git.spip.net’:
    Password for ’https://git.spip.net’:
    remote: invalid credentials from 83.166.138.105
    fatal: Authentication failed for ’https://git.spip.net/spip-contrib-extensions/cibloc/

    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 / PostgreSQL
  • 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 apparait.

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