Un dock pour SPIP

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.