Changeset 115790 in spip-zone


Ignore:
Timestamp:
Jun 26, 2019, 12:47:00 PM (8 weeks ago)
Author:
cedric@…
Message:

le filtre |adaptive_images_background() permet d'avoir uniquement un span avec son image adaptive en background, sans balise img
le span est dimensionne avec la methode des intrinsic ratio, et a une classe supplementaire .adapt-img-background

L'idee est que cette methode continuera a fonctionner a l'identique meme si |adaptive_images() passe lui a un img+srcset ou autre technique html5, il faut donc l'utiliser quand on compte sur le background genere par l'actuelle methode

Location:
_plugins_/adaptive_images/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/adaptive_images/trunk/adaptive_images_options.php

    r115788 r115790  
    141141}
    142142
    143 
    144 /** Filtre  ***********************************************************************************************************/
    145 
    146 /**
    147  * Rendre les images d'un texte adaptatives, en permettant de preciser la largeur maxi a afficher en 1x
    148  * [(#TEXTE|adaptive_images{1024})]
    149  * ou passer la liste des breakpoints (le dernier est la largeur maxi 1x)
    150  * [(#TEXTE|adaptive_images{160/320/480/640/1024})]
    151  * @param string $texte
    152  * @param null|int $max_width_1x
    153  * @return mixed
    154  */
    155 function adaptive_images($texte,$max_width_1x=null){
     143/**
     144 * Fonction de base pour les filtres, ne pas utiliser directement
     145 * @protected
     146 *
     147 * @param $texte
     148 * @param $max_width_1x
     149 * @param bool $background_only
     150 * @return mixed|string
     151 */
     152function adaptive_images_base($texte, $max_width_1x, $background_only = false){
    156153        $bkpt = null;
    157154        // plusieurs valeurs separees par un / : ce sont les breakpoints, max_width_1x est la derniere valeur
     
    166163        }
    167164        $AdaptiveImages = SPIPAdaptiveImages::getInstance();
    168         $res = $AdaptiveImages->adaptHTMLPart($texte, $max_width_1x, $bkpt);
     165        $res = $AdaptiveImages->adaptHTMLPart($texte, $max_width_1x, $bkpt, $background_only);
    169166
    170167        // injecter la class filtre_inactif sur les balises img pour ne pas repasser un filtre image dessus
     
    183180}
    184181
     182/** Filtres  ***********************************************************************************************************/
     183
     184
     185/**
     186 * Rendre les images d'un texte adaptatives, en permettant de preciser la largeur maxi a afficher en 1x
     187 * [(#TEXTE|adaptive_images{1024})]
     188 * ou passer la liste des breakpoints (le dernier est la largeur maxi 1x)
     189 * [(#TEXTE|adaptive_images{160/320/480/640/1024})]
     190 * @param string $texte
     191 * @param null|int $max_width_1x
     192 * @return mixed
     193 */
     194function adaptive_images($texte, $max_width_1x=null){
     195        return adaptive_images_base($texte, $max_width_1x);
     196}
     197
     198/**
     199 * Rendre les images d'un texte adaptatives mais en background sur des span seulement (pas de balise <img>)
     200 * @param string $texte
     201 * @param null|int $max_width_1x
     202 * @return mixed
     203 */
     204function adaptive_images_background($texte, $max_width_1x=null){
     205        return adaptive_images_base($texte, $max_width_1x, true);
     206}
     207
    185208/**
    186209 * nommage alternatif
     
    189212 * @return mixed
    190213 */
    191 function adaptative_images($texte,$max_width_1x=null){
    192         return adaptive_images($texte,$max_width_1x);
     214function adaptative_images($texte, $max_width_1x=null){
     215        return adaptive_images($texte, $max_width_1x);
    193216}
    194217
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/AdaptiveImages.php

    r115789 r115790  
    33 * AdaptiveImages
    44 *
    5  * @version    1.9.0
     5 * @version    1.10.0
    66 * @copyright  2013-2019
    77 * @author     Nursit
     
    316316
    317317                        // Common styles for all adaptive images during loading
    318                         $ins = "<style type='text/css'>"."img.adapt-img,.lazy img.adapt-img{opacity:0.70;filter:blur(5px);max-width:100%;height:auto;}"
    319                         .".adapt-img-wrapper,.adapt-img-wrapper:after{display:inline-block;max-width:100%;position:relative;-webkit-background-size:100% auto;;-webkit-background-size:cover;background-size:cover;background-repeat:no-repeat;line-height:1px;overflow:hidden}"
    320                         ."html body .adapt-img-wrapper.lazy,html.lazy body .adapt-img-wrapper,html body .adapt-img-wrapper.lazy:after,html.lazy body .adapt-img-wrapper:after{background-image:none}"
    321                         .".adapt-img-wrapper:after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\"}"
    322                         ."@media print{html .adapt-img-wrapper{background:none}html .adapt-img-wrapper img {opacity:1}html .adapt-img-wrapper:after{display:none}}"
     318                        $base_style = "<style type='text/css'>"."img.adapt-img,.lazy img.adapt-img{opacity:0.70;filter:blur(5px);max-width:100%;height:auto;}"
     319                        .".adapt-img-wrapper,.adapt-img-wrapper::after{display:inline-block;max-width:100%;position:relative;-webkit-background-size:100% auto;-webkit-background-size:cover;background-size:cover;background-repeat:no-repeat;line-height:1px;overflow:hidden}"
     320                        .".adapt-img-background::after{display:none;width:100%;height:0;}"
     321                        ."html body .adapt-img-wrapper.lazy,html.lazy body .adapt-img-wrapper,html body .adapt-img-wrapper.lazy::after,html.lazy body .adapt-img-wrapper::after{background-image:none}"
     322                        .".adapt-img-wrapper::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\"}"
     323                        ."@media print{html .adapt-img-wrapper{background:none}html .adapt-img-wrapper img {opacity:1}html .adapt-img-wrapper::after{display:none}}"
    323324                        ."</style>\n";
    324325                        // JS that evaluate connection speed and add a aislow class on <html> if slow connection
    325326                        // and onload JS that adds CSS to finish rendering
    326                         $async_style = "html img.adapt-img{opacity:0.01}html .adapt-img-wrapper:after{display:none;}";
     327                        $async_style = "html img.adapt-img{opacity:0.01}html .adapt-img-wrapper::after{display:none;}";
    327328                        $length = strlen($html)+strlen($ins_style)+2000; // ~2000 bytes for CSS and minified JS we add here
    328329                        // minified version of AdaptiveImages.js (using https://closure-compiler.appspot.com/home)
    329                         $ins .= "<script type='text/javascript'>/*<![CDATA[*/var adaptImgDocLength=$length;adaptImgAsyncStyles=\"$async_style\";adaptImgLazy=".($this->lazyload?"true":"false").";".<<<JS
     330                        $ins = "<script type='text/javascript'>/*<![CDATA[*/var adaptImgDocLength=$length;adaptImgAsyncStyles=\"$async_style\";adaptImgLazy=".($this->lazyload?"true":"false").";".<<<JS
    330331function adaptImgFix(d){var e=window.getComputedStyle(d.parentNode).backgroundImage.replace(/\W?\)$/,"").replace(/^url\(\W?|/,"");d.src=e&&"none"!=e?e:d.src}(function(){function d(a){var b=document.documentElement;b.className=b.className+" "+a}function e(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b&&b();a()}}document.createElement("picture");adaptImgLazy&&d("lazy");/android 2[.]/i.test(navigator.userAgent.toLowerCase())&&d("android2");var c=!1;if("undefined"!==typeof window.performance)c=window.performance.timing,c=(c=~~(adaptImgDocLength/(c.responseEnd-c.connectStart)))&&50>c;else{var f=navigator.connection||navigator.mozConnection||navigator.webkitConnection;"undefined"!==typeof f&&(c=3==f.type||4==f.type||/^[23]g$/.test(f.type))}c&&d("aislow");var h=function(){var a=document.createElement("style");a.type="text/css";a.innerHTML=adaptImgAsyncStyles;var b=document.getElementsByTagName("style")[0];b.parentNode.insertBefore(a,b);window.matchMedia||window.onbeforeprint||g()};"undefined"!==typeof jQuery?jQuery(function(){jQuery(window).load(h)}):e(h);var g=function(){for(var a=document.getElementsByClassName("adapt-img"),b=0;b<a.length;b++)adaptImgFix(a[b])};window.matchMedia&&window.matchMedia("print").addListener(function(a){g()});"undefined"!==typeof window.onbeforeprint&&(window.onbeforeprint=g)})();
    331332JS;
     
    333334                        // alternative noscript if no js (to de-activate progressive rendering on PNG and GIF)
    334335                        if (!$this->nojsPngGifProgressiveRendering)
    335                                 $ins .= "<noscript><style type='text/css'>.png img.adapt-img,.gif img.adapt-img{opacity:0.01} .adapt-img-wrapper.png:after,.adapt-img-wrapper.gif:after{display:none;}</style></noscript>";
     336                                $ins .= "<noscript><style type='text/css'>.png img.adapt-img,.gif img.adapt-img{opacity:0.01} .adapt-img-wrapper.png::after,.adapt-img-wrapper.gif::after{display:none;}</style></noscript>";
    336337
    337338                        $ins .= $ins_style;
     
    339340                        // insert before first <script or <link
    340341                        if ($p = strpos($html,"<link") OR $p = strpos($html,"<script") OR $p = strpos($html,"</head"))
    341                                 $html = substr_replace($html,"<!--[if !IE]><!-->$ins\n<!--<![endif]-->\n",$p,0);
     342                                $html = substr_replace($html,"$base_style<!--[if !IE]><!-->$ins\n<!--<![endif]-->\n",$p,0);
    342343                }
    343344                return $html;
     
    352353         * @param int $maxWidth1x
    353354         *   max display width for images 1x
     355         * @param bool $asBackground
     356         *   markup with image as a background only
    354357         * @param array|null $bkpt
    355358         * @return string
    356359         */
    357         public function adaptHTMLPart($html,$maxWidth1x=null,$bkpt=null){
     360        public function adaptHTMLPart($html,$maxWidth1x=null,$bkpt=null,$asBackground=false){
    358361                static $bkpts = array();
    359362                if (is_null($maxWidth1x) OR !intval($maxWidth1x))
     
    378381                if (count($matches)){
    379382                        foreach($matches as $m){
    380                                 $ri = $this->processImgTag($m[0], $bkpt, $maxWidth1x);
     383                                $ri = $this->processImgTag($m[0], $bkpt, $maxWidth1x, $asBackground);
    381384                                if ($ri!==$m[0]){
    382385                                        $replace[$m[0]] = $ri;
     
    558561         * @param int $maxWidth1x
    559562         *   max display with of image (in 1x)
     563         * @param bool $asBackground
     564         *   markup with image as a background only
    560565         * @return string
    561566         *   html markup : original markup or adapted markup
    562567         */
    563         protected function processImgTag($img, $bkpt, $maxWidth1x){
     568        protected function processImgTag($img, $bkpt, $maxWidth1x, $asBackground = false){
    564569                if (!$img) return $img;
    565570
     
    705710
    706711                // ok, now build the markup
    707                 return $this->imgAdaptiveMarkup($img, $images, $w, $h, $extension, $maxWidth1x);
     712                return $this->imgAdaptiveMarkup($img, $images, $w, $h, $extension, $maxWidth1x, $asBackground);
    708713        }
    709714
     
    717722         * @return float|mixed
    718723         */
    719         function lowsrcQualityOptimize($width_fallback, $lowsrcBaseQuality, $width, $height, $maxWidth1x){
     724        protected function lowsrcQualityOptimize($width_fallback, $lowsrcBaseQuality, $width, $height, $maxWidth1x){
    720725                // $this->lowsrcJpgQuality give a base quality for a 450kpx image size
    721726                // quality is varying around this value (+/- 50%) depending of image pixel size
     
    744749         * @param string $extension
    745750         * @param int $maxWidth1x
     751         * @param bool $asBackground
    746752         * @return string
    747753         */
    748         function imgAdaptiveMarkup($img, $bkptImages, $width, $height, $extension, $maxWidth1x){
     754        protected function imgAdaptiveMarkup($img, $bkptImages, $width, $height, $extension, $maxWidth1x, $asBackground = false){
    749755                $originalClass = $class = $this->tagAttribute($img,"class");
    750756                if (strpos($class,"adapt-img")!==false) return $img;
     
    798804                                        $not = $htmlsel[$kx];
    799805                                        $url = $this->filepath2URL($file);
    800                                         $medias[$mw] = "@media $mw{{$not} .$cid,{$not} .$cid:after{background-image:url($url);}}";
     806                                        $medias[$mw] = "@media $mw{{$not} .$cid,{$not} .$cid::after{background-image:url($url);}}";
    801807                                }
    802808                        }
     
    809815                        $file = $bkptImages[$wandroid]['15x'];
    810816                        $url = $this->filepath2URL($file);
    811                         $medias['android2'] = "html.android2 .$cid,html.android2 .$cid:after{background-image:url($url);}";
     817                        $medias['android2'] = "html.android2 .$cid,html.android2 .$cid::after{background-image:url($url);}";
    812818                }
    813819
    814820                // Media-Queries
    815821                $style .= implode("",$medias);
    816 
    817 
    818822                $originalStyle = $this->tagAttribute($img,"style");
    819                 $out = "<!--[if IE]>$img<![endif]-->\n";
    820 
    821                 $img = $this->setTagAttribute($img,"src",$fallback_file);
    822                 $img = $this->setTagAttribute($img,"class","adapt-img $class");
    823                 $img = $this->setTagAttribute($img,"onmousedown","adaptImgFix(this)");
    824                 // $img = setTagAttribute($img,"onkeydown","adaptImgFix(this)"); // useful ?
    825 
    826                 // markup can be adjusted in hook, depending on style and class
    827                 $markup = "<picture class=\"adapt-img-wrapper $cid $extension\">$img</picture>";
    828                 $markup = $this->imgMarkupHook($markup,$originalClass,$originalStyle);
    829 
    830                 $out .= "<!--[if !IE]><!-->$markup\n<style>".$style."</style><!--<![endif]-->";
     823
     824                if ($asBackground) {
     825                        // if we just want a background image: a span with a class
     826                        $ratio = round(100 * $height/$width, 2);
     827                        $out = "<span class=\"adapt-img-wrapper adapt-img-background $cid $extension\" style='padding-bottom: {$ratio}%;'></span>\n<style>".$style."</style>";
     828                }
     829                else {
     830                        $out = "<!--[if IE]>$img<![endif]-->\n";
     831
     832                        $img = $this->setTagAttribute($img,"src",$fallback_file);
     833                        $img = $this->setTagAttribute($img,"class","adapt-img $class");
     834                        $img = $this->setTagAttribute($img,"onmousedown","adaptImgFix(this)");
     835                        // $img = setTagAttribute($img,"onkeydown","adaptImgFix(this)"); // useful ?
     836
     837                        // markup can be adjusted in hook, depending on style and class
     838                        $markup = "<picture class=\"adapt-img-wrapper $cid $extension\">$img</picture>";
     839                        $markup = $this->imgMarkupHook($markup,$originalClass,$originalStyle);
     840
     841                        $out .= "<!--[if !IE]><!-->$markup\n<style>".$style."</style><!--<![endif]-->";
     842                }
    831843
    832844                return $out;
  • _plugins_/adaptive_images/trunk/paquet.xml

    r115788 r115790  
    22        prefix="adaptive_images"
    33        categorie="multimedia"
    4         version="1.10.0"
     4        version="1.11.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.2.*]"
Note: See TracChangeset for help on using the changeset viewer.