5 novembre : update du fichier qui comportait une erreur dans le code. Réparée maintenant.
Nous allons pour cet exemple procéder en trois temps :
créer un bloc personnalisé
le rendre disponible dans la page gabarit grâce au xml
l’activer dans l’administration de magusine
0) Définissons la demande
Nous voulons pour cet exemple disposer d’un diaporama dans la page sommaire. Pour des raisons de facilité, nous voulons que les images de ce diaporama proviennent d’un article spip, auquel nous voulons pouvoir ajouter autant d’images que nécéssaire. Comme ça n’importe quel administrateur peut modifier ces images sans le recours au ftp. Les images doivent pouvoir se mettre à la taille du corps ou des contextes selon les cas.
1) Créer le bloc
Voici le code du bloc
<!-- on recupere l'article dont l'id est fourni par la page gabarit de magusine grace à la variable #env{parametre} -->
<BOUCLE_getart(ARTICLES){id_article=#ENV{parametre}}>
<!-- ici on definit la largeur en fonction de l'endroit ou est le bloc : le corps ou les contextes -->
[(#ENV{conteneur}|=={1}|?{' ',''})#SET{largeur,#LARGEUR_CONTEXTE1}]
[(#ENV{conteneur}|=={2}|?{' ',''})#SET{largeur,#LARGEUR_CONTEXTE2}]
[(#ENV{conteneur}|=={3}|?{' ',''})#SET{largeur,#LARGEUR_CORPS}]
<!-- ici on definit le diaporama en javascript en jquery avec le plugin innerfade -->
<script type="text/javascript">
$(document).ready(function(){
$('#docs-conteneur-diaporama').innerfade({
speed: 'slow',
timeout: 6000,
type: 'sequence',
containerheight: 'auto'
});
});
</script>
<!-- le code du bloc lui-meme -->
<div id="docs-diaporama" class="listagebloc">
<h2>[(#TITRE|supprimer_numero)]</h2>
<ul class="listageconteneur" id="docs-conteneur-diaporama">
<!-- prendre tous les documents image de l'article et les lister dans les li -->
<!-- si il y a un descriptif, l'utiliser comme lien -->
<BOUCLE_lesdocs(DOCUMENTS){id_article}{extension==gif|png|jpg}>
<li>[<a href="(#DESCRIPTIF**)">]<img src="[(#FICHIER|image_reduire{#GET{largeur},0}|extraire_attribut{"src"})]" alt="[(#TITRE|entites_html)]" />[(#DESCRIPTIF|!={''}|?{' ',''})</a>]</li></BOUCLE_lesdocs>
</ul>
</div></BOUCLE_getart>
Pour ceux qui n’en ont jamais vu, c’est un peu beaucoup, il y a là du spip, du javascript, du "magusine", le tout mixé. le code est annoté pour ceux qui s’y intéresse.
Il faut déposer ce bloc dans le dossier "pages-custom" à la racine du site. Au besoin, le créer.
on lui donnera ici le nom de "sommaire-freediaporama.html"
2) Rendre le bloc disponible dans les gabarits
Dans le dossier pages-custom on crée au besoin un dossier "gabarits". Dans ce dossier, creer un fichier "ajout-sommaire.xml" et y mettre ce code
<?xml version="1.0" encoding="utf-8"?>
<gabarit type="defaut">
<bloc statut="2" paramdescr="id_de_l'article" param="champ" paramdefaut="">sommaire-cooldiaporama</bloc>
</gabarit>
La ligne indique que l’on dispose d’un bloc appelé sommaire-cooldiaporama, qui correspond au fichier "sommaire-cooldiaporama.html", et que ce bloc disposera dans la page gabarit d’un champ dans lequel on demande l’id d’un article.
Si le fichier "ajout-sommaire.xml" existe déjà, on ajoutera juste dans ce fichier la troisième ligne du code ci-dessus, évidemment. On peut ajouter ce bloc dans n’importe quel gabarit en créant le fichier ajout-nomdugabarit.xml aussi.
3) Uploader le tout
Si ce n’est déjà fait, uploadez vos fichiers.
A la racine du site, le dossier "pages-custom" qui contient :
le fichier du bloc "sommaire-cooldiaporama.html"
le fichier javascript "jquery.innerfade.js" (à prendre dans le zip de cet article ou sur le site de jquery dans les add-ons)
Le dossier "gabarits" avec à l’intérieur :
le fichier "ajout-sommaire.xml" et d’autres si vous voulez disposer ce bloc ailleurs.
4) Activer le bloc et le configurer
Il vous reste à aller dans la page gabarit du plugin sur votre site, de visualiser le bloc cool diaporama et d’entrer dans le champ qu’il contient l’id de l’article qui contient les images à montrer. Validez, vérifiez en ligne.
Le javascript change d’image toutes les 6 secondes, si vous voulez un timing plus lent ou plus rapide, il faudra le changer dans le fichier html à la lign "timeout : 6000,", 6000 signifiant 6 secondes, faites le calcul vous même.
