Mosaïque

Ce plugin permet d’organiser les images du portfolio par simple glisser-déposer des vignettes d’une mosaïque accessible depuis la page d’édition de l’article.

Dépendances

Ce plugin nécessite les plugins Champs extra et Saisies pour fonctionner.

Utilisation

Le plugin Mosaïque ajoute un lien « Trier les images du portfolio » sur la page d’édition des articles (bouton « Modifier cet article ») dont le portfolio contient au moins deux images.

Ce lien ouvre une popup qui présente les images (jpg, png et gif) du portfolio de l’article dans une mosaïque. On peut ordonner les vignettes de la mosaïque par simple glisser-déposer.

Lorsque l’ordre est déterminé, un clic sur « Enregistrer » ferme la popup, et un message informe le rédacteur qu’il doit encore enregistrer l’article pour que l’ordre des vignettes soit sauvegardé dans la base.

Affichage de la mosaïque

Il y a plusieurs moyens d’afficher la mosaïque :

Avec les squelettes de la dist
Le squelette de la dist inclure/documents.html est surchargé par le plugin pour prendre en compte l’ordre de la mosaïque. Sur les sites qui utilisent les squelettes par défaut, l’affichage de la mosaïque fonctionne donc sans modification supplémentaire.

Par les modèles
Le plugin introduit également deux modèles spécifiques :

  • <articleXXX|mosaique> permet d’afficher la mosaïque de l’article XXX.
  • <ordre_mosaique|id_article=XXX> retourne l’ordre des id des images de la mosaïque de l’article XXX, séparés par des virgules : 35,2,56,1,etc.

Utilisation dans les squelettes
Pour récupérer l’ordre d’une mosaïque dans une boucle DOCUMENTS, on utilise la méthode suivante (dans un contexte où l’id_article est défini) :

<BOUCLE_exemple(DOCUMENTS) {id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}}>
[...]
</BOUCLE_exemple>

Remarquons qu’aucun critère de tri (critères {par ...} ou {tri ...}) ne doit être précisé dans la boucle.
De même, on veillera à n’insérer les autres éventuels critères qu’après l’appel d’ordre_mosaique dans les critères :

<BOUCLE_exemple(DOCUMENTS) {id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}} {extension IN jpg,gif} {titre=='bob'} {','}>

Remarque concernant le fonctionnement

L’ordre de la mosaïque est conservé dans un champ extra mosaique de la table spip_articles.
Il existe donc une balise #MOSAIQUE utilisable dans le contexte des boucles ARTICLES. Cependant l’utilisation de cette balise est à proscrire, car elle contient le dernier ordre défini par le rédacteur et ne tient pas compte des éventuels ajouts (ou suppressions) ultérieurs d’images dans le portfolio. Dans 99% des cas on préférera donc la méthode décrite ci-dessus pour récupérer l’ordre de la mosaïque dans les squelettes.

Développements possibles

On peut imaginer deux principaux axes de développement de ce plugin :

  • Le principe pourrait être généralisé aux objets d’une rubrique (articles, brèves, documents...), ce qui permettrait de se passer de la traditionnelle numérotation (parfois laborieuse) des objets par leur titre.
  • Dans la perspective du développement d’un nouvel objet éditorial « album », le principe pourrait être retenu afin que l’album prenne en compte la notion d’ordre, et ce de manière intuitive pour le rédacteur.

Migrer vers Ordoc

Le plugin Mosaïque est déprécié, il est préférable d’utiliser le plugin Ordoc : ordonner les documents attachés qui offre une interface plus moderne pour gérer la position des documents sur un article.

Il existe un plugin de migration Migration de Mosaïque vers Ordoc.

Discussion

