Un dock pour SPIP

Le plugin EuDock pour SPIP 2.0 (et plus) est une adaptation de l’applet JavaScript « EuDock » de Parodi (Pier...) Eugenio. Il permet de générer une présentation d’images avec un effet loupe au passage de la souris, sur le modèle notamment du Dock proposé par Apple.

Page de démonstration : http://demo-spip3.ateliers-pierrot.... (documentation livrée avec le plugin).

Page de gadgets SPIP : l’écureuil fou (’spéciale dédicace’ comme on dit chez moi [1]).

Installation

  1. Téléchargez l’archive ’.zip’ de cette page vers le dossier de plugins de votre SPIP
  2. Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html.

Utilisation du modèle

Le dock s’inclus dans la page en appelant le modèle ci-dessous après le tag </html> de la page (c’est à dire tout en bas du fichier HTML).

[(#MODELE{noisette_euDock} ... options ... )]

Il nécessite pour fonctionner que vos squelettes définissent, en dehors de l’inclusion du modèle, un objet du DOM portant l’ID précisé dans la valeur de l’option « div_id », qui vaut « eudock » par défaut [2].

<div id="eudock"> </div>

Voici la liste des principales options du modèle (les options de sélection des objets sont développées dans le paragraphe suivant) :

  • « div_id=... » (valeur par défaut « eudock ») : le DOM-ID du bloc où sera présenté le dock (le bloc doit être inclus dans vos squelettes - cf. cadre ci-dessus)
  • « max_image=... » (10 par défaut) : le nombre maximum d’images affichées
  • « style=... » (pas de valeur par défaut) : les styles CSS qui seront appliqués aux titres des images
  • « offset=... » (par défaut 0) : une valeur de décentrage qui sera appliqué au dock [3]
  • « image_si_vide= oui / non » (non par défaut) : doit-on présenter une image de remplacement si l’objet ne possède pas de logo
  • « image_defaut=... » (par défaut : « img/ecureuil_transparent.png » - l’écureuil SPIP) : chemin vers l’image qui sera utilisée pour les fichiers absents si l’option ci-dessus est activée
  • « alpha » (par défaut 40) : la couche alpha qui sera appliquée sur les vignettes
  • « taille » (par défaut 200x200px maximum) : la taille de retaille des images en version large (lorsque la souris est dessus)
  • « taille_vignette » (par défaut 100x100px maximum) : la taille de retaille des vignettes (images à l’affichage).

À noter enfin que vous pouvez éditer nombre d’options dans le squelette du modèle (en en faisant une copie par exemple) et notamment les alignements des images, le choix des logos, leur redimenssionnement etc.

Sélection des images présentées

Le plugin peut générer un aperçu de tous les logos de SPIP ainsi que de tous les documents portant une extension image (png, gif ou jpg). La mécanique de sélection peut paraître complexe mais elle est en fait ’SPIP-intuitive’ ... Voici son fonctionnement :

L’option « type_objet »

C’est cette option qui choisi le type d’objets qui sera affiché. Elle peut prendre les valeurs suivantes :
-  ’logos_articles’ (sa valeur par défaut),
-  ’logos_rubriques’,
-  ’logos_breves’,
-  ’logos_sites’,
-  ’logos_auteurs’,
-  ’logos_mots’,
-  ’documents_articles’,
-  ’documents_rubriques’.

Ces valeurs correspondent, intuitivement, aux logos des différents objets éditoriaux de SPIP ou aux documents des articles ou rubriques, à condition que ceux-ci soient des images (typiquement les documents présents dans le portfolio des objets concernés).

Le « top-level »

Par défaut, le plugin bouclera sur toutes les rubriques depuis la racine de SPIP (cela équivaut à une boucle sur tous les secteurs). Vous pouvez cependant, c’est même conseillé pour limiter les tours de boucle, spécifier une liste d’identifiants pour chaque type d’objet ...

Cette liste doit être déclarée comme un tableau PHP dans SPIP, en utilisant la balise « #ARRAY ». Pour rappel, cette balise nécessite de définir les clés ET les valeurs du tableau : #ARRAY cle1 , valeur1 , cle2 , valeur2 , ... (plus d’informations sur « spip.net » : balise ARRAY).

Pour boucler sur les rubriques 1, 2 et 5 par exemple, nous devons écrire :

#ARRAY{0,1,1,2,2,5}
// équivalent PHP :
array( 
    0=> 1,
    1=> 2,
    2=> 5,
 );
// option à passer au modèle 'noisette_euDock' :
{rubriques=#ARRAY{0,1,1,2,2,5}}

De la même façon, il est possible de passer au modèle des listes d’identifiants pour tous les objets SPIP ...

Exemple de squelette

Voici ci-dessous le squelette complet d’une page (vide !) sur le modèle de la distribution de SPIP incluant un bloc « euDock ». Le bloc porte l’identifiant « mon_bloc » dont les styles CSS sont définit en en-tête et le dock est créé en appelant le modèle « noisette_euDock » en fin de fichier avec un ensemble d’options.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
<title>#NOM_SITE_SPIP|textebrut</title>
<INCLURE{fond=inc-head}>

<style type="text/css">
#mon_bloc{ margin: 1em 0; }
</style>

</head>
<body class="page_sommaire">
<div id="page">
	<INCLURE{fond=inc-entete}>
	<div class="hfeed" id="conteneur">
		<div id="contenu">
[(#REM)
    Le bloc portant l'ID passé dans l'appel du modèle
    OBLIGATOIRE !
]
			<div id="mon_bloc"> </div>
[(#REM)     ]
		</div>
	</div>
	<div id="navigation">
	<INCLURE{fond=inc-rubriques}>
    </div>
	<INCLURE{fond=inc-pied}{skel=#SQUELETTE}>

</div>
</body>
</html>
[(#REM)

    Appel du modèle "noisette_euDock" APRES le tag </html>
    avec différentes options

][(#MODELE{noisette_euDock}
	{div_id=mon_bloc}
	{max_image=4}
	{type_objet=logos_rubriques}
	{rubriques=#ARRAY{0,1,1,2,2,5}}
	{alpha=80}
	{taille=300}
	{taille_vignette=150}
	{image_si_vide=oui}
	{image_defaut=img/mon_image.png}
	{offset=20}
	{style=font-weight:bold;text-align:center;font-size:0.9em;}
)]

Conditions d’utilisation

Ce plugin est une adaptation pour SPIP du script JS « euDock » créé par Parodi (Pier...) Eugenio (eudock@libero.it). Il est distribué sous licence libre LGPL. Pour plus d’informations, reportez-vous au site eudock.jules.it.

Notes

[1Le neuf-trois (ndlr).

[2Vous pouvez d’ailleurs définir des styles CSS pour le bloc concerné dans vos personnalisations, soit par défaut « #eudock ».

[3La valeur de l’offset peut permettre de régler certains problèmes d’affichages des images, notamment lors d’héritage de styles entre blocs.

18/12/2010 - Le plugin passe en version 1.2

Cette nouvelle version propose l’ensemble des options présentées dans cette page et la mise en place des modèles de boucles pour tous les objets SPIP. Ces options et modèles n’étaient pas disponibles dans les versions précédentes.

Discussion

12 discussions

  • 2

    Ce plugin a l’air sympa !

    Je voudrais l’essayer sur un site fait avec zpip.

    Je me demande comment faire pour l’appel du modèle « noisette_euDock » APRES le tag </html>

    Quelqu’un pourrait-il m’éclairer ?

    Merci d’avance !

    • Salut,

      A priori tout est dans la doc ci-dessus, mais je conviens qu’elle n’est pas très claire ...

      Le mieux serait que tu expliques les images que tu veux lister et je posterai le tag adéquat ok ?

      @+
      Piwi

    • A priori, je dirais qu’il faut insérer le modèle dans le fichier structure.html (recopier le fichier du plugin dans ton répertoire squelettes/ )
      en bas après < /html >

      Cela fonctionne pour un site en SPIP 2 chez moi.

      Par contre cela ne fonctionne sur un site en SPIP3 : rien ne s’affiche.

      Mon inclusion :
      [(#MODELE{noisette_euDock, div_id=eudock, max_image=15, type_objet=logos_sites, alpha=40, taille=200, taille_vignette=100, image_si_vide=non, offset=0, style=font-weight:bold;text-align:center;font-size:0.9em;})]

      Comment restreindre l’affichage aux sites liés à un mot clé ? Je ne comprends pas l’histoire des ARRAYS.

      Est-ce qu’il faut décommenter aussi la section SITES dans le fichier noisette_euDock.html ?

      merci

      dd

    Répondre à ce message

  • Bonjour,

    je souhaite réaliser un menu à la manière d’un dock avec rétrécissement des images. Voici l’exemple : http://www.peugeot.fr/

    Le plugin dock peut-il être adapté pour faire la même chose ou faut-il intégrer un autre plugin javascript ?

    Merci d’avance

    Répondre à ce message

  • 1

    J’ai une erreur dans les logs :

    [error] File does not exist : /srv/d_site/www/www.site.com/htdocs/_DIR_EUDOCK,

    le code source de la page indique en effet :

    <script type="text/javascript"><!&mdash;
    euEnv.imageBasePath=«<small class="fine d-inline"> </small>_DIR_EUDOCK/javascript/<small class="fine d-inline"> </small>»<small class="fine d-inline"> </small>;
    <p>je vois pas dans quel fichier corriger ceci.</p>
    <p>dd</p>

    Répondre à ce message

  • 3

    Bonjour,

    j’ai un problème de style.

    le code source de ma page montre :

    <div style="z-index: 1000; position: absolute; border: 0px solid black; cursor: pointer; left: 395.5px; top: 872px; width: 648px; height: 75px;" id="euDock_0">
    
    <div style="z-index: 1000; position: absolute; border: 0px solid black;" id="euDock_0_bar"></div>

    et j’ai beau modifier ma css pour changer les valeurs left et width des 2 div eudock (style de base) et euDock_0

    mon bloc se cale toujours à droite de la fenêtre et déborde donc de ma div page

    quelle valeur faut-il changer ?

    merci
    dd

    • Salut DD, je viens de voir ton message (il date un peu ...), désolé.
      Problème résolu ou bien ?

    • non, non toujours pas réglé

      dans ma feuille de style j’ai :

      #euDock {margin:2em 0;clear:both; width: 950px;}

      même en mettant des class « nettoyeur » cela chevauche le texte du dessus

    • je me réponds : j’ai réussi en ajoutant un height=xxpx à l’id euDock

    Répondre à ce message

  • 3

    Bonjour

    Magnifique, de l’ergonomie à la MAC pour SPIP.

    Je souhaiterais vivement l’utiliser pour le mettre à disposition de nos utilisateurs administrateurs de sites.

    Malheureusement, avec la technique des ID appliquée comme suit {rubriques=#ARRAY{0,1,1,2,2,5}} cela réduit considérablement l’usage.

    Il serait beaucoup plus souple que les différents objets éditoriaux (en particulier articles, rubriques et brèves) de SPIP soient identifiés par un mot-clé (par exemple le mot-clé « eudock ») qui serait associé aux objets éditoriaux choisis.

    Pourriez-vous l’envisager ?

    Bien cordialement

    FDG

    • Bonsoir,

      Je suis assez d’accord sur le fait que la sélection des IDs n’est pas souple. Par contre, il me paraitrait incohérent d’intégrer au plugin une sélection par mot-clé, pour deux raisons :
      -  les mots-clés ne sont pas fait pour ça (par défaut dans SPIP en tout cas),
      -  il s’agit ici d’un cas très particulier.

      Rien ne vous empêche cependant de revoir le code du modèle en utilisant une sélection par mot-clé. Je vous renvoie aux nombreux articles sur le sujet, et notamment le plus simple http://www.spip-contrib.net/Affiche..., et peux vous donner un coup de main sur ce point si vous bloquez.

      On pourra par la suite discuter de son intégration au plugin si vous trouvez une solution pérenne.

      ++ PW

    • Bonjour,

      Je sollicite en effet votre aide, car en suivant Balou du 21 décembre 2010 et votre réponse y relative j’ai testé ceci :

      <style type="text/css">
           #mon_bloc{ margin: 1em 0; }
      </style>
      ...
      
      #SET{tab_eudock, #ARRAY}
      <BOUCLE_eudock_rubriques(RUBRIQUES) {id_secteur!==#RACINE_SPECIALISEE}{type_mot=squelette_habillage}{titre_mot=eudock_rubriques}{par num titre} {!par date}>
           #SET{tab_eudock, #GET{tab_eudock}|push{#ID_RUBRIQUE}}
      </BOUCLE_eudock_rubriques>
      ...
      </html>
      [(#REM)
              Appel du modèle "noisette_euDock" APRES le tag </html>
              avec différentes options
          ][(#MODELE{noisette_euDock}
                  {div_id=mon_bloc}
                  {max_image=8}
                  {type_objet=logos_rubriques}
                  {rubrique=#GET{tab_eudock}}
                  {alpha=20}
                  {taille=300}
                  {taille_vignette=150}
                  {image_si_vide=oui}
                  {image_defaut=img/mon_image.png}
                  {offset=20}
                  {style=font-weight:bold;text-align:center;font-size:1.2em;}
          )]

      Cela ne fonctionne pas alors que cela fonctionne parfaitement avec

      {rubriques=#ARRAY{0,96}}

      par exemple.

      Placer l’instruction

      #SET{tab_eudock, #ARRAY}

      avant ou après la boucle RUBRIQUE ne change rien

      Avez-vous une solution

      Cordialement

      FDG

      Ma boucle RUBRIQUE fonctionne bien et donne bien ID=96, ce qui correspond à la rubrique à laquelle j’ai associé le mot-clé « eudock_rubriques »

    • Bonjour PieroWbmstr,

      Avez-vous une idée pour surmonter le problème que je présente dans mon message du 21 avril à 12:37 ?

      Bien cordialement

      FDG

    Répondre à ce message

  • 2
    PIero d’Houin

    Bonjour PieroWbmstr.

    Merci pour ce plugin pratique, très esthétique et tendance.
    Je l’ai implanté sur le site http://emploi.spf75.org (SPIP 2.1.8) que j’ai créé sans problème dans le fichier rubrique.html

    Mais maintenant toutes les rubriques du site affichent les images de la rubrique 53.
    Je souhaiterai limiter l’affiche des images uniquement à cette rubrique 53 et que le Eudock n’apparaisse pas dans les autres rubriques.

    Faut-il créer une page rubrique53.html ou non ?
    Je ne sais pas comment faire ; peux-tu m’aider ? merci d’avance.

    Cordialement
    Piero d’Houin

    PS : Voici le réglage que j’ai fait :
    [(#MODELEnoisette_euDock
    max_image=#ENVlimit,10
    type_objet=#ENVtype,documents_rubriques
    rubriques=#ARRAY0,53
    image_si_vide=#ENVvide,non
    offset=0
    div_id=eudock
    style=font-weight:bold ;text-align:center ;font-size:0.9em ;
    bar=[(#ENVbar|==oui| ?oui,non)]
    )]

    • Bonjour Pierre,
      content que le plugin te plaise ;-)

      Tu as deux solutions :
      -  soit tu mets tes réglages ci-dessus avant le tag fermant la boucle globale de la page (du genre « </BOUCLE_principale> » dans les squelettes de la distribution) s’il se trouve en fin de page et tu ajoutes une condition :

      [(#ID_RUBRIQUE|=={53}|oui)
      	[(#MODELEnoisette_euDock
      	...
      	)]
      ]


      -  soit tu fais effectivement un squelette propre à la rubrique 53.

      Je pense que cette deuxième solution est la mieux, cela évitera de surcharger les squelettes et les éventuelles erreurs de compilation.

      ++ PiWi

    • PIero d’Houin

      Merci PieroWbmstr de cette réponse rapide.

      Les deux solutions fonctionnent.

      J’ai finalement choisi la deuxième : création d’une rubrique spécifique : rubrique-53.html.

      Il serait peut-être utile suggérer cette solution de limiter l’apparition du Eudock dans une rubrique spécifique de SPIP dans ton mode d’emploi.

      Mais bon, ces commentaires en tiennent lieu.

      Bravo encore et merci.
      Cordialement
      Piero

    Répondre à ce message

  • 1
    jcdeloffre

    Vraiment génial ce plugin. merci
    en lisant puis relisant et lisant encore l’exemple de squelette j’ai enfin compris comment personnaliser dans mon squelette. Pour que la définition d’un id fonctionne il faut que le modèle soit après le tag /html
    (pourtant c’est écrit en gras dans l’exemple !)
    dernière petite question, quelles sont les valeurs que peuvent prendre « offset ».
    merci encore et bravo pour ce travail.

    • Salut et merci.
      Bon, c’était peut-être pas écrit assez gros ;-)

      L’offset est exprimé en pixels (de mémoire) et peut prendre n’importe quelle valeur, positive ou négative. Il faut tâtonner pour trouver la valeur qui va bien ... (en n’oubliant pas si nécessaire de recalculer - cliquer deux fois de suite sur ’Recalculer la page’ - et même parfois de vider le cache navigateur).

      ++

    Répondre à ce message

  • Bonjour PieroWbmstr,
    Je tiens dans ces phrases seulement à te féliciter.
    Merci pour tes plugins que je les utilises souvent, Vous êtes vraiment un spipien dynamique et je tiens a te féliciter, Vous aidez vraiment a l’amélioration de spip, et je sais bien que ta générosité te conduira surement vers une évolution professionnel, parceque c’est une loi de dieu que tout les spipiens doivent la savoir (Tant que on partage notre savoir : dieu nous donne plus de savoir, et on évolue et je crois que c’est une règle dans tout les domaine de la vie). J’espère pour vous et pour tout ceux qui améliore spip l’évolution dans le domaine de la programmation et dans la vie.

    Merci à tout ceux qui améliore spip.

    Répondre à ce message

  • 1

    Bonjour,

    superbe la nouvelle version,
    mais j’ai tout de même une question. Comment passer au mot clef « Rubriques » les valeurs d’un tableau (#ARRAY) rempli dynamiquement par une boucle (Voir exemple ci-dessous).

    #SET{tab_eudock, #ARRAY}
    
    <BOUCLE_eudock_raccourci (RUBRIQUES){id_rubrique}>
    	<B_eudock_articles_racines>
    	<BOUCLE_eudock_articles_racines(ARTICLES){id_rubrique}{par num titre} {!par date}>
    		#SET{tab_eudock, #GET{tab_eudock}|push{#ID_ARTICLE}}
    	</BOUCLE_eudock_articles_racines>
    	</B_eudock_articles_racines>
    </BOUCLE_eudock_raccourci>
    </B_eudock_raccourci>
    
    </html>
    
    [(#MODELE{noisette_euDock}
    				{rubriques= !!!!!!!! }
    				{offset=0}
    				{max_image=14} 
    				{bar=oui} 
    				{image_si_vide=oui} 
    				{type_objet=logos_articles}
    				{style=font-weight:bold;text-align:center;font-size:0.9em;} )]

    Merci d’avance

    Répondre à ce message

  • 3
    jcdeloffre

    à l’instar de ton plugin « Javascript Scroller », quelle serait la boucle pour afficher les logos des rubriques ? j’ai fait quelques essais sans résultat. merci !

    • Fais une copie du modèle ’noisette_euDock.html’ et remplace simplement les boucles :

      <B_rubriques>
      <BOUCLE_rubriques(RUBRIQUES) {id_rubrique=#ENV{rubrique}} {par titre}>
      	<BOUCLE_articles_rubriques(ARTICLES) {id_rubrique=#ID_RUBRIQUE} {par titre}>
      ...

      par de simples boucles sur les rubriques :

      <B_rubriques>
      <BOUCLE_rubriques(RUBRIQUES) {tout} {par titre}>
      ...

      Il faut aussi, bien sûr, changer les #LOGO_ARTICLE en #LOGO_RUBRIQUE ...

      Et le tour est joué !

    • Salut, pour info, le plugin propose maintenant d’afficher tous les types des logos ou de documents du site (depuis sa version 1.2 toute neuve) ... si ça peut t’aider

    • jcdeloffre

      merci ! j’essaie tout de suite.

    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