Vader[FR] : ce n'est pas un blog, c'est un Sith

Script générique des diaporamas AJAX

Vader[FR] — 2014-10-18T19:53:27Z

Ce script est le même pour le diaporama de la page de garde et pour le diaporama de la galerie.

Il lit des paramètres dans la page (numéro de rubrique à parcourir, nombre de niveaux de sous-rubriques à chercher, langue) et envoie la requête au serveur, puis insère dans la page l'image, le titre et le texte de chaque élément du diaporama en l'adaptant à la taille de la fenêtre, avant de demander l'élément suivant.

En effet, les éléments de ce diaporama sont des articles :

le logo de l'article est une image particulière, que l'on peut aisément différencier du texte, afin de lui accorder un traitement différent.
un article existe dans une certaine langue, ce qui permet d'afficher un diaporama différent selon la langue souhaitée
un article avec texte, titre et logo est facile à ajouter, modifier ou enlever dans l'espace privé de SPIP.

Lancement des fonctions JavaScript

Comme on peut le voir dans l'aperçu Firebug de la structure de la page de garde, il y a dans chaque page, pour l'évènement onLoad (= "au chargement") de l'élément HTML body, appel à une fonction unique et générique "AuChargement".

function AuChargement(){ pisteIE(); cachejs(); setTimeout("charger_diapo()",1000); // 1 seconde traitercadres(); traiterimages();
}

Cette fonction unique en invoque d'autres, qui, selon les éléments présents ou non dans la page, feront quelque chose :

pisteIE va, comme son nom l'indique, rediriger les utilisateurs du navigateur Internet Explorer vers une page d'avertissement, indiquant les déficiences de Microsoft Internet Explorer quand aux éléments pourtant normalisés W3C de la page.
- Un lien "continuer quand même" permet aux utilisateurs d'Internet Explorer de poursuivre la navigation, ils ont été prévenus.
- Un système de cookie enregistre le fait que l'utilisateur est prévenu, cela évite de faire la redirection à chaque ouverture de page.
cachejs sert, comme son nom l'indique, à cacher le message selon lequel JavaScript est désactivé sur le navigateur.
setTimeout("charger_diapo()",1000); lance la fonction charger_diapo() au bout d'une seconde.
- C'est cette fonction qui ira chercher les paramètres du diaporama dans la page et enverra la requête au serveur pour le premier élément.
traitercadres et traiterimages vont redimensionner les cadres et images qui en ont besoin.

Lancement du diaporama

function charger_diapo(){ if (this.document.getElementById('diapo')!=null){

Cette fonction ne s'exécutera que si un élément "diapo" est présent dans la page

 if (this.document.getElementById('nrubrique')!=null){ nrubrique=this.document.getElementById('nrubrique').value; }else{ nrubrique=0; }

Pour chaque paramètre du diaporama, on vérifie sa présence, et en cas d'absence on utilise une valeur par défaut

Autres paramètres

 if (this.document.getElementById('mindepth')!=null){ mindepth=this.document.getElementById('mindepth').value; }else{ mindepth=0; } if (this.document.getElementById('maxdepth')!=null){ maxdepth=this.document.getElementById('maxdepth').value; }else{ maxdepth=1; } if (this.document.getElementById('lang')!=null){ lang=this.document.getElementById('lang').value; }else{ lang="fr"; }

Puis on initialise quelques valeurs avant d'appeler la fonction qui créera et enverra la requête.

 var url_image=null; var texte_diapo=null; var titre_diapo=null; requete_requete_image_diapo('charger_diapo.php?id=0&rub='+nrubrique+'&min='+mindepth+'&max='+maxdepth+'&lang='+lang); }
}

Création de la requête XMLHTTP

Le script javaScript défini quelque variables globales, que plusieurs fonctions utiliseront.

var diapo = 0;
var prochain=0;
var nrubrique=0;
var mindepth=0;
var maxdepth=1;
var delai=5000;

Avant de pouvoir créer la requête XMLHTTP, il faut un objet de type xmlhttprequest pour y mettre les paramètres, l'envoyer au serveur et recevoir sa réponse.
En fonction du navigateur, on utilisera plusieurs méthodes.

Création de l'objet xmlhttprequest