15 discussions

  • 2

    Bonjour

    Quid d’une mise à jour vers SPIP 3.2
    -  Est-ce qu’un portage est prévu ?

    Répondre à ce message

  • 1

    Bonjour !

    Me revoilà à nouveau, j’aime toujours autant ce plugin pour trier l’ordre des images… Mais voilà, je suis passée à Spip 3.1.1 et j’ai un souci : l’ordre n’est pas pris en compte à l’affichage des miniatures. Je ne sais pas s’il est incompatible ou plus sûrement je ne sais pas adapter le code qui semble avoir un peu changé depuis Spip 3.0.

    En effet, la boucle source de inclure/documents.html est devenue :
    <BOUCLE_documents_portfolio(DOCUMENTS) {id_article?}{id_rubrique?}{objet?}{id_objet?} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>

    J’ai tenté ça, ce qui ne donne pas de message d’erreur mais ne prend pas l’ordre en compte :
    <BOUCLE_documents_portfolio(DOCUMENTS) {id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}} {mode=document}{extension IN png,jpg,gif}{doublons}{vu=non}>

    Help please :-) ! D’avance merci, bonne journée.
    Karen

    • En fait, je viens de mettre un float : left sur les li et l’ordre suit maintenant. J’avais l’impression que c’était mélangé et non juste inversé du fait que chaque ligne de miniature suivait un float : right et que sur plusieurs lignes, ça donnait l’impression d’un mélange…
      Je ne sais pas si je suis très clair, mais ça marche !

    Répondre à ce message

  • Bonjour, le projet de compatibilité avec le plugin albums est-il toujours d’actualité ? Je trouve que les deux se complètent :)

    Répondre à ce message

  • 8

    Bonjour,

    Je viens de mettre à jour les plugins Mosaique (0.5.0) ainsi que Saisie (2.1.1) et Champs Extra (3.5.0).
    Depuis, j’ai cette erreur pour les pages de rubriques :

    Erreur SQL 1054
    Unknown column 'mosaique' in 'field list' 
    SELECT mosaique FROM spip_rubriques WHERE id_rubrique=1

    Est-ce que quelqu’un d’autre a ce problème ?

    Cordialement,
    Karen

    • Bonjour,

      Au risque d’insister… personne n’a ce problème ?
      J’ai reproduit exactement le même phénomène sur tous mes sites :
      – mise à jour de Saisie pour formulaires 2.1.1 > OK
      – mise à jour de Champs Extra 3.5.0 > OK
      – mise à jour de Mosaique 0.5.0 > message d’erreur, uniquement sur la partie privée d’une page de rubrique… ça ne semble pas poser de problème fonctionnel, mais j’aime pas les messages d’erreur ;-)
      Et je ne suis pas assez experte en php/sql etc. pour mettre les mains dedans !

      Cordialement,
      Karen

    • je viens de regarder ... les personnes qui se sont occupés de la mise à jour du plugin ne savent pas que celui-ci doit procéder aux mise à jour de la BDD lorsqu’il se met à jour... je vais regarder si je peux corriger cela rapidement.

    • je viens d’envoyer une correction. Il faudra procéder à la mise à jour vers la 0.5.1, bientôt ;-)

    • Merci Maieul, je note l’astuce pour la prochaine fois !

    • Décidément, un grand merci la communauté pour votre réactivité ! Je guette alors la mise à jour, bien que ça ne semble pas poser de problème fonctionnel majeur…
      Merci Maïeul et Thom ! Vraiment très bien ce plugin :-)

    • des retours sur la mise à jour ? histoire d’être sur que j’ai bien fait la bonne modification...

    • Oups ! Pardon, bien sûr ! J’ai mis à jours sur tous les sites concernés, c’est nickel ! Plus de message d’erreur, pas d’autres bugs relevés.
      Merci encore !
      Karen

    • parfait ! mon intuition était donc la bonne.

    Répondre à ce message

  • 10

    hello, j’essaie d’étendre ce plugin bien sympa aux articles d’une rubrique via un cvt en public.
    Je rencontre un problème à l’enregistrement du champ mosaique dans la table rubriques
    « un problèmr technique empêche l’enregistrement correct du champ mosaique... »
    j’ai ça dans spip_log ..,2274,2277,’, ),)
    je suppose que c’est ce ,’, qui bloque mais je n’arrive pas à m’en débarasser , une idée ?
    merci, bonne journée, Pierre

    • mon impression c’est que l’enregistrement de la rubrique ne laisse pas le temps de l’injection des id dans le champ hidden..

    • le problème venait de la capacité du champ mosaique varchar 255, en passant à 1000 c’est glop ;)
      donc pour ceux qui voudraient étendre aux articles, c’est du gateu, merci thom pour le boulot !

    • obiwanriko

      Bonjour
      On est en 2015 et j’ai ce problème mais lors de l’enregistrement d’un article cette fois -ci... à quoi cela pourrait-il être dû ?

    • hello, si c’est le même problème, c’est qu’il y a trop de documents dans l’article pour la config d’origine du champ sql, solution : modifier le fichier base/mosaique.php, remplacer

      'sql' => "varchar(255) NOT NULL DEFAULT ''", 
      par
      'sql' => "varchar(1000) NOT NULL DEFAULT ''",
    • obiwanriko

      Merci
      J’ai chnagé le code et ça n’a pas solutionné le problème mais en changeant la valeur Varchar du champ via phpMyAdmin je n’ai plus le problème
      Merci beeaucoup !!!!

    • ah oui pardon, si le plugin est installé cela nécessite de changer la valeur champ en base...
      255 c’est vraiment pas assez, même 1000 peut s’avérer rapidement insuffisant...
      voyez vous un inconvénient à ce que l’on passe en text ?

    • ou varchar max plutôt ? c’est ce que j’ai fait et c’est nickel... ++

    • Salut Pi r,

      Merci pour ta contrib super rapide !

      Je crois qu’il y avait déjà eu un commit pour passer en varchar(1000) qui avait été annulé, varchar ne devant pas dépasser 255 selon ce que moi et plusieurs autres avions compris. J’ai retrouvé la conversation sur la liste : http://comments.gmane.org/gmane.comp.web.spip.zone.cvs/70076 (c’est curieux d’ailleurs, je m’aperçois que je n’ai jamais reçu ton mail du 5 Jul 08:10 2013)

      D’après la doc de MySQL, varchar > 255 n’est supporté qu’à partir de MySQL 5.0.3.

      Personnellement je n’ai pas d’avis, je n’y connais pas grand chose. Deux petites questions cependant :

      Pourquoi varchar(1000) plutôt que text ? (pour ma culture générale)

      En admettant qu’on opte pour varchar(1000), est-ce qu’on peut décider d’abandonner le support des MySQL < 5.0.3 ? Quelle est la compatibilité attendue pour un plugin Spip ?

      Et vu que je suis une bille sur cette dernière question, je m’en vais de ce pas la poser sur la liste !

      Bonne soirée !

    • ouch, je ne me rappelais pas non plus de cette discussion... ça craint là, faut faire un break... merci en tout cas pour ce script qui m’est très utile, je m’en sers comme chemin de fer pour des ebooks, c’est top. Oui il semble que text soit la meilleure solution, voyons ce qu’en disent les experts ;)
      A plus !

    • En effet, c’est « text » qui est recommandé ici. C’est corrigé !

    Répondre à ce message

  • 2

    Bonjour,

    D’abord un grand bravo et merci à thom_b pour cette excellente contribution ! L’air de rien, la gestion des images est un vaste chantier !
    Et donc, depuis 2007 que je parcours et lis ce forum en long, large et travers, je passe le pas de m’inscrire aujourd’hui !

    Voilà mon problème : j’utilise une version personnalisée, carrousel vertical, de Galleria (je précise d’entrée que le problème serait le même avec le vrai plugin > vérifié).

    J’ai donc créé un modèle galleria.html et je l’ai adapté pour qu’il fonctionne avec Mosaïque en appelant le mode=document (grâce aux contribs trouvées sur ce site), et jusqu’ici, tout va bien, que ce soit un appel #GALLERIA dans le squelette ou directement <galleria> dans le champ texte de l’article.

    Or, j’aimerais pouvoir appeler ce modèle à partir d’un autre article, par exemple appeler le portfolio de l’article xx dans l’article yy par un appel du type <galleriaxx>.
    Mais ça ne fonctionne pas (que dans l’article concerné et pas dans un autre article) car cette partie de la boucle empêche l’appel du modèle :
    {id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}}

    Voici ma boucle complète dans le modèle :

    <BOUCLE_galleria (DOCUMENTS){id_article=#ENV{id}}{extension==jpg|gif|png} {pagination #ENV{pagesize,30}}{id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}}>
    
     <a href="#FICHIER"><img src="#FICHIER" [title="(#TITRE|textebrut)" ][alt="(#DESCRIPTIF|textebrut)" ]/></a>
    
    </BOUCLE_galleria>

    Quelqu’un pourrait-il m’aider pour faire en sorte de rendre ce modèle (ou tout autre modèle) appelable avec Mosaïque ? Par exemple pouvoir appler <galleria5>, ou <modelexx> dans l’aticle 27 ?
    Je précise que je connais le html et le css, un peu les boucles SPIP (assez limité tout de même), mais pas le php ni javascript, et aussi qu’en principe je cherche plusieurs jours avant de me décider à poster quelque part… mais là, je cale !

    D’avance merci pour vos réponses, et plus largement pour toutes ces merveilleuses contributions.
    Karen

    • Salut,

      Ça fait un petit moment que je n’ai pas mis les mains dans le cambouis, je vais essayer de ne pas dire d’idioties...

      Je dirais qu’il faut essayer de passer l’id de l’article xx au modèle ordre_mosaique. Peut-être avec :

      {id_document IN #MODELE{ordre_mosaique,id_article=#ENV{id}}|explode{','}}

      Attention également à l’ordre des critères dans la boucle, cf la doc du plugin :

      De même, on veillera à n’insérer les autres éventuels critères qu’après l’appel d’ordre_mosaique dans les critères

      Bon courage

    • Bonjour et merci thom_b…
      pour votre réactivité, en plus de cette contribution très utile.

      Je viens de tester et ça fonctionne.

      Très bonne journée, la mienne vient de commencer merveilleusement ;-)

    Répondre à ce message

  • 1

    Bonjour,

    Le plug in Mosaïque semble bloquer le bon fonctionnement d’un autre plug in qui sert à scroller le site via des ancres.
    (nom du plug in : scrolld.js)
    http://scrolldjs.com/

    Une fois Mosaïque activé, les liens du menu qui utilisent ScrollD ne fonctionnent plus.
    Je pense qu’il doit y avoir un conflit dans l’execution des scripts jquery.
    L’appel du script ScrollD se fait dans le fichier head.html.

    Avez vous connaissance d’un bug à ce niveau ? si vous avez une piste, je suis preneur !

    Merci pour votre aide !

    • Bonjour,

      Normalement Mosaïque n’insère aucun JS dans les pages de l’espace public, il active juste jquery.ui.sortable via le pipeline adéquat.

      Il faut vérifier qu’aucun script n’est appelé deux fois (je pense à jquery). Appeler jquery/jquery UI avec les fonction de SPIP est une bonne façon d’éviter ça.

      Pour info, il existe un plugin SPIP tout prêt qui fait la même chose (il me semble) que scrolldjs : http://contrib.spip.net/Ancres-douces

      Bon courage !

    Répondre à ce message

  • 3

    Bonjour,

    merci pour ce plug in bien pratique.

    j’utilise le plug in galeria pour afficher dans un diaporama les images du portfolio d’un article.
    Le diaporama affiche correctement les éléments du portfolio.
    Cependant l’ordre des images défini à l’aide de votre plug in n’est pas pris en compte. Il continue d’afficher les images par ordre d’inclusion dans l’article.

    voici un exemple de boucle :

    <div id="diapo3">
    <BOUCLE_article(ARTICLES){id_article=12}>
    <div id="gallery3">
    [(#MODELE{galleria}{ordre_mosaique,id_article,lightbox=true}{mode=document})]
    </div>
    </BOUCLE_articledate3>
    </div>

    Auriez vous un conseil pour m’aider à résoudre ce problème ?
    Merci pour votre aide !

    • Bonjour,

      La compatibilité entre ces deux plugins n’étant pas prévue, il faut mettre un peu les mains dans le cambouis. Je ne connais pas le plugin Galleria, mais la manip ne doit pas être très complexe. Dans Galleria, il faut probablement surcharger le squelette modeles/galleria.html pour faire en sorte que la boucle DOCUMENTS prenne l’ordre de la mosaïque (voir partie « Utilisation dans les squelettes » de l’explication ci-dessus).

      Très vite fait et sans tester, je dirais qu’il faut ajouter

      <BOUCLE_article (ARTICLES) {id_article=#ENV{id}}>

      au début, puis remplacer le début de la BOUCLE_galleria par :

      <BOUCLE_galleria (DOCUMENTS){extension==jpg|gif|png} {pagination #ENV{pagesize,30}} {mode=#ENV{mode,image}} {id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}}>

      et ne pas oublier de fermer la BOUCLE_article à la fin.

      Puis appeler le plugin de façon normale (c’est-à-dire en suivant les explications de la doc de Galleria).

    • Bonjour,

      Ça marche parfaitement ! Merci pour le coup de main !
      Avec cette astuce, l’ordre des images d’un diaporama utilisant le plug in galleria sur spip peut désormais être modifié avec l’interface du plug in mosaïque.

      Merci !

    • je reprends, parce que, pour moi ça ne fonctionne pas...
      bon, je suis débutante spip, donc pas encore familiarisée avec la logique des boucles...

      je dois noter ?


      ....

      ou bien alors ?


      ....

      j’ai essayé les 2 sans succès...

      merci de votre aide

    Répondre à ce message

  • Mosaique ne traite que les images dans le portfolio.

    Voici deux astuces pratiques pour faciliter sa mise en oeuvre.

    Si sur un site existant, vous voulez passer toutes les images précédentes dans le portfolio, voici la requête SQL

    UPDATE <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+c3BpcF9kb2N1bWVudHM8L2NvZGU+"></span>  SET mode="document" WHERE mode="image"

    Vous pouvez aussi ajouter dans mes_options.php, la ligne suivante qui force l’ajout des documents dans le portfolio

    define('_LARGEUR_MODE_IMAGE', 1);

    Répondre à ce message

  • 1

    Bonjour,
    j’attends depuis longtemps un tel plugin ! Je l’ai donc installé avec tout ce qu’il faut et tout se passe bien dans la partie privée ; mais les modifications faites n’apparaissent pas dans la partie publique. L’ordre des images du portfolio reste inchangé... A noter que j’ai pas observé de surcharge dans le fichier ’documents.html’ , j’ai donc modifié comme expliqué la boucle ’BOUCLE_documents_portfolio’comme suit :

    <BOUCLE_documents_portfolio(DOCUMENTS) {id_document IN #MODELE{ordre_mosaique,id_article}|explode{','}}>[
    		<li><a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
    		  |url_absolue
    			|parametre_url{id_document,#ID_DOCUMENT}
    			|ancre_url{documents_portfolio}
    			)]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
    			|image_passe_partout{90,90}
    			|image_recadre{90,90}
    			|inserer_attribut{class,spip_logos}
    			|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a></li>
    		]</BOUCLE_documents_portfolio>

    et ça ne change rien.. Est-ce quelqu’un aurait une idée ? Je désespère..
    version : SPIP 3.0.11 [20757]
    Merci d’avance !

    • Bonjour,
      Si la surcharge et les modifs dans le squelette inclus ne fonctionnent pas, c’est peut-être parce que ce n’est pas le bon squelette qui est appelé.
      Il faut regarder ça avec var_mode=inclure (voir http://www.spip.net/fr_article4453.html) pour savoir d’où vient la boucle appelée.

    Répondre à ce message

Ajouter un commentaire

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.

Qui êtes-vous ?
[Se connecter]

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