Changeset 77191 in spip-zone


Ignore:
Timestamp:
Oct 13, 2013, 11:24:29 AM (6 years ago)
Author:
cedric@…
Message:

Amelioration du concept :

  • on supprime la detection des mobiles par User Agent, et a la place on utilise simplement un commentaire conditionnel "IF IE" : IE<10 aura l'image standard et tous les autres nav auront l'image responsive
  • le fallback jpg est généré à partir de la grande image, avec une compression jpg agressive plutot qu'a partir de la plus petite
  • on ajoute un event js sur onmousedown pour up le src="" a partir de la background-image, ce qui répare les fonctions "afficher l'image" etc. du menu contextuel

A finir de tester eprouver.

Location:
_plugins_/respim/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/respim/trunk/paquet.xml

    r77043 r77191  
    22        prefix="respim"
    33        categorie="multimedia"
    4         version="0.2.0"
     4        version="0.3.0"
    55        etat="dev"
    66        compatibilite="[3.0.12-dev;3.0.*]"
  • _plugins_/respim/trunk/respim_options.php

    r77043 r77191  
    1515/**
    1616 *
     17 * @param string $img
    1718 * @param array $rwd_images
    1819 *   tableau
     
    2021 * @param int $width
    2122 * @param int $height
    22  * @param string $alt
    23  * @param string $class
    24  * @param string $id
    2523 * @return string
    2624 */
    27 function respim_embed($rwd_images, $width, $height, $alt="", $class="", $id=""){
     25function respim_embed($img, $rwd_images, $width, $height){
    2826
    2927        ksort($rwd_images);
     
    4240        if (!$fallback_file)
    4341                $fallback_file = reset($rwd_images);
    44         /* SI compat IE7 necessaire : pas de base64 dans le src, donc image externe avec un hit de plus... */
    45         if (!defined('_RESPIM_PRESERVE_IE7_COMPAT'))
    46                 $fallback_file = filtre_embarque_fichier($fallback_file,"",32000);
     42        // embarquer le fallback en DATA URI si moins de 32ko (eviter une page trop grosse)
     43        $fallback_file = filtre_embarque_fichier($fallback_file,"",32000);
    4744
    4845        $prev_width = 0;
     
    5249                $mw20 = ($prev_width?"(min-width:".round($prev_width/2)."px)":"(max-width:".round($w/2)."px)");
    5350                $mw15 = ($prev_width?"(min-width:".round($prev_width/1.5)."px)":"(max-width:".round($w/1.5)."px)");
    54                 $medias[$w] = "@media screen and $mw,screen and (-webkit-min-device-pixel-ratio: 2) and $mw20,screen and (-webkit-min-device-pixel-ratio: 1.5) and $mw15,screen and (min--moz-device-pixel-ratio: 2) and $mw20,screen and (min--moz-device-pixel-ratio: 1.5) and $mw15{b.$cid{background-image:url($file);}}";
     51                // ?rwd pour le debug (etre sur qu'on charge bien l'image issue des medias queries)
     52                $medias[$w] = "@media screen and $mw,screen and (-webkit-min-device-pixel-ratio: 2) and $mw20,screen and (-webkit-min-device-pixel-ratio: 1.5) and $mw15,screen and (min--moz-device-pixel-ratio: 2) and $mw20,screen and (min--moz-device-pixel-ratio: 1.5) and $mw15{b.$cid{background-image:url($file?rwd);}}";
    5553                $prev_width = $w+1;
    5654        }
     
    5856        $style .= implode("\n",$medias);
    5957
    60         if ($class) $class=" $class";
    61         $class=" class=\"responsive $cid$class\"";
    62         if ($alt) $alt=" alt=\"$alt\"";
    63         if ($id) $id=" id=\"$id\"";
     58        $class = extraire_attribut($img,"class");
     59        if ($class) $class = " $class";
     60        $class = "responsive $cid$class";
    6461
    65         $out = "<b class=\"$cid\"><img
    66 $alt
    67 src=\"$fallback_file\"
    68 width=\"$width\" height=\"$height\"
    69 $class$id /></b>
    70 <style>$style</style>";
     62        $out = "<!--[if IE]>$img<![endif]-->";
     63        $img = inserer_attribut($img,"src",$fallback_file);
     64        $img = inserer_attribut($img,"class",$class);
     65        $img = inserer_attribut($img,"onmousedown","var i=window.getComputedStyle(this.parentNode).backgroundImage.replace(/\W\)$/,'').replace(/^url\(\W|/,'');this.src=(i&&i!='none'?i:this.src);");
     66        $out .= "<!--[if !IE]--><b class=\"$cid\">$img</b><style>$style</style><!--[endif]-->";
     67
    7168        return $out;
    7269}
     
    7471/**
    7572 * @param string $img
    76  * @param string $target
    77  *   navigateur cible
    78  *   mobile => <img> avec fallback base64 petite taille basse qualite et mediaquerie pour charger la "bonne" image
    79  *   dektop => image normale
    80  *   auto => determination en fonction du UA (oui c'est mal)
    8173 * @param array $bkpt
    8274 * @return string
    8375 */
    84 function respim_image($img, $target="auto", $bkpt = array(320,480,780)){
     76function respim_image($img, $bkpt = array(320,480,780)){
    8577        if (!$img) return $img;
    8678        if (!function_exists("taille_image"))
     
    9385        list($h,$w) = taille_image($img);
    9486        if (!$w OR $w<=reset($bkpt)) return $img;
    95 
    96         static $ua_target = null;
    97         if (!in_array($target,array("mobile","desktop"))){
    98                 if (is_null($ua_target)){
    99                         include_spip("lib/mobile_detect");
    100                         $detect = MobileDetect::getInstance();
    101                         $ua_target = "desktop";
    102                         if ($detect->isMobile()){
    103                                 $ua_target = "mobile";
    104                         }
    105                         if ($t = _request('var_respim') AND in_array($t,array("mobile","desktop")))
    106                                 $ua_target = $t;
    107                 }
    108                 $target = $ua_target;
    109         }
    110 
    111         // sur les desktop on laisse l'image en grand format (oui c'est arbitraire)
    112         if ($target=="desktop")
    113                 return $img;
    11487
    11588        $src = trim(extraire_attribut($img, 'src'));
     
    129102                return $img;
    130103
     104        $large = "";
    131105        foreach($bkpt as $wk){
    132106                if ($wk>$w) break;
    133107                $i = image_reduire($img,$wk,10000);
    134                 $images[$wk] = extraire_attribut($i,"src");
     108                $large = $images[$wk] = extraire_attribut($i,"src");
    135109        }
    136110
    137111        if (function_exists("image_aplatir")){
    138112                // image de fallback : la plus petite en jpg compresse
    139                 $fallback = image_aplatir($images[reset($bkpt)],'jpg','ffffff',51);
     113                $fallback = image_aplatir($large,'jpg','ffffff',15);
    140114                $images["fallback"] = extraire_attribut($fallback,"src");
    141115        }
     
    144118  // on renvoie un conteneur svg
    145119
    146         $alt = extraire_attribut($img, 'alt');
    147         $class = extraire_attribut($img, 'class');
    148         $id = extraire_attribut($img, 'id');
    149 
    150         return respim_embed($images,$w,$h,$alt,$class,$id);
     120        return respim_embed($img,$images,$w,$h);
    151121}
    152122
Note: See TracChangeset for help on using the changeset viewer.