function get_requete_image_diapo(){ var requete_image_diapo = null; if (window.XMLHttpRequest){ // Firefox requete_image_diapo=new XMLHttpRequest(); }else if (window.ActiveXObject){ // IE try{ requete_image_diapo=new ActiveXObject("Msxml12.XMLHTTP"); }catch(e){ try{ requete_image_diapo=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e1){ requete_image_diapo=null; } } }else{ // non supporté alert("Votre navigateur ne supporte pas les XMLHTTPRequest."); /* + redirection vers page navigs.html */ } return requete_image_diapo;
}

La fonction précédente, qui créé l'objet xmlhttprequest, est appelée par la fonction de création et d'envoi de la requête que voici :

function requete_requete_image_diapo(url){

	requete_image_diapo=get_requete_image_diapo(); if (!requete_image_diapo){ alert("Votre navigateur ne peut créer de requête AJAX."); /* + redirectiuon vers page navigs.html */ return; }

On récupère l'objet xmlhttprequest, puis, si celui-ci n'a pu être créé et que par conséquent la variable requete_image_diapo n'existe pas - le ! signifiant la négation - on affiche un message et l'on quitte la fonction.
Sinon, on poursuit

	//alert("envoi de la requete"); requete_image_diapo.onreadystatechange=function(){traitementReponse_requete_image_diapo(requete_image_diapo)} requete_image_diapo.open("GET",url,true); requete_image_diapo.send(null);
}

requete_image_diapo.onreadystatechange= définit la fonction function(){ ... } de traitement de la réponse, quand la requête aura "changé d'état". Puis on ouvre l'url du script du serveur auquel il faut envoyer la requête, et qui la traitera pour envoyer la réponse selon les paramètres indiqués, et on y envoie la requête.

`Modification de la page affichée`

function traitementReponse_requete_image_diapo(requete_image_diapo){ var contenu; var erreur=0; if (requete_image_diapo.readyState==4){


Si la requête est dans l'état "4", c'est à dire que l'on a reçu la réponse du serveur,
 //alert("reception de la reponse : traitement"); contenu=requete_image_diapo.responseXML;
On récupère le document XML constituant la réponse du serveur.
 if (contenu.getElementsByTagName("image")[0].firstChild.nodeValue!=null){ url_image=contenu.getElementsByTagName("image")[0].firstChild.nodeValue; }else{ erreur=1; }
On vérifie la présence de différents éléments de réponse, en préparant des valeurs par défaut si besoin.
 contenu est le document XML de réponse. Celui-ci est organisé selon une arborescence de balises pour les divers éléments et leurs valeurs.
 on utilise la fonction getElementsByTagName pour adresser ces balises par leur nom
 cette fonction renvoie un tableau de balises correspondantes, dont on s'intéresse au premier élément, à la case 0, qui est la première case d'un tableau javaScript.
 Une fois récupéré la balise souhaitée, on récupère la valeur du nœud (nodeValue).
Autres éléments
 if (contenu.getElementsByTagName("url_article")[0].firstChild.nodeValue!=null){ url_article=contenu.getElementsByTagName("url_article")[0].firstChild.nodeValue; }else{ erreur=1; } if (contenu.getElementsByTagName("titre")[0].firstChild!=null){ if (contenu.getElementsByTagName("titre")[0].firstChild.nodeValue!=null){ titre_diapo=contenu.getElementsByTagName("titre")[0].firstChild.nodeValue; }else{ erreur=1; } }else{ titre_diapo=""; } //alert("titre="+contenu.getElementsByTagName("titre")[0].textContent); // y'a aussi data, wholeText...nodeValue... if (contenu.getElementsByTagName("texte")[0].firstChild!=null){ if (contenu.getElementsByTagName("texte")[0].firstChild.nodeValue!=null){ texte_diapo=contenu.getElementsByTagName("texte")[0].firstChild.nodeValue; if ((texte_diapo==null)||(texte_diapo=="")){ texte_diapo="Sans titre"; } }else{ texte_diapo=""; } }else{ texte_diapo=""; }
De même, on récupère plusieurs paramètres toujours présents, dont la prochaine image preload que l'on va commencer à charger comme arrière plan à taille nulle pour accélérer son chargement lorsque ce sera son tour.
 prochain=contenu.getElementsByTagName("prochain")[0].firstChild.nodeValue; // delai=contenu.getElementsByTagName("delai")[0].firstChild.nodeValue; preload=contenu.getElementsByTagName("preload")[0].firstChild.nodeValue; //alert("texte="+contenu.getElementsByTagName("texte_diapo")[0].firstChild.nodeValue);
Pour comprendre à quoi correspondent ces éléments, voir l'onglet détaillant le script PHP.
Et si tout va bien (variable erreur toujours à zéro)
	if (erreur==0){	
On essaie de récupérer le bloc "image" du diaporama afin de pouvoir y intégrer l'image indiquée dans le document XML.

Dans la même structure conditionnelle, l'on s'assure qu'il y a bien une image à y intégrer (l'url de l'image fournie dans la réponse XML est non nulle).
 if ((this.document.getElementById('diapo_image')!=null)&&(url_image!="")){ //alert ("on a le div image");
Si le bloc image existe, on le référence afin de pouvoir le modifier, en utilisant la fonction getElementById qui renvoie un élément unique, puis on y intègre un lien vers l'article sous la forme d'une image qui est son logo avec la valeur innerHTML de l'élément, qui correspond au code HTML que l'élément contient.
 var div_image=this.document.getElementById('diapo_image'); // le div div_image.innerHTML="";
L'image du diaporama étant dans son bloc, il est peut être utile à présent de la redimensionner afin de l'adapter aux dimensions dudit bloc.
On récupère donc les dimensions du bloc, par offsetHeight et offsetWidth, puis les dimensions réelles de l'image, par les valeurs "hauteur" et "largeur" fournies dans la réponse (voir script PHP).
 var h_div=this.document.getElementById('diapo_image').offsetHeight; var l_div=this.document.getElementById('diapo_image').offsetWidth; var h_img=parseFloat(contenu.getElementsByTagName("hauteur")[0].firstChild.nodeValue); var l_img=parseFloat(contenu.getElementsByTagName("largeur")[0].firstChild.nodeValue); //alert("traitement d'une image de "+h_img+" par "+l_img);
Selon la différence de dimension entre le bloc et l'image, il faudra la réduire prioritairement en largeur, en hauteur, ou les deux, et si l'image n'est pas trop grande, on cherchera à la centrer.
Le reste du script de traitement devrait être aisément compréhensible, d'autant que les commentaires permettent de suivre les conditions vérifiées et le traitement effectué.

Le principe reste toujours le même :
 si une dimension de l'image est plus grande que celle du bloc, alors
 calculer la proportion entre les deux afin de pouvoir réduire l'image
 une fois la bonne proportion de réduction trouvée, calculer les marges entre les dimensions du bloc et celles de l'image réduite, pour centrer l'image.
 if (l_img>l_div){ var reduction=l_img/l_div; // la proportion de réduction, qui sera la meme en hauteur et largeur // si h_img/reduction>h_div alors if ((h_img/reduction)>h_div){ // image plus large et en réduite, plus haute que le div // image plus HAUTE que large // réduction_h = h_img/h_div var reduction_h=h_img/h_div; // appliquer reduction_h en hauteur et largeur var nh=h_img/reduction_h; var nl=l_img/reduction_h; // pour être au milieu
Une fois l'image réduite, on calcule la marge, puis on applique réduction et marge de centrage.

De même que pour le bloc diapo, on utilise la fonction getElementById pour référencer le bloc, puis, comme pour la réponse XML, getElementsByTagName pour récupérer le tableau des images (balise  contenues, la première (et seule) étant à la case 0.

Puis l'on définit les attributs HTML de cette balise  pour retailler l'image, et lui ajouter un style personnalisé contenant la marge de centrage, ainsi que la prochaine image preload comme arrière-plan de taille nulle pour accélérer son chargement lorsque ce sera son tour.
 var margel=(l_div-nl)/2; // si la marge est > à x px, calculer la différence et réduire div image pour agrandir div texte image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("height",nh); image.setAttribute("width",nl); image.setAttribute("style","margin-left:"+margel+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;");
Autres cas
 // sinon }else{ // image plus large mais pas plus haute que le div // image plus LARGE que haute // appliquer réduction en largeur et hauteur var nh=h_img/reduction; var nl=l_img/reduction; // pour être au milieu, il faut que margeh=()h_div-nh/2 var margeh=(h_div-nh)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("height",nh); image.setAttribute("width",nl); image.setAttribute("style","margin-top:"+margeh+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); //finsi } // fins }else{ // image pas plus large que le div if (h_img>h_div){ // div assez large mais pas assez haut // réduction_h = h_img/h_div var reduction_h=h_img/h_div; // appliquer reduction_h en hauteur et largeur var nh=h_img/reduction_h; var nl=l_img/reduction_h; // pour être au milieu, il faut que margel=()545-nl/2 var margel=(l_div-nl)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("style","margin-left:"+margel+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); image.setAttribute("height",nh); image.setAttribute("width",nl); }else{ // image pas trop grande // mais cadre peut-être trop grand var margeh=(h_div-h_img)/2; var margel=(l_div-l_img)/2; image=this.document.getElementById('diapo_image').getElementsByTagName('img')[0]; image.setAttribute("style","margin-left:"+margel+"px;margin-top:"+margeh+"px; background-image:url(\""+preload+"\"); background-size: 0px 0px;"); } } }else{ //alert("div image non trouvé"); }
Puis on fait la même chose pour le texte et le titre
 if (this.document.getElementById('diapo_texte')!=null){ var div_texte=this.document.getElementById('diapo_texte'); // le div //alert ("on a le div texte"); div_texte.innerHTML=""+titre_diapo+""+texte_diapo+"
"; }else{ //alert("div texte non trouvé"); } }
...et on demande le prochain élément, si bien sûr cela a du sens.

Si le diaporama n'a aucun ou qu'un seul élément, il n'est pas utile d'envoyer d'autre requête, et le script du serveur indiquera que prochain vaut "-1", soit une valeur non valide.
la commande setTimeout( permet de définir un délai avant de demander le prochain élément.
 diapo=prochain; if (prochain!=-1){ //	requete_requete_image_diapo("charger_diapo.php?id="+diapo+"&delai="+delai); setTimeout("requete_requete_image_diapo('charger_diapo.php?id='+diapo+'&rub='+nrubrique+'&min='+mindepth+'&max='+maxdepth+'&lang='+lang)",delai); } }
}

`script PHP`


Le script PHP charger_diapo.php, situé à la racine du serveur web, et appelé comme URL par la fonction charger_diapo et après chaque traitement de réponse, va traiter la requête xmlhttp et envoyer une réponse au format XML.

Dans la mesure où les scripts PHP de SPIP peuvent utiliser des variables de session pour stocker des paramètres, on se connecte à cette session afin de pouvoir récupérer la langue choisie.
On créé l'entête de la réponse avant qu'un autre script, de traitement des accents, ne s'en charge.

le script accents.php contient plusieurs fonctions, dont une utilisée pour transformer les caractères accentués contenus dans la base en leur équivalent en code HTML, permettant un affichage normal quel que soient les encodages de caractère du serveur et du navigateur.
header('content-Type:text/xml,charset=UTF-8');
require "accents.php";
On se connecte à la base de données.
mysql_connect('serveur','utilisateur','mot de passe','MYSQL'); mysql_select_db("nom de la base");
On travaillera sur les tables des rubriques et des articles de SPIP, qui ont généralement un nom commençant par "spip_".
$tablerubriques="spip_rubriques";
$tablearticles="spip_articles";
La requête xmlhttp envoyant ses paramètres dans l'url, par la méthode GET (voir article sur PHP), on récupère les paramètres par la variable globale $_GET, qui est un tableau associatif (les colonnes sont identifiées par nom et non par numéro).
if (isset($_GET["id"])){ $idd=$_GET["id"];
}else{ $idd=0; /* id du diapo en cours, à diviser par total de diapo et prendre le reste , ex si idd = 5 pour 3 photos existantes, alors charger photo 2 */
}
Autres paramètres
if (isset($_GET["delai"])){ $delai=$_GET["delai"]; //echo "delai de $delai secondes
";
}else{ $delai=0;
} if (isset($_GET["rub"])){ $id_rubrique_diapo=$_GET["rub"];
}else{ $id_rubrique_diapo=0; } if (isset($_GET["min"])){ $min_depth=$_GET["min"];
}else{ $min_depth=0; } if (isset($_GET["max"])){ $max_depth=$_GET["max"];
}else{ $max_depth=1; } if (isset($_GET["lang"])){ $_SESSION["lang"]=$_GET["lang"];
}else{ if (isset($_SESSION["languser"])){ $_SESSION["lang"]=$_SESSION["languser"]; } if (!isset($_SESSION["lang"])){ $_SESSION["lang"]="fr"; }
}
Pour la langue, on essaie d'abord de la récupérer par le paramètre fourni lors de la requête et le stocker dans la variable de session "lang", avant de pendre la variable de session "languser" si elle est définie, et enfin, si la variable de session "lang" n'est toujours pas définie, on prend par défaut langue française.

Une fonction de parcourt de rubrique et sous-rubrique est définie, ce qui permet de faire du parcours récursif, lorsque la fonction s'appelle elle-même.

La fonction renverra tous les identifiants de sous-rubriques dans lesquelles on est susceptible de trouver des éléments de diaporama.
function parcourt_rubrik($cur_rubrik,$curdepth,$maxdepth,$mindepth) {
Ces deux paramètres ne pouvant être passés d'un niveau à l'autre de la boucle récursive sans rendre la fonction complexe, on les redéfinit localement à chaque niveau.
	$tablerubriques="spip_rubriques"; $tablearticles="spip_articles";
	$curdepth.=$curdepth+1; $rubs=array(); // le tableau qu'on renverra, contenant dans la case 0 sa taille $reksrub="select id_rubrique from ".$tablerubriques." where id_parent=$cur_rubrik"; $resrub=mysql_query($reksrub); while ($rowrub=mysql_fetch_array($resrub,MYSQL_ASSOC)){ $ssrub=$rowrub["id_rubrique"]; if ($curdepth>=$mindepth){ $rubs[]=$ssrub; } if ($curdepth<$maxdepth){ $rubs=array_merge($rubs,parcourt_rubrik($ssrub,$curdepth,$maxdepth,$mindepth)); } } return $rubs;
}
On créé donc la liste des rubriques en appelant la fonction récursive, en partant de la rubrique fournie en paramètre par la requête xmlhttp.
$liste_rubriques=parcourt_rubrik($id_rubrique_diapo,$min_depth,$max_depth,$min_depth);
Ici, on construit un morceau de la requête SQL, à savoir une partie de la clause conditionnelle WHERE, en ajoutant à un code de base des morceaux de code SQL [1]

On utilise une boucle while (tant que) pour parcourir un tableau dont la taille est variable, en s'arrêtant lorsque l'index atteint le nombre de case contenues dans le tableau, et en incrémentant l'index au fur et à mesure.
$liste_rubrik="(id_rubrique=$id_rubrique_diapo";
$irub=0; while ($irub

Une fois que la partie "liste des rubriques parentes" de la requête des articles que l'on va sélectionner est créée, on l'utilise d'abord dans une requête pour compter les éléments, puis ensuite dans la requête de récupération.
/* requete pour connaître le nombre total de photos pouvant être affichées */ $rek_compt="select count(*) as total from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."'"; // pas de order by pour compter
$res_compt=mysql_query($rek_compt);
$row_total=mysql_fetch_array($res_compt,MYSQL_ASSOC);
$total=$row_total["total"];
 clause SELECT :
 On compte count
 les lignes dans leur globalité count(*)
 dont on stockera le compte dans une colonne nommée "total" as total, plus simple pour la référencer,
 clause FROM
 depuis la table des articles, dont le nom, susceptible de varier, a été mis dans la variable tablearticles
 clause WHERE
 pour les articles faisant partie de la liste des rubriques
 et étant publiés
 et dont la langue est celle déterminée plus tôt et stockée dans la variable de session.
if ($total>0){
Si il y a effectivement plusieurs articles publiés dans les rubriques ciblées et ce dans la langue choisie, alors on va récupérer les deux premiers articles selon un tri définit plus bas.

Le script JavaScript, fournissant toujours un paramètre de numéro de diapo à charger dans la requête xmlhttp, on se base sur ce paramètre pour démarrer la sélection dans la liste des articles disponibles.
Quand au prochain élément de diaporama à charger, c'est soit l'article suivant dans la liste - si l'article en cours n'est pas le dernier de la liste - soit le premier, à savoir le numéro 0 de la liste (tableau des réponses).
	$debut=$idd; // 0 par defaut $par_page=1; if (($idd+1)<$total){ $prochain=$idd+1; }else{ $prochain=0; }
La requête de sélection est la même que celle de comptage, logique puisque l'on travaille sur les mêmes éléments.

Seules les clauses SELECT - car on ne compte pas cette fois - et la clause de tri ORDER - qui était inutile dans une requête de comptage - vont changer

On ajoute aussi une clause LIMIT qui restreint le nombre de lignes de résultat que l'on va finalement traiter.
 clause SELECT : on sélectionne tous les champs *
 clause ORDER BY par date décroissante DESC, et donc par article le plus récent.
 on limite les lignes de résultat à 1, comme vu plus haut  $par_page=1;, et on démarre à la ligne numéro $debut, à savoir $idd, le paramètre de numéro de diapo fourni à l'appel du script par la requête xmlhttp.
	$rek_sel="select * from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."' order by 'date' DESC limit $debut,$par_page "; // order by date DESC $res_sel=mysql_query($rek_sel);
Étant donné que l'on traite des articles, et que l'image cherchée est un logo, il est bon de savoir que sous SPIP, les logos ont un nom particulier :
 type de l'élément SPIP articles, rubriques, sites
 on
 numéro dudit élément
 les logos étant stockés à la racine du dossier IMG, peu importe leur extension (jpg, png, gif...)
	$imagebase="IMG/arton";
Pour chaque ligne de résultat renvoyée (en fait il n'y en a qu'une)
	while ($row_sel=mysql_fetch_array($res_sel,MYSQL_ASSOC)){
On récupère la valeur de chaque champ dont on a besoin.

Les champs de type texte (titre et texte) passent par plusieurs filtres pour traiter des caractères spéciaux qui risqueraient de faire planter le document XML réponse.
 $id=$row_sel["id_article"]; $titre=htmlentities($row_sel["titre"]); $titre=remet_accents($titre); $titre=str_replace("'","'",$titre); $titre=str_replace('"','"',$titre); $titre=str_replace("°","°",$titre); $texte=htmlentities($row_sel["texte"]); $texte=remet_accents($texte); $texte=str_replace("'","'",$texte); $texte=str_replace('"','"',$texte); $texte=str_replace("°","°",$texte); $texte=nl2br($texte); $urlarticle="spip.php?article$id";
Pour l'image, on recherche si le fichier artonXX existe pour plusieurs extensions possibles.

Si un fichier portant ce nom existe, alors on a trouvé.
 // image = IMG/arton[+id article].jpg ou autre // =========== existence du fichier jpg, png ou gif ============== $extensions=array("jpg","jpeg","JPG","png","PNG","gif","GIF"); $i=0; $trouve=false; $image=""; while (($i"; if (file_exists($image_test)){ //echo "$image_test existe
"; $image=$image_test; $trouve=true; }else{ //echo "$image_test n'existe pas
"; } $i++; } // image par défaut if (!$trouve){ $image="interrogation.png"; }
Si aucun fichier image de logo correspondant à l'article n'est trouvé, on prend une image par défaut.

Puis on récupère les dimensions de l'image contenue dans le fichier avec une fonction PHP.
 $infos_image = @getImageSize($image); // info sur la dimension de l'image // '@' est placé devant la fonction getImageSize() pour empecher l'affichage des erreurs si l'image est absente. //dimension $largeur = $infos_image[0]; // largeur de l'image $hauteur = $infos_image[1]; // hauteur de l'image
Ces informations de taille seront envoyées dans la réponse et utilisées par le script pour redimensionner l'image si besoin est.
Et on oublie pas de fermer la boucle de traitement de la ligne de résultat des articles correspondants à ce que l'on cherche.
 }
Puis on sélectionne l'image suivante afin de pouvoir commencer à la charger plus tôt, de sorte qu'au tour d'après, l'image de la diaporama suivante se chargera plus vite.

La requête est la même que la précédente, mais on ne prendra pas la même ligne de résultat.

Le traitement pour trouver le fichier image sera le même.
Image suivante
	$rek_presel="select * from ".$tablearticles." where $liste_rubrik and statut='publie' and lang='".$_SESSION["lang"]."' order by 'date' DESC limit $prochain,$par_page "; // order by date DESC $res_presel=mysql_query($rek_presel); while ($row_presel=mysql_fetch_array($res_presel,MYSQL_ASSOC)){ $extensions=array("jpg","jpeg","JPG","png","PNG","gif","GIF"); $i=0; $trouve=false; $pre_image=""; while (($i"; if (file_exists($image_test)){ //echo "$image_test existe
"; $pre_image=$image_test; $trouve=true; }else{ //echo "$image_test n'existe pas
"; } $i++; } // image par défaut if (!$trouve){ $pre_image="interrogation.png"; } } //echo "image trouvee : $image
";
Si en revanche il n'y a aucun article correspondant à ce que l'on cherche
}else{ $image="interrogation.png"; $texte="\"\""; $largeur=0; $hauteur=0; $delai=0; $pre_image="\"\""; $urlarticle="#"; // page actuelle $prochain=-1; $titre="Aucune image disponible."; // changer le texte selon la langue if ($_SESSION["lang"]=="fr"){ $titre="Aucune image disponible."; // changer le texte selon la langue } if ($_SESSION["lang"]=="en"){ $titre="No article available for this language : english."; // changer le texte selon la langue } if ($_SESSION["lang"]=="de"){ } $texte=$titre; // $texte=htmlentities($texte); // $texte=remet_accents($texte);
}
Puis il est temps de créer le document XML qui servira de réponse.

Dans Firebug, il est possible de voir, dans l'onglet réseau, les requêtes avec leurs paramètres, et les réponses associées en XML.
On crée un objet de type DOMDocument, puis on y ajoute les éléments et sous-éléments, en commençant par la racine du document.
// réponse du serveur = contenu de l'XmlHttpResponse
$doc=new DOMDocument("1.0","utf-8");
$racine=$doc->createElement('root');
$doc->appendChild($racine);
$url_image=$doc->createElement('image',$image);
$racine->appendChild($url_image);
$lien=$doc->createElement('url_article',$urlarticle);
$racine->appendChild($lien);
$titre_diapo=$doc->createElement('titre',$titre);
$racine->appendChild($titre_diapo);
$texte_diapo=$doc->createElement('texte',$texte);
$racine->appendChild($texte_diapo);
$info=$doc->createElement('largeur',$largeur);
$racine->appendChild($info);
$info2=$doc->createElement('hauteur',$hauteur);
$racine->appendChild($info2);
$tempo=$doc->createElement('delai',$delai);
$racine->appendChild($tempo);
$next=$doc->createElement('prochain',$prochain);
$racine->appendChild($next);
$pre=$doc->createElement('preload',$pre_image);
$racine->appendChild($pre);
$debug=$doc->createElement('debug',"$debugmsg");
$racine->appendChild($debug);
Et pour finir, on envoie le document par un simple echo du texte XML renvoyé par la fonction saveXML sur l'objet.
echo $doc->saveXML();
?>


		
		
[1] ça tombe bien, j'avais justement besoin d'exemple de ce genre de méthode pour un autre article



Page de garde et structure générale
Vader[FR] — 2014-10-18T14:40:37Z
Page de garde

La toute première page (http://isabellepalenc.com/) est une simple page avec fond grisé et 3 liens de langue. Pour l'instant, seul la langue française est disponible car les articles n'ont pas encore été traduits.
Le lien de langue mène ensuite à la rubrique biographie (http://isabellepalenc.com/spip.php?rubrique2).
Sur la page de garde furent affichés la liste des articles les plus récents, puis un diaporama automatique des œuvres situées dans la rubrique galerie, puis enfin un diaporama automatique sur l'artiste et son atelier, ainsi qu'une citation.
Dès le départ - et c'est un point commun à tous mes squelettes SPIP/Zpip - fut conçue une fausse rubrique "Accueil" en tant que rubrique numéro 1, et ce pour plusieurs raisons :
 La rubrique est listée automatiquement dans le menu des rubriques principales du bloc navigation
 Le nom de cette rubrique dans la liste peut facilement être traduit grâce à un bloc multilingue dans SPIP, plus facile à éditer qu'un lien en dur dans le squelette.
 Le site étant multilingue, le tri par titre dans la liste des rubriques aurait provoqué des incohérences selon la langue, c'est pourquoi les rubriques sont listées par numéro.
 La fausse rubrique étant la numéro 1, elle apparaît toujours en premier, que son nom soit "Accueil" ou "Home".
 Cette fausse rubrique peut en cacher d'autres, comme un diaporama dédié ou une citation, qui ne seront visibles de nulle part ailleurs sur le site, y compris la page de plan ou la page recherche.
 Cette fonctionnalité n'était pas prévue au départ, mais était toujours possible, et à fini par servir.
Au sein d'un plugin Zpip, les fichiers de squelette correspondants à la page de garde sont :
 rubrique=1.html à la racine du plugin, qui se contente de décrire pour cette rubrique la même structure que la page sommaire  
 page-sommaire.html dans le répertoire contenu, qui décrit donc le contenu commun des pages sommaire et "Accueil" (rubrique 1).
 rubrique-1.html dans le répertoire contenu, qui affichera pour les sous rubriques de la rubrique 1 le même contenu (que la page sommaire).
Squelette de la page de garde

 le bloc conteneur général du contenu.
Style CSS associé
.contenu-principal { padding:5px;
}
Pour les éléments de classe "contenu-principal" : espace interne de 5 pixels à gauche.
div.galeries { position:absolute; top:50px; bottom:0; left:0; right:5px; overflow-y:auto;
}
Pour les blocs de classe "galeries" : fixé à 50 pixels du bord haut (du cadre conteneur ou de la fenêtre), à 0 pixels du bas et de la gauche, 5 pixels du bord droite, et ascenseur vertical (axe y) automatique.
 le bloc du diaporama
       [(#LOGO_ARTICLE)]  
  JavaScript doit être activé pour que le diaporama puisse démarrer 
 
Ce bloc contient un formulaire, qui sera lu par le script JavaScript générique des diaporamas, afin de préparer la requête XMLHTTP pour le serveur et demander l'élément de diaporama à afficher.

Seuls les éléments (image, titre, texte descriptif) du diaporama seront demandés et téléchargés depuis le serveur, sans que la page ne soit rechargée, afin d'alléger la charge.
Ce concept de programmation en web se nomme AJAX.
Une boucle SPIP permet de charger la première image avant même le lancement du diaporama.
Style CSS diaporama
#diapo { position:absolute; left:0; top:55px; bottom:120px; right:55px; background-color:#999999;
}
Pour le bloc "diapo" : fixé à gauche, en haut, en bas et à droite. 120 pixels du bas afin de prendre en compte la hauteur - fixe - du bloc citation situé dessous.
#diapo_image, #bio_texte, #peintures_image { position:absolute; left:25px; top:25px; bottom:25px;
}
#diapo_image, #peintures_image { right:500px;
}
#diapo_texte, #peintures_contenu { width:475px;
}
#diapo_image img, #bio_image img, #peintures_image img { max-height:100%; max-width:100%;
} #diapo_texte, #bio_image, #peintures_contenu { position:absolute; bottom:0; top:25px; right:5px; padding-right:5px;
} #diapo_texte, #bio_texte, #peintures_contenu { overflow-y:auto;
} #diapo.diapo-sommaire #diapo_texte { visibility:hidden;
} #diapo.diapo-sommaire #diapo_image { right:5px;
}
Afin de cacher le bloc de texte du diaporama de la page de garde, et seulement celle là, le bloc diapo dispose d'une classe, "diapo-sommaire", qui fait que les blocs "diapo_texte" contenus dans un bloc disposant de la classe précitée seront cachés.
De même, les blocs "diapo_image" contenus dans un bloc disposant de la classe précitée seront "fixés" à 5px du bord droite, au lieu de 500px.
Cette classe n'est définie que dans le squelette de la page sommaire.

Cela permet d'avoir un seul "squelette" de diaporama, et donc un seul script AJAX, générique.
.titre_diapo { font-size:1.2em; font-weight:bold;
} .titre_diapo, .titre_diapo a, .titre_article { color:#666666;
} .titre_diapo a { text-decoration: none;
}
 le bloc citation
	   [(#TEXTE)]   
Ici, c'est une simple boucle SPIP qui va chercher un et un seul ({pagination 1}) article (on travaille sur la table des (ARTICLES)) au hasard ({par hasard}) dans la rubrique 36 ({id_rubrique=36}), rubrique dédiée qui contient les citations et est cachée dans la rubrique "Accueil".

Le filtre de langue {lang} permet de ne choisir que parmi les articles dans la langue souhaitée, selon le paramètre transmis à SPIP (lien de langue).

On affiche ensuite le texte de la citation par la balise [(#TEXTE)].
Style CSS citation
#citation { position:absolute; left:0; bottom:55px; right:55px; background-color:#999999; height:50px; text-align:center;
}
Pour le bloc "citation" : fixé à gauche, en bas et à droite, hauteur fixe de 50 pixels.
#citation p { font-size: 1.2em; margin: 0;
}
 Puis la fin du bloc conteneur général
Structure générale du site

L'élément body est surchargé par un bloc "page" positionné de manière absolue et fixé aux bords de la fenêtre.

Les différents éléments du corps de page sont ensuite disposé dans des blocs dédiés : entête, pied de page, navigation et contenu.

Les 4 blocs sont positionnés de manière absolue à l'intérieur du bloc "page", fixés aux bords dudit bloc, afin que le bloc "contenu" puisse s'étendre selon la taille de l'écran, sans que les autres blocs ne se déforment (voir ici).
Le bloc entête contient lui-même 2 sous-blocs :
 le bloc unique d'identifiant #drapos, contenant la liste des liens de langue selon les langues utilisées dans les articles publiés du site SPIP. Il est situé de manière absolue dans son cadre (entete), fixé à 20% du bord gauche et 20 pixels du haut. Il peut ainsi s'étendre selon les besoins.
 le bloc de classe .accueil, qui est de fait également unique. Il est lui aussi fixé de manière absolue dans son cadre (entete), à 150 pixels du bord droite et 20 pixels du haut. Il contient le logo, qui est de largeur fixe.
Cela permet si besoin est de mettre un bloc d'arrière plan et un bloc filtre sans toucher au contenu, comme c'est le cas pour certains de mes thèmes ZenGarden (exemple).

L'arrière plan étant monochrome, et le bloc contenu disposant généralement d'un arrière plan propre, il n'a pas été nécessaire d'utiliser un bloc dédié à l'arrière plan et un bloc filtre.


Structure général site Isabelle palenc
Aperçu par Firebug (module pour Mozilla Firefox)





Thème ZenGarden Star Wars Empire Forces
Vader[FR] — 2014-07-11T16:52:51Z

		Ce thème utilise un système de page à 3 couches (voir aussi ici).

En effet, 3 blocs de position et taille identiques sont déclarés : bckg, filtre et page

Ces 3 blocs s'étendent sur toute la page puisqu'ils sont positionnés (par commun.css) de manière absolute à une distance des bords égale à 0 , mais :
 bckg a pour index Z = -2, il sera donc situé tout à l'arrière. Il sera utilisé pour mettre une image d'arrière plan.
 filtre a pour index Z = -1, il sert habituellement de "filtre" grâce à une couleur de fond et une opacité variable qui vont "atténuer" les contrastes de couleur de l'arrière plan. Dans le cas présent, le fond sombre tranche suffisamment avec les couleurs claires du texte pour se passer du cadre filtre.
 page a pour index Z = 0 (valeur par défaut), son fond est transparent, ses éléments opaques car n'étant pas affectés par l'opacité variable du bloc filtre.
Ce thème est un thème Zengarden, mais il est "léger" et se base sur une feuille de style commune.
Le principe de "mes" thèmes est en fait très simple :
 une feuille de style commune gère le positionnement et la taille des éléments, qui sont globalement communs à tous les thèmes.
 commun.css est à la racine des thèmes, donc dans le répertoire themes du site
 ce fichier est inclut par celui du thème grâce à l'instruction @import url("../commun.css");
 la feuille de style du thème se contente de modifier les couleurs, les images, éventuellement la police, la taille et la "décoration" des textes
 le thème n'a donc pas besoin de déclarer toutes les propriétés, ce qui rend sa conception et sa maintenance plus simples.
 si besoin est, le thème peut remplacer les propriétés définies dans la feuille commune.
Ce système permet une plus grande compatibilité des thèmes avec différents sites et donc différents squelettes Zpip.
Graphiquement, ce thème est basé sur la persona pour Firefox du même nom par  eugenioliveira
 Une image de fond espace
 exceptionnellement le bloc filtre n'a pas de couleur d'arrière plan et est complétement transparent
 le texte du contenu est donc en orange, les liens principaux (navigation, entête, pied de page, fil d'Ariane) en jaune (sans être agressif), les liens standards en blanc, l'entête et le pied de page reprenant les couleurs de fond et de texte de la persona


L'icône du bloc dépliant "zone_tags" contenant la liste des tags liés à l'article est celle "par défaut" indiquée dans le css commun, et située à la racine des thèmes.
le bloc "logo" étant défini dans mon squelette Zpip, il ne l'est pas dans les thèmes, pour des raisons d'unicité de l'identifiant du div.


Thème ZenGarden Star-Wars Empire Forces
 

Icône mots-clés
 

Feuille de style commune (site vader-fr)



Affichage d'une rubrique par vignettes
Vader[FR] — 2014-06-17T16:23:20Z
La rubrique de mes Thèmes Zengarden affiche les sous-rubriques et articles par vignettes, et non sous forme de liste comme dans les autres rubriques.
Comment mettre en place ce format d'affichage ?
1) la boucle SPIP

Pour éviter d'avoir ce format d'affichage dans toutes les rubriques, il ne faudra le mettre que dans des squelettes de rubriques dédiés.
Ne faire ce format d'affichage que pour des rubriques avec relativement peu d'articles car il n'y a pas de système de pagination.
à l'intérieur de la , il faudra créer 2 boucles, une pour les rubriques, auxquelles on ajoute une petite icône style "répertoire", et une pour les articles.
Je ne vais pas expliquer le fonctionnement complet de la boucle SPIP ici, simplement le code HTML généré.
On sélectionne dans la table des rubriques, selon l'identifiant de la rubrique parent (la rubrique affichée) et on trie de manière alphanumérique par le titre au lieu de la date de publication. 

Ainsi, les vignettes seront dans l'ordre alphabétique, ce qui est plus simple pour les visiteurs.
	 
On génère un bloc div, dont la classe de style permettra un traitement adéquat.
 
Dans ce bloc, on affiche le logo de l'article (ou de la rubrique), en le réduisant aux bonnes dimensions, grâce au filtre |image_reduire{250,150}.
En dessous de l'image (en raison de l'utilisation d'un bloc paragraphe), mais toujours dans le même cadre, on affiche le titre de l'article (ou de la rubrique).
 [(#LOGO_RUBRIQUE|image_reduire{150,70})][(#TITRE)] 
  	
Articles et rubriques auraient pu avoir une classe CSS identique, mais il est préférable de faire une différence afin que celle-ci soit visible pour les visiteurs.
la boucle pour les articles :
	   [(#LOGO_ARTICLE|image_reduire{150,70})]
#TITRE 
  
2) le style CSS

Toutes les vignettes s'alignent dans le même cadre, grâce à la propriété de style float:left.
Comme il n'y a pas de pagination, il faudra permettre au cadre conteneur de défiler, avec la propriété de style overflow-y:auto, qui affichera donc un "ascenseur" vertical si le contenu dépasse la taille du cadre. 

Sauf si le cadre n'est pas "fixé" en taille fixe ou à distance fixe des bords en position:absolute (ou position:relative), auquel cas il pourra s'agrandir à volonté... et la page avec.
Tout d'abord, la taille et le positionnement, communs aux deux classes de vignettes.

La taille doit être cohérente avec celle du filtre de la boucle SPIP, et prévoir la hauteur du texte sous l'image.
La propriété de style float:left permet de faire "flotter" les blocs, qui vont s'aligner les uns à côtés des autres, puis "couler" à la ligne suivante.
.vignettes_rubrique, .vignettes_article { width:150px; height:100px; float:left; margin: 10px; text-align: center;
}
De même, les images (éléments HTML correspondants à la balise HTML img) contenus dans un bloc de classe vignettes, auront une taille limitée par le style CSS.
Dans la mesure où la taille des images est limitée par le filtre de la boucle SPIP, cette précaution n'est pas nécessaire.
.vignettes_rubrique img, .vignettes_article img { max-width:150px;
}

 Pour les blocs des vignettes de rubriques, on ajoute une image d'arrière plan, en forme d'icône de répertoire, qui sera positionnée en bas à droite, et non répétée.

Cette image est située dans le même répertoire que le CSS, même si le CSS est question est invoqué par un CSS de thème situé dans un sous-répertoire, dans le cas d'une feuille de style commune (ce qui est le cas pour ce site).
.vignettes_rubrique { background-image:url("icon_rep.png"); background-position:bottom right; background-repeat:no-repeat;
}
En raison de la présence de cette vignette, il faut, afin que le texte (titre) des blocs vignettes de rubriques reste lisible et ne passe pas devant, ajouter une marge à droite, ici de 32px.
.vignettes_rubrique .texte { margin: 0 32px 0 0;
}



Thème ZenGarden Fedora 16 (Verne)
Vader[FR] — 2014-05-01T17:40:11Z

		Ce thème utilise un système de page à 3 couches (voir aussi ici).

En effet, 3 blocs de position et taille identiques sont déclarés : bckg, filtre et page

Ces 3 blocs s'étendent sur toute la page puisqu'ils sont positionnés (par commun.css) de manière absolute à une distance des bords égale à 0 , mais :
 bckg a pour index Z = -2, il sera donc situé tout à l'arrière. Il sera utilisé pour mettre une image d'arrière plan.
 filtre a pour index Z = -1, il sert de "filtre" grâce à une couleur de fond et une opacité variable qui vont "atténuer" les contrastes de couleur de l'arrière plan.
 page a pour index Z = 0 (valeur par défaut), son fond est transparent, ses éléments opaques car n'étant pas affectés par l'opacité variable du bloc filtre.
Ce thème est un thème Zengarden, mais il est "léger" et se base sur une feuille de style commune.
Le principe de "mes" thèmes est en fait très simple :
 une feuille de style commune gère le positionnement et la taille des éléments, qui sont globalement communs à tous les thèmes.
 commun.css est à la racine des thèmes, donc dans le répertoire themes du site
 ce fichier est inclut par celui du thème grâce à l'instruction @import url("../commun.css");
 la feuille de style du thème se contente de modifier les couleurs, les images, éventuellement la police, la taille et la "décoration" des textes
 le thème n'a donc pas besoin de déclarer toutes les propriétés, ce qui rend sa conception et sa maintenance plus simples.
 si besoin est, le thème peut remplacer les propriétés définies dans la feuille commune.
Ce système permet une plus grande compatibilité des thèmes avec différents sites et donc différents squelettes Zpip.
Graphiquement, ce thème se présente sous la forme d'un bureau Gnome 3 du système Linux Fedora 16.
 Une image de fond marin avec sous-marin de type Nautilus, en référence à Jules Verne, sert d'arrière plan au site, dans le bloc bckg. Cette image est étendue aux dimensions du bloc (et donc de la page), ce qui peut éventuellement la déformer.
 exceptionnellement le bloc filtre n'a pas de couleur d'arrière plan et est complétement transparent
 le texte du contenu est donc en blanc, l'entête et le pied de page reprenant les couleurs de fond et de texte de la barre d'outils de Gnome 3.


L'icône du bloc dépliant "zone_tags" contenant la liste des tags liés à l'article est celle "par défaut" indiquée dans le css commun, et située à la racine des thèmes.
le bloc "logo" étant défini dans mon squelette Zpip, il ne l'est pas dans les thèmes, pour des raisons d'unicité de l'identifiant du div.


Thème ZenGarden Fedora 16 (Verne)


Icône mots-clés
 

Feuille de style commune (site vader-fr)



Thème ZenGarden Pingouins de Madagascar
Vader[FR] — 2013-11-20T09:35:30Z

		Ce thème utilise un système de page à 3 couches (voir aussi ici).

En effet, 3 blocs de position et taille identiques sont déclarés : bckg, filtre et page

Ces 3 blocs s'étendent sur toute la page puisqu'ils sont positionnés (par commun.css) de manière absolute à une distance des bords égale à 0 , mais :
 bckg a pour index Z = -2, il sera donc situé tout à l'arrière. Il sera utilisé pour mettre une image d'arrière plan.
 filtre a pour index Z = -1, il sert de "filtre" grâce à une couleur de fond et une opacité variable qui vont "atténuer" les contrastes de couleur de l'arrière plan.
 page a pour index Z = 0 (valeur par défaut), son fond est transparent, ses éléments opaques car n'étant pas affectés par l'opacité variable du bloc filtre.
Ce thème est un thème Zengarden, mais il est "léger" et se base sur une feuille de style commune.
Le principe de "mes" thèmes est en fait très simple :
 une feuille de style commune gère le positionnement et la taille des éléments, qui sont globalement communs à tous les thèmes.
 commun.css est à la racine des thèmes, donc dans le répertoire themes du site
 ce fichier est inclut par celui du thème grâce à l'instruction @import url("../commun.css");
 la feuille de style du thème se contente de modifier les couleurs, les images, éventuellement la police, la taille et la "décoration" des textes
 le thème n'a donc pas besoin de déclarer toutes les propriétés, ce qui rend sa conception et sa maintenance plus simples.
 si besoin est, le thème peut remplacer les propriétés définies dans la feuille commune.
Ce système permet une plus grande compatibilité des thèmes avec différents sites et donc différents squelettes Zpip.
Graphiquement, ce thème se présente sous la forme d'un arrière plan avec le commando sur fond blanc, texte noir et orange.
 Une image avec le commando sur fond blanc sert d'arrière plan au site, dans le bloc bckg. Cette image est centrée dans le bloc et complétée par une couleur d'arrière plan de la même couleur que le fond de l'image.
 le bloc filtre a une couleur d'arrière plan, en l'occurrence blanc, avec une opacité élevée.
 le texte du contenu est donc en noir et orange/marron, ou plus précisément de la couleur du bec pour l'entête, de la couleur des pattes pour le pied de page et de la couleur du dos pour le texte.


L'icône du bloc dépliant "zone_tags" contenant la liste des tags liés à l'article est celle "par défaut" indiquée dans le css commun, et située à la racine des thèmes.
le bloc "logo" étant défini dans mon squelette Zpip, il ne l'est pas dans les thèmes, pour des raisons d'unicité de l'identifiant du div.


Thème ZenGarden Pingouins de Madagascar
 

Icône mots-clés
 

Feuille de style commune (site vader-fr)



Thèmes ZenGarden Noël
Vader[FR] — 2013-11-20T09:22:18Z

		Généralités

Deux thèmes sur Noël, avec pour chacun une variante.
Ces thèmes sont des thèmes Zengarden, mais ils sont "légers" et se basent sur une feuille de style commune.
Le principe de "mes" thèmes est en fait très simple :
 une feuille de style commune gère le positionnement et la taille des éléments, qui sont globalement communs à tous les thèmes.
 commun.css est à la racine des thèmes, donc dans le répertoire themes du site
 ce fichier est inclut par celui du thème grâce à l'instruction @import url("../commun.css");
 la feuille de style du thème se contente de modifier les couleurs, les images, éventuellement la police, la taille et la "décoration" des textes
 le thème n'a donc pas besoin de déclarer toutes les propriétés, ce qui rend sa conception et sa maintenance plus simples.
 si besoin est, le thème peut remplacer les propriétés définies dans la feuille commune.
Ce système permet une plus grande compatibilité des thèmes avec différents sites et donc différents squelettes Zpip.

Par exemple, les thèmes Noël sont valables pour le squelette Zpip-vad tout autant que le squelette Zpip-hpe, ce dernier ayant pourtant des blocs qui n'existent pas dans le précédent.
Ces thèmes utilisent un système de page à 3 couches (voir aussi ici).

En effet, 3 blocs de position et taille identiques sont déclarés : bckg, filtre et page

Ces 3 blocs s'étendent sur toute la page puisqu'ils sont positionnés (par commun.css) de manière absolute à une distance des bords égale à 0 , mais :
 bckg a pour index Z = -2, il sera donc situé tout à l'arrière. Il sera utilisé pour mettre une image d'arrière plan.
 filtre a pour index Z = -1, il sert de "filtre" grâce à une couleur de fond et une opacité variable qui vont "atténuer" les contrastes de couleur de l'arrière plan.
 page a pour index Z = 0 (valeur par défaut), son fond est transparent, ses éléments opaques car n'étant pas affectés par l'opacité variable du bloc filtre.
Ces thèmes redéfinissent les couleurs de mise en évidence .caractencadre-spip et .caractencadre2-spip du plugin enluminures typographiques, car elles sont trop claires, cependant le css du plugin peut être chargé après celui du thème. Il faudra donc éditer le plugin afin d'enlever les couleurs, et déclarer les couleurs "par défaut" dans le css commun.
le bloc "logo" étant défini dans mon squelette Zpip, il ne l'est pas dans les thèmes, pour des raisons d'unicité de l'identifiant du div.


Pack thèmes ZenGarden Noël
 

Feuille de style commune (site vader-fr)
Thème Noël 1
 Une image rouge et blanche avec un sapin sur des collines, quelques (gros) flocons de neiges et de la décoration sert d'arrière plan au site, dans le bloc bckg. Cette image est étendue aux dimensions du bloc (et donc de la page), ce qui peut éventuellement la déformer.
 une image animée GIF, répétée, permet de faire tomber de la neige devant cet arrière plan. L'image animée a un fond transparent, et le bloc filtre peut donc avoir une couleur d'arrière plan, en l'occurrence rouge sombre avec une opacité élevée.
 le texte du contenu est donc en blanc et or, le bloc "extra" des articles (articles de la même rubrique, mots-clés) étant rouge sur un fond couleur neige (snow), et les icônes habituelles sont remplacées par des icônes de Noël.
Une variante permet de ne pas avoir l'animation de la neige.


Thème Noël 2
 Une image rouge et blanche avec un calendrier et de la décoration sert d'arrière plan au site, dans le bloc bckg. Cette image est étendue aux dimensions du bloc (et donc de la page), ce qui peut éventuellement la déformer.
 une image animée GIF, répétée, permet de faire tomber de la neige devant cet arrière plan. L'image animée a un fond transparent, et le bloc filtre peut donc avoir une couleur d'arrière plan, en l'occurrence rouge sombre avec une opacité élevée.
 le texte du contenu est donc en blanc et or, le bloc "extra" des articles (articles de la même rubrique, mots-clés) étant rouge sur un fond couleur neige (snow), et les icônes habituelles sont remplacées par des icônes de Noël.
Une variante permet de ne pas avoir l'animation de la neige.






Thème ZenGarden ciel bleu
Vader[FR] — 2013-11-20T09:12:47Z

		Basiquement, ce thème est une modification du thème que j'avais fait pour ce site.
Exceptionnellement, ce thème n'utilise pas de système de page à 3 couches. C'est un thème "simple".

En effet, l'image d'arrière plan, en blanc et bleu clair, contraste suffisamment avec les couleurs sombres (noir, violet, marron) du contenu et il n'est donc pas nécessaire d'atténuer l'arrière plan par un bloc filtre.
Graphiquement, ce thème se présente sous la forme d'un arrière plan ciel bleu avec quelques nuages, texte noir, liens et titres rouge bordeaux...sans oublier un ti zoziau à la place de la flèche pour déplier le cadre "dans la même rubrique".
Ce thème est un thème Zengarden, mais il est "léger" et se base sur une feuille de style commune.
Le principe de "mes" thèmes est en fait très simple :
 une feuille de style commune gère le positionnement et la taille des éléments, qui sont globalement communs à tous les thèmes.
 commun.css est à la racine des thèmes, donc dans le répertoire themes du site
 ce fichier est inclut par celui du thème grâce à l'instruction @import url("../commun.css");
 la feuille de style du thème se contente de modifier les couleurs, les images, éventuellement la police, la taille et la "décoration" des textes
 le thème n'a donc pas besoin de déclarer toutes les propriétés, ce qui rend sa conception et sa maintenance plus simples.
 si besoin est, le thème peut remplacer les propriétés définies dans la feuille commune.
Ce système permet une plus grande compatibilité des thèmes avec différents sites et donc différents squelettes Zpip.

Par exemple, le thème ciel est valable pour le squelette Zpip-vad tout autant que le squelette Zpip-hpe, ce dernier ayant pourtant des blocs qui n'existent pas dans le précédent.


L'icône du bloc dépliant "zone_tags" contenant la liste des tags liés à l'article est celle "par défaut" indiquée dans le css commun, et située à la racine des thèmes.
le bloc "logo" étant défini dans mon squelette Zpip, il ne l'est pas dans les thèmes, pour des raisons d'unicité de l'identifiant du div.
Le thème redéfinit les couleurs de mise en évidence .caractencadre-spip et .caractencadre2-spip du plugin enluminures typographiques, car elles sont trop claires, cependant le css du plugin peut être chargé après celui du thème. Il faudra donc éditer le plugin afin d'enlever les couleurs, et déclarer les couleurs "par défaut" dans le css commun.


Thème ZenGarden ciel bleu
 

Icône mots-clés
 

Feuille de style commune (site vader-fr)



Tuto SPIP/Zpip - création de thème
Vader[FR] — 2013-10-22T11:24:41Z
Les sites SPIP utilisant des squelettes de type Zpip peuvent utiliser des thèmes Zengarden.

Vous trouverez plus d'informations à ce sujet ici et sur les forums de SPIP.
1) Prérequis
 un site SPIP avec plugin squelette Zpip et le plugin Zengarden
 Firefox et ses outils de développement web
 éventuellement le module complémentaire ColorZilla pour Firefox
 Notepad++ sous Windows, Gedit ou autre éditeur de texte sous Linux
2) Création du thème
Le plus simple pour créer un thème est d'utiliser un thème existant, contenant déjà le "squelette", surtout en cas de squelette Zpip personnalisé.

Les différents blocs et classes existant sur les pages du site (entête, pied de page, navigation, contenu, zone droite...) étant déjà déclarés et ne devant à priori pas changer, cela facilitera les choses.
Pour créer un thème de A à Z, c'est la même chose : créer un dossier pour le thème, identifier avec l'inspecteur (outils de développement web) les éléments de la page, leur appliquer un style.
Il faudra alors renommer le dossier du (nouveau) thème et éditer le fichier plugin.xml comme expliqué dans cet article afin de déclarer le nouveau thème.
Quand à la vignette illustrant le thème (champ   du fichier plugin.xml), elle doit avoir 250px de large.
Il est possible et recommandé (pour simplifier la gestion des thèmes) d'avoir à la racine des thèmes (donc dans le dossier themes à la racine du site) un fichier de style commun, pour la position et la taille des blocs ainsi que le texte.

Le fichier en question sera ensuite importé par le fichier css du thème.
/* import de la feuille commune des positions de blocs et tailles de texte */ @import url("../commun.css");
3) Édition du style
Une fois le thème déclaré, le style peut être créé en expérimentant avec les outils de développement web de Firefox.

Cela permet de naviguer dans la page et de voir dans le cadre de droite le style associé aux éléments situés dans l'arborescence du cadre de gauche.

Il est alors possible d'éditer en temps réel les propriétés de style.
Cela permet aussi de voir l'ensemble des propriétés valables pour l'élément (onglets Calculé et DOM), la taille et l'espacement des éléments (onglet Apparence), ainsi que le style associé aux évènements par l'onglet Style, menu déroulant, :hover pour le style lorsque la souris passe au dessus, :active et :focus
Il faudra ensuite éditer le fichier CSS (voir ici et là) à la ligne indiquée par l'inspecteur pour y mettre les propriétés css.


Edition du thème par Firebug

Par exemple, dans l'illustration ci-dessus, l'inspecteur (outils de développement web de Firefox) permet de voir que le style associé aux blocs dépliants situés à droite des articles est déclaré dans le fichier habillage.css (du thème), ligne 45, et que les propriétés de style background-image et opacity surchargent en complétant les propriétés de positionnement bottom et top déclarées dans le fichier commun à tous les thèmes commun.css, ligne 321.
La compression du CSS par SPIP rend ce genre de "débogage" impossible.
La propriété d'image d'arrière plan a été désactivée dans l'inspecteur, et une propriété de couleur a été ajoutée. En tapant "darkg" l'outil propose de compléter pour avoir "darkgray".


Tuto Spip - Création galerie d'images
Vader[FR] — 2013-09-22T12:39:38Z
Il peut être intéressant, pour illustrer un site et attirer plus de visiteurs, de créer une ou plusieurs galeries d'images.
SPIP est capable de proposer des "galeries d'image" au format d'un portfolio lié à un article.
Mais en cas d'un grand nombre d'images, il sera préférable de diviser la galerie en onglets.
Malheureusement cela peut s'avérer fastidieux si on ne sait pas comment s'y prendre.
1) Génération des vignettes par SPIP
1) Génération des vignettes par SPIP
Tout d'abord, afin d'alléger - aussi bien techniquement que visuellement - la page chargée par l'utilisateur, on mettra dans l'article non pas les images grande taille, mais des vignettes.

Ces vignettes seront automatiquement générées par SPIP. Il suffit pour cela d'aller dans le menu Configuration> Fonctions avancées du site, dans l'espace privé.


Cliquer sur la vignette de meilleure qualité dans la page de configuration permet de choisir la méthode de fabrication des vignettes.
Ensuite, il faudra indiquer la taille maximale des vignettes générées, et bien sûr sélectionner le bouton radio "Générer automatiquement les miniatures des images".
Un bouton situé en bas à droite du cadre, non visible sur la capture d'écran, permet d'enregistrer les modifications.
2) Envoi des images sur le serveur
2) Envoi des images sur le serveur
Envoyer un grand nombre d'images en même temps sur le serveur en passant par le formulaire SPIP peut être très long, et même échouer si l'on envoie trop d'images de trop grande taille.
 Afin de ne pas se perdre dans les images il est préférable :
 de les envoyer par paquets de 50 maximum.
 de nommer les images avec un numéro croissant pour pouvoir plus facilement les identifier dans une série plus tard. Des noms comme "Capture01, Capture02".... ne sont pas des plus pratiques.
 Et pour aller (beaucoup) plus vite :
 il faut envoyer les images par FTP dans le répertoire tmp/upload du site, en utilisant un client FTP comme FileZilla
 puis dans l'interface web de SPIP, choisir de téléverser les images depuis "le serveur".



S'il y a des images dans tmp/upload, SPIP proposera une liste déroulante des fichiers, avec en plus une option pour tout charger.
Une fois les images chargées, il ne reste plus qu'a les intégrer à l'article dans l'ordre, les organiser et les commenter.
Pour intégrer les images plus rapidement, voici une petite page html avec un script JavaScript permettant de générer tous les liens de type , qu'il suffira de copier-coller ensuite.


Générateur de liens de documents pour SPIP
3) Organisation des images dans l'article
3) Organisation des images dans l'article
Afin d'alléger visuellement la page, il est recommandé d'utiliser la fonctionnalité d'onglets du plugin Couteau suisse.
La fonction recherche (CTRL+F) du navigateur permettra d'aller image par image dans le bon ordre, avant de cliquer sur le lien  proposé par SPIP.

Il faudra choisir l'alignement "left".

La zone de recherche restant active dans la page, il suffit de changer un numéro et de cliquer sur "suivant" pour aller à l'image suivante dans la série.



Les images n'ayant pas de titre, le seul lien proposé pour le moment est img
Or, les images ajoutées devront apparaître sous forme de vignette et non en grande taille, c'est pourquoi le code  devra être transformé en .

Cela peut aisément se faire en copiant tout le texte de l'article (CTRL+A dans la zone de saisie puis CTRL+C) et en le collant (CTRL+V) dans un éditeur de texte comme Notepad++ (Windows) ou Gedit (Linux).

Ensuite, la fonction rechercher et remplacer (habituellement CTRL+H, ou située dans le menu édition) de l'éditeur de texte permettra de remplacer tous les  par .

Copier-Coller à nouveau, cette fois depuis l'éditeur de texte vers l'article, et le tour est joué.

A ce moment, il est possible d'enregistrer l'article, en gardant éventuellement une copie de son texte dans l'éditeur précédemment utilisé, au cas où l'enregistrement échouerait.
 img affiche l'image en grand, sans titre ni descriptif
 emb affiche l'image en grand, avec titre
 doc affiche la vignette
4) Titrer les vignettes
4) Titrer les vignettes

Afin de mieux référencer les images et pour les décrire brièvement à un visiteur néophye, il est ensuite recommandé de les titrer.

Cela étant long et fastidieux dans la fenêtre d'édition de l'article, il sera plus simple d'aller dans le menu Edition > Documents de SPIP.
Une boîte de recherche spécifique à la médiathèque (à ne pas confondre avec la boîte de recherche générale du site, située dans l'entête) permettra de n'afficher que les images de la série.


Par défaut et ce que je conseille, l'affichage se fait
 par identifiant décroissant, et donc en mettant les images les plus récentes (et pas encore titrées) d'abord.
 en paginant les images par 10
Il suffit alors de cliquer avec la molette de la souris (= ouvrir dans un nouvel onglet) sur les 10 liens "Modifier" des images non titrées, puis dans chaque onglet, de mettre un titre, valider, passer à l'onglet suivant pendant que l'onglet courant recharge et faire de même.

Une fois qu'un onglet a rechargé, il est possible de le fermer en cliquant sur sa petite croix.

Lorsque les 10 premières images sont titrées, on clique sur le lien de pagination pour aller aux 10 suivantes, et ainsi de suite.
Une fois les images envoyées au serveur, triées et organisées dans l'article, et titrées, il ne reste plus qu'à publier l'article.