HTML

Drupal : ajouter le module Lightbox2 à une gallerie d'images créée avec le module Image

J'en profite pour vous signaler une nouveauté sur mon blog : le MICHFlickr en haut à droite!!

Lightbox2 est à priori un super module compatible avec tous les modules d'image sur Drupal! Il doit, toujours à priori, automatiquement modifier les liens existants vers des images avec les paramètres qui vont bien pour qu'elles puissent s'afficher dans le viewer JS Lightbox2.

En pratique, rien du tout!

Je possède plusieurs galeries d'images créées avec le module Image, et Lightbox2 ne m'a pas changé les liens de ces galeries! Aidé par ici, j'ai alors entrepris de développer une page compatible avec Lightbox2 à l'image de celle affichant les galeries (/?q=image).

 Pour votre information, voici un extrait de ma Drupal config:

Cette configuration doit probablement planter avec l'outil "Automatic image gandling" de Lightbox2.

Je vous communique le code, parce qu'à la vue des premiers résultats Google, ça peut intéresser du monde!

<style type="text/css" media="all">
    ul.galleries{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.galleries li.subgalleries {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:#EEEEEE none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        margin:1em 0;
        padding:1em;
        position:relative;
    }
    ul.images {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.images li {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent none repeat scroll 0 0;
        float:left;
        margin:1em 2em 1em 0;
        padding:0;
    }
    ul.images li h3{
        font-size:1em;
    }
</style>
<ul class="galleries">
<?php
$result = db_query ("SELECT td.tid AS tid, td.name AS name, td.description AS description FROM {term_data} td");
while ($img = db_fetch_object($result)) {
    echo "<li class=\"subgalleries clear-block\">";
    echo "<h3>".$img->name."</h3>";
    echo "<div class=\"description\"><p>".$img->description."</p></div>";
    echo "<ul class=\"images clear-block\">";
    $gallery_tid=$img->tid;
    $subresult = db_query ("SELECT n.title AS title, f1.filepath AS originalpath, f2.filepath AS thumbpath FROM {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn WHERE tn.tid=%d AND i.nid=tn.nid  AND i.image_size='_original' AND i2.image_size='thumbnail' AND n.nid=tn.nid AND f1.fid=i.fid AND f2.fid=i2.fid AND i.nid=i2.nid", $gallery_tid);
    while ($subimg = db_fetch_object($subresult)) {
        echo "<li style='width : 100px;'>";
        echo "    <a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title."\"><img src=\"/blog/".$subimg->thumbpath."\" width=\"100\" title=\"".$subimg->title."\"/></a>";
        echo "    <h3><a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title."\">".$subimg->title."</a></h3>";
        echo "</li>";
    }
    echo "</ul>";
    echo "</li>";
}
?>
</ul>

Ce code est à insérer en PHP code dans une page par exemple.

EDIT 1 : Affichage des paramètres EXIF

<style type="text/css" media="all">
   ul.galleries{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.galleries li.subgalleries {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:#EEEEEE none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        margin:1em 0;
        padding:1em;
        position:relative;
    }
    ul.images {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.images li {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent none repeat scroll 0 0;
        float:left;
        margin:1em 2em 1em 0;
        padding:0;
    }
    ul.images li h3{
        font-size:1em;
    }
</style>
<ul class="galleries">
<?php
$result = db_query ("SELECT td.tid AS tid, td.name AS name, td.description AS description FROM {term_data} td");
while ($img = db_fetch_object($result)) {
    echo "<li class=\"subgalleries clear-block\">";
    echo "<h3>".$img->name."</h3>";
    echo "<div class=\"description\"><p>".$img->description."</p></div>";
    echo "<ul class=\"images clear-block\">";
    $gallery_tid=$img->tid;
    $subresult = db_query ("SELECT n.title AS title, f1.filepath AS originalpath, f2.filepath AS thumbpath FROM {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn WHERE tn.tid=%d AND i.nid=tn.nid  AND i.image_size='_original' AND i2.image_size='thumbnail' AND n.nid=tn.nid AND f1.fid=i.fid AND f2.fid=i2.fid AND i.nid=i2.nid", $gallery_tid);
    while ($subimg = db_fetch_object($subresult)) {
        $res_exif = "";
        if(in_array(strtolower(end(explode('.', $_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath))), array('jpg', 'jpeg', 'tif', 'tiff'))){
            if($exif = exif_read_data($_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath, EXIF, true)){
                $res_exif = "<br />";
                $exif_tab = Array();
                foreach ($exif as $key => $section){
                    foreach ($section as $name => $value){
                        $exif_tab[$name] .= $value;
                    }
                }
                if($exif_tab['FocalLength']){
                    $focale = round($exif_tab['FocalLength'], 0)/10;
                    $focale = $focale." mm";
                }
                if($exif_tab['Make'])
                    $marque = $exif_tab['Make'];
                if($exif_tab['Model'])
                    $modele = $exif_tab['Model'];
                if($exif_tab['ExposureTime'])
                    $vit_obt = $exif_tab['ExposureTime']." s";
                if($exif_tab['ISOSpeedRatings'])
                    $iso = $exif_tab['ISOSpeedRatings'];
                if($exif_tab['ApertureFNumber'])
                    $ouverture = $exif_tab['ApertureFNumber'];
                $res_exif .= "<span style='font-size:7px'>Focale: <i>".$focale."</i> | Ouverture <i>".$ouverture."</i> | Vitesse d'obturation: <i>".$vit_obt."</i> | ISO: <i>".$iso."</i></span>";
            }
        }
        echo "<li style='width : 100px;'>";
        echo "    <a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\"><img src=\"/blog/".$subimg->thumbpath."\" width=\"100\" title=\"".$subimg->title."\"/></a>";
        echo "    <h3><a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\">".$subimg->title."</a></h3>";
        echo "</li>";
    }
    echo "</ul>";
    echo "</li>";
}
?>
</ul>

EDIT 2 : Pagination

<style type="text/css" media="all">
    ul.galleries{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.galleries li.subgalleries {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:#EEEEEE none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        margin:1em 0;
        padding:1em;
        position:relative;
    }
    ul.images {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.images li {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent none repeat scroll 0 0;
        float:left;
        margin:1em 2em 1em 0;
        padding:0;
        width : 100px;
        height: 166px;
    }
    ul.images li h3{
        font-size:1em;
    }
</style>
<ul class="galleries">
<?php
$sql = "SELECT td.tid AS tid, td.name AS name, td.description AS description FROM {term_data} td ORDER BY td.tid DESC";
$result = pager_query(db_rewrite_sql($sql), 3);
while ($img = db_fetch_object($result)) {
    print "<li class=\"subgalleries clear-block\">";
    print "<h3>".$img->name."</h3>";
    print "<div class=\"description\"><p>".$img->description."</p></div>";
    print "<ul class=\"images clear-block\">";
    $gallery_tid=$img->tid;
    $subresult = db_query ("SELECT n.title AS title, f1.filepath AS originalpath, f2.filepath AS thumbpath FROM {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn WHERE tn.tid=%d AND i.nid=tn.nid  AND i.image_size='_original' AND i2.image_size='thumbnail' AND n.nid=tn.nid AND f1.fid=i.fid AND f2.fid=i2.fid AND i.nid=i2.nid", $gallery_tid);
    while ($subimg = db_fetch_object($subresult)) {
        $res_exif = "";
        if(in_array(strtolower(end(explode('.', $_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath))), array('jpg', 'jpeg', 'tif', 'tiff'))){ // Si fichier Jpeg ou Tiff
            if($exif = exif_read_data($_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath, EXIF, true)){ // Si le fichier $img contient des infos Exif
                $res_exif = "<br />";
                $exif_tab = Array();
                foreach ($exif as $key => $section){ // On parcourt la première partie du tableau multidimensionnel
                    foreach ($section as $name => $value){ // On parcourt la seconde partie
                        $exif_tab[$name] .= $value; // Récupération des valeurs dans le tableau $exif_tab
                    }
                }
                if($exif_tab['FocalLength']){ // Si les données de la distance focale existent
                    $focale = round($exif_tab['FocalLength'], 0)/10; // j'arrondis la valeur
                    $focale = $focale." mm"; // Je rajoute l'unité millimètre
                }
                if($exif_tab['Make']) // Marque de l'appareil
                    $marque = $exif_tab['Make'];
                if($exif_tab['Model'])// Modèle de l'appareil
                    $modele = $exif_tab['Model'];
                if($exif_tab['ExposureTime'])// Vitesse d'obturation
                    $vit_obt = $exif_tab['ExposureTime']." s";
                if($exif_tab['ISOSpeedRatings']) // Valeur iso
                    $iso = $exif_tab['ISOSpeedRatings'];
                if($exif_tab['ApertureFNumber'])//valeur ouverture
                    $ouverture = $exif_tab['ApertureFNumber'];
                $res_exif .= "<span style='font-size:7px'>Focale: <i>".$focale."</i> | Ouverture <i>".$ouverture."</i> | Vitesse d'obturation: <i>".$vit_obt."</i> | ISO: <i>".$iso."</i></span>";
            }
        }
        print "<li>";
        print "    <a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\"><img src=\"/blog/".$subimg->thumbpath."\" width=\"100\" title=\"".$subimg->title."\"/></a>";
        print "    <h3><a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\">".$subimg->title."</a></h3>";
        print "</li>";
    }
    print "</ul>";
    print "</li>";
}
?>
</ul>
<?php
    print theme('pager', NULL, 5);
?>

Comment Google piste-t-il nos faits et gestes?

Vu que les liens des résultats Google sont donnés directement en clair au navigateur, je me suis souvent demandé comment Google Outils pour les webmasters pouvait offrir aux webmasters la possibilité d'afficher les requêtes affichant leurs sites et leurs positions dans les résultats (la thèse d'un robot faisant toutes les recherches possibles ayant été rapidement écartée). Un autre chose m'intriguait aussi : comment Google pouvait obtenir, de façon transparente, le résultat d'une recherche sur lequel un utilisateur a cliqué ;  résultat affiché par exemple dans l'Historique Web.

Du nouveau sur Google : l'animation de la page d'accueil!

La page d'accueil de Bing rencontre un franc succès, rien à dire à ce sujet si ce n'est l'apparition récente de la visionneuse des photos des jours  précédents (flèches en bas à droite) autrefois disponible que pour la version US. L'ensemble dans une compatibilité en natif tous navigateurs grâce à l'utilisation du JavaScript.

Devant tant de dynamisme et d'interopérabilité, Google se devait de réagir. C'est pourquoi, aussi sobrement que son design, la page d'accueil s'est animée.

Maito et encodage d'URL

L'URL (Uniform Resource Locators) a été définie en décembre 1994 au CERN. Mais cette spécification pose problème: elle autorise l'utilisation d'un simple extrait de l'US-ASCII: "Thus, only alphanumerics, the special characters "$-_.+!*'(),", and reserved characters used for their reserved purposes may be used unencoded within a URL."

En d'autres termes, les espaces, les caractères spéciaux ne sont pas autorisés dans l'écriture.

Syndiquer le contenu