Changeset 86559 in spip-zone


Ignore:
Timestamp:
Dec 9, 2014, 7:31:16 PM (5 years ago)
Author:
arno@…
Message:

Nouvelle fonction: background_responsive() (mêmes variables que image_responsive, sauf l'option «vertical»). À installer par exemple dans un div, pour fabriquer une image de background, en mode «cover», chargée de manière responsive évidemment.

<div class="interieur"[(#IMG_FOND|background_responsive{320/600/1280/1920, 1})]>

Par la suite, il faudrait uniformiser l'insertion de data-lazy et data-responsive dans le code de image_responsive (ici je ne peux pas ajouter de classe, parce que je suis déjà dans un div que je ne fabrique pas, contrairement au img).

Location:
_plugins_/image_responsive
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/image_responsive/image_responsive.css

    r80572 r86559  
    33.conteneur_image_responsive_h {display: inline-block; position: relative !important;width: 100% !important;height: 0 !important; margin: 0!important; border:0!important}
    44.conteneur_image_responsive_h img {position: absolute;top: 0;left: 0;}
     5[data-responsive=background] {background-position: center center; background-size: cover; background-repeat: none;}
  • _plugins_/image_responsive/image_responsive.js

    r85593 r86559  
    7676}
    7777
     78function charger_url_background_responsive(this_img) {
     79        var dPR = window.devicePixelRatio;
     80                var src = this_img.attr("data-src");
     81                var l = this_img.attr("data-l");
     82                var h = this_img.attr("data-h");
     83                vertical = false;
     84
     85                var dim_l= parseInt(this_img.width());
     86                var dim_h = parseInt(this_img.height());
     87               
     88                if ( (dim_l/dim_h) > (l>h) ) { /* fenetre plus large que l'image */
     89                        dim = dim_l;
     90                } else {
     91                        dim = dim_h *l / h;
     92                }
     93               
     94               
     95                var tailles = this_img.attr("data-tailles");
     96                                                       
     97                if (tailles) {
     98                        var w_max = 0;
     99                        var t = $.parseJSON(tailles.replace(/\\"/g, '"'));
     100                        var changer_w = 1;
     101                       
     102                        $.each(t, function (index, value) {
     103                                value = parseInt(value);
     104                                //console.log(value + " " + d + " " + changer_w);
     105                                if (changer_w == 1) w_max = value;
     106                                if (value > dim) changer_w = 0;
     107                        });
     108                        // console.log ("Wmax: "+w_max);
     109                        if (w_max > 0) dim = w_max;
     110                }
     111
     112
     113
     114                // Si l'image est trop petite, c'est pas la peine de demander trop grand…
     115                if (vertical && parseInt(dim) > parseInt(h)) {
     116                        dim = h;
     117                        dpr = false;
     118                } else if (parseInt(dim) > parseInt(l)) {
     119                        dim = l;
     120                        dpr = false;
     121                }
     122
     123                        //console.log ("Wapres: "+dim);
     124               
     125                if (dim == 0) {
     126               
     127                } else {
     128               
     129                        if(dPR && dPR > 1) {
     130                                // si l'image d'origine n'est pas nettement plus grande que l'image demandée,
     131                                // ne pas passer dPR, sinon on récupère image de même taille mais trop compressée
     132                                if (vertical && h < 1.5*dim) dPR = false;
     133                                else if (l < 1.5*dim) dPR = false;
     134                        } else {
     135                                dPR = false;
     136                        }
     137                       
     138                        if (htactif) {
     139                                racine = src.substr(0, src.length-4);
     140                                terminaison = src.substr(src.length-3, 3);
     141                                var url_img = racine+"-resp"+dim;
     142                                if (vertical) url_img = url_img + "v";
     143                                if (dPR) url_img = url_img + "-"+dPR;
     144                                url_img = url_img + "."+terminaison;
     145                        } else {
     146                                var url_img = "index.php?action=image_responsive&img="+src+"&taille="+dim;
     147                                if (vertical) url_img = url_img + "v";
     148                                if (dPR) url_img = url_img + "&dpr="+dPR;
     149                        }
     150                        this_img.css("background-image", "url("+url_img+")");
     151                }
     152
     153}
     154
     155
    78156function calculer_top_image_responsive(this_img) {
    79         this_img.attr("data-top", this_img.offset().top);
     157        this_img.attr("data-top", this_img.offset().top).addClass("lazy");
    80158}
    81159
     
    93171                //console.log(sTop);
    94172
    95         $(".lazy[data-top]").each(function() {
     173        $(".image_responsive.lazy[data-top]").each(function() {
    96174                this_img = $(this);
    97175                var h = this_img.attr("data-top");
    98                
    99                
    100176                if (h <= limite_bas && h >= limite_haut) charger_url_image_responsive(this_img);
    101177        });     
     178        $("[data-responsive=background].lazy[data-top]").each(function() {
     179                this_img = $(this);
     180                var h = this_img.attr("data-top");
     181                if (h <= limite_bas && h >= limite_haut) charger_url_background_responsive(this_img);
     182        });     
    102183}
    103184
    104185function charger_image_responsive () {
    105186        // Calculer le "top" des images lazy
    106         $(".lazy").each(function() {
     187        $(".lazy, [data-lazy]").each(function() {
    107188                calculer_top_image_responsive($(this));
    108189        });
     
    114195        charger_image_lazy();
    115196
     197        $("[data-responsive=background]:not('.lazy')").each(function() {
     198                        charger_url_background_responsive($(this));
     199        });
    116200
    117201}
  • _plugins_/image_responsive/image_responsive_fonctions.php

    r84245 r86559  
    107107        }
    108108        return preg_replace_callback(",(<img\ [^>]*>),", create_function('$matches', 'return _image_responsive($matches[0],"'.$taille.'",'.$lazy.','.$vertical.');'), $texte);
     109}
     110
     111function background_responsive($src, $taille=120, $lazy) {
     112        if (preg_match("/^<img /i", $src)) {
     113                $src = extraire_attribut($src, "src");
     114        }
     115       
     116               
     117        $tailles = explode("/", $taille);
     118        if (count($tailles) > 1) $taille_defaut = $tailles[0];
     119        else $taille_defaut = $taille;
     120       
     121//      $img = $img[0];
     122        $type_urls = lire_meta("type_urls");
     123        if (preg_match(",^(arbo|libres|html|propres|propres2)$,", $type_urls)) {       
     124                $htactif = true;
     125        }
     126        $src = preg_replace(",\?[0-9]*$,", "", $src);
     127               
     128        if (file_exists($src)) {
     129                $l = largeur($src);
     130                $h = hauteur($src);
     131       
     132               
     133                //$img = inserer_attribut($img, "src", $src);
     134                $ins = "data-src='$src'";
     135                $ins .= " data-responsive='background'";
     136               
     137
     138                if ($l < $taille_defaut) $taille_defaut = $l;
     139                $v = "";
     140               
     141               
     142                if ($htactif) {
     143                        $src = preg_replace(",\.(jpg|png|gif)$,", "-resp$taille_defaut$v.$1", $src);
     144                }
     145                else {
     146                        $src = "index.php?action=image_responsive&amp;img=$src&amp;taille=$taille_defaut$v";
     147                }
     148               
     149               
     150                if ($taille_defaut == 0) $src = "rien.gif";
     151                if ($lazy == 1) $ins .= " data-lazy='lazy'";
     152
     153                $ins .= " data-l='$l'";
     154                $ins .= " data-h='$h'";
     155                $ins .= " class='$class'";
     156               
     157                if (count($tailles) > 1) {
     158                        sort($tailles);
     159                        include_spip("inc/json");
     160                       
     161                        $ins .= " data-tailles='".addslashes(json_encode($tailles)) ."'";
     162                }
     163               
     164                $ins .= " style='background-image:url($src)'";
     165               
     166                return $ins;
     167        }
     168       
    109169
    110170}
     171
    111172
    112173function image_proportions($img, $largeur=16, $hauteur=9, $align="center") {
  • _plugins_/image_responsive/paquet.xml

    r85593 r86559  
    22        prefix="image_responsive"
    33        categorie="outil"
    4         version="2.3.0"
     4        version="2.4.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.1.*]"
Note: See TracChangeset for help on using the changeset viewer.