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.

Footnotes

[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

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

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

    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