Génère versions WebP si l’on définit la nouvelle variable: (4df3d44b) · Validations · 23forward / image_responsive

action/image_responsive.php

+3 −1

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		@@ -9,10 +9,12 @@ function action_image_responsive() {
		$taille = _request("taille");
		$dpr = _request("dpr");
		$xsendfile = _request("xsendfile");
		$format = _request("format");
		if (!$format) $format = "auto";

		// Gérer le plugin mutualisation
		#if (defined('_DIR_SITE'))
		# $img = _DIR_SITE.$img;

		return retour_image_responsive($img, $taille, $dpr, $xsendfile, "http");
		return retour_image_responsive($img, $taille, $dpr, $xsendfile, "http", $format);
		}

ajouter_a_htaccess.txt

+2 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		@@ -6,6 +6,8 @@

		<IfModule xmod_sendfile.c>
		XSendFile on
		RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg\|png\|gif)(\.webp) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4&xsendfile=1&format=webp
		RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg\|png\|gif) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4&xsendfile=1
		</IfModule>
		RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg\|png\|gif)(\.webp) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4&format=webp
		RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg\|png\|gif) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4

image_responsive_fonctions.php

+50 −4

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		@@ -97,6 +97,7 @@ function _image_responsive($img, $taille = -1, $lazy = 0, $vertical = 0, $medias
		if (file_exists($source)) {
		$l = largeur($source);
		$h = hauteur($source);
		$mime = mime_content_type($source);
		$timestamp = filemtime($source);

		$img = vider_attribut($img, "width");
		@@ -231,26 +232,44 @@ function _image_responsive($img, $taille = -1, $lazy = 0, $vertical = 0, $medias
		$fichiers[$i][1] = retour_image_responsive($source_tmp, "$t$v", 1, 0, "file");
		if (_IMAGE_RESPONSIVE_RETINA_HQ) $fichiers[$i][2] = retour_image_responsive($source_tmp, "$t2$v", 1, 0, "file");
		else $fichiers[$i][2] = retour_image_responsive($source_tmp, "$t$v", 2, 0, "file");

		if (_IMAGE_WEBP) {
		$fichiers_webp[$i][1] = retour_image_responsive($source_tmp, "$t$v", 1, 0, "file", "webp");
		if (_IMAGE_RESPONSIVE_RETINA_HQ) $fichiers_webp[$i][2] = retour_image_responsive($source_tmp, "$t2$v", 1, 0, "file", "webp");
		else $fichiers_webp[$i][2] = retour_image_responsive($source_tmp, "$t$v", 2, 0, "file", "webp");
		}
		} else {
		if ($htactif) {
		$fichiers[$i][1] = preg_replace(",\.(jpg\|png\|gif)$,", "-resp$t$v.$1?$timestamp", $source_tmp);
		if (_IMAGE_RESPONSIVE_RETINA_HQ) $fichiers[$i][2] = preg_replace(",\.(jpg\|png\|gif)$,", "-resp$t2$v.$1?$timestamp", $source_tmp);
		else $fichiers[$i][2] = preg_replace(",\.(jpg\|png\|gif)$,", "-resp$t$v-2.$1?$timestamp", $source_tmp);

		if (_IMAGE_WEBP) {
		$fichiers_webp[$i][1] = preg_replace(",\.(jpg\|png\|gif)$,", "-resp$t$v.$1.webp?$timestamp", $source_tmp);
		if (_IMAGE_RESPONSIVE_RETINA_HQ) $fichiers_webp[$i][2] = preg_replace(",\.(jpg\|png\|gif)$,", "-resp$t2$v.$1.webp?$timestamp", $source_tmp);
		else $fichiers_webp[$i][2] = preg_replace(",\.(jpg\|png\|gif)$,", "-resp$t$v-2.$1.webp?$timestamp", $source_tmp);
		}
		} else {
		$fichiers[$i][1] = "index.php?action=image_responsive&img=$source_tmp&taille=$t$v&$timestamp";
		if (_IMAGE_RESPONSIVE_RETINA_HQ) $fichiers[$i][2] = "index.php?action=image_responsive&img=$source_tmp&taille=$t2$v&$timestamp";
		else $fichiers[$i][2] = "index.php?action=image_responsive&img=$source_tmp&taille=$t$v&dpr=2&$timestamp";

		if (_IMAGE_WEBP) {
		$fichiers_webp[$i][1] = "index.php?action=image_responsive&img=$source_tmp&taille=$t$v&format=webp&$timestamp&";
		if (_IMAGE_RESPONSIVE_RETINA_HQ) $fichiers_webp[$i][2] = "index.php?action=image_responsive&img=$source_tmp&taille=$t2$v&format=webp&$timestamp";
		else $fichiers_webp[$i][2] = "index.php?action=image_responsive&img=$source_tmp&taille=$t$v&dpr=2&format=webp&$timestamp";
		}
		}

		}

		}
		// Fabriquer automatiquement un srcset s'il n'y a qu'une seule taille d'image (pour 1x et 2x)
		if (count($tailles) == 1 && $lazy != 1) { // Pas de srcset sur les images lazy
		$t = $tailles[0];
		if ($t != 0 ) {
		$srcset[] = $fichiers[1][1] . " 1x";
		$srcset[] = $fichiers[1][2] . " 2x";

		}
		}

		@@ -270,11 +289,26 @@ function _image_responsive($img, $taille = -1, $lazy = 0, $vertical = 0, $medias
		$source_tmp = $source;
		$set = $fichiers[$i][1] . " 1x";
		$set .= "," . $fichiers[$i][2] . " 2x";
		if (_IMAGE_WEBP) {
		$set_webp = $fichiers_webp[$i][1] . " 1x";
		$setset_webp .= "," . $fichiers_webp[$i][2] . " 2x";
		}

		if (strlen($m) > 0) {
		$insm = " media='$m'";
		$sources .= "<source$insm srcset='$set'>";

		if (_IMAGE_WEBP) {
		$sources .= "<source$insm srcset='$set_webp' type='image/webp'>";
		}
		$sources .= "<source$insm srcset='$set' type='$mime'>";



		} else {
		if (_IMAGE_WEBP) {
		$sources .= "<source srcset='$set_webp' type='image/webp'>";
		$sources .= "<source srcset='$set' type='$mime'>";
		}

		//$sources .= "<source srcset='$set'>";
		//$set = find_in_path("rien.gif");
		@@ -295,6 +329,10 @@ function _image_responsive($img, $taille = -1, $lazy = 0, $vertical = 0, $medias

		$autorisees[$t][1] = $fichiers[$i][1];
		$autorisees[$t][2] = $fichiers[$i][2];
		if (_IMAGE_WEBP) {
		$autorisees_webp[$t][1] = $fichiers_webp[$i][1];
		$autorisees_webp[$t][2] = $fichiers_webp[$i][2];
		}
		}
		}
		}
		@@ -307,6 +345,10 @@ function _image_responsive($img, $taille = -1, $lazy = 0, $vertical = 0, $medias
		if ($autorisees) {
		$autorisees = json_encode($autorisees);
		$img = inserer_attribut($img, "data-autorisees", $autorisees);
		if (_IMAGE_WEBP) {
		$autorisees_webp = json_encode($autorisees_webp);
		$img = inserer_attribut($img, "data-autorisees_webp", $autorisees_webp);
		}
		}


		@@ -359,6 +401,10 @@ function _image_responsive($img, $taille = -1, $lazy = 0, $vertical = 0, $medias
		$img .= "\n<link href='" . $f[1] . "' rel='attachment' property='url'>"
		. "\n<link href='" . $f[2] . "' rel='attachment' property='url'>";
		}
		foreach ($fichiers_webp as $f) {
		$img .= "\n<link href='" . $f[1] . "' rel='attachment' property='url'>"
		. "\n<link href='" . $f[2] . "' rel='attachment' property='url'>";
		}
		}

image_responsive_options.php

+17 −8

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		@@ -6,6 +6,7 @@ if (!defined('_ECRIRE_INC_VERSION')) {


		if (!defined("_IMAGE_RESPONSIVE_CALCULER")) define("_IMAGE_RESPONSIVE_CALCULER", false);
		if (!defined("_IMAGE_WEBP")) define("_IMAGE_WEBP", false);
		if (!defined("_SPIP_LIER_RESSOURCES")) define("_SPIP_LIER_RESSOURCES", false);
		if (!defined("_IMAGE_RESPONSIVE_RETINA_HQ")) define("_IMAGE_RESPONSIVE_RETINA_HQ", true);

		@@ -19,7 +20,7 @@ function _findSharp($intOrig, $intFinal) {
		}


		function image_reduire_net($source, $taille = 0, $taille_y=0, $dpr=0) {
		function image_reduire_net($source, $taille = 0, $taille_y=0, $dpr=0, $forcer_format="auto") {
		// ordre de preference des formats graphiques pour creer les vignettes
		// le premier format disponible, selon la methode demandee, est utilise

		@@ -163,13 +164,20 @@ function image_reduire_net($source, $taille = 0, $taille_y=0, $dpr=0) {

		imageconvolution($destImage, $arrMatrix, $divisor, 0);
		}


		// Sauvegarde de l'image destination
		$valeurs['fichier_dest'] = $vignette = "$destination.$destFormat";
		$valeurs['format_dest'] = $format = $destFormat;

		if ($forcer_format == "webp") {
		$valeurs['fichier_dest'] = $vignette = "$destination.$destFormat.webp";
		imagewebp ($destImage, $vignette);
		} else {
		if ($dpr > 1.5) $qualite = 40;
		else $qualite=_IMG_GD_QUALITE;
		_image_gd_output($destImage,$valeurs, $qualite);
		}

		if ($srcImage)
		ImageDestroy($srcImage);
		@@ -204,7 +212,7 @@ function image_reduire_net($source, $taille = 0, $taille_y=0, $dpr=0) {



		function retour_image_responsive($img, $taille, $dpr, $xsendfile, $retour="http"){
		function retour_image_responsive($img, $taille, $dpr, $xsendfile, $retour="http", $format="auto"){
		if (!preg_match(',\.(gif\|jpe?g\|png)$,i', $img)
		OR !preg_match(',^\d+v?$,', $taille)
		OR !preg_match(',^[\d\.]*$,', $dpr)
		@@ -238,6 +246,7 @@ function retour_image_responsive($img, $taille, $dpr, $xsendfile, $retour="http"
		else $dpr = false;

		$dest = $base.$dest.".".$terminaison;
		if ($format == "webp") $dest .= ".webp";

		if (file_exists($dest)) {
		if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
		@@ -261,9 +270,9 @@ function retour_image_responsive($img, $taille, $dpr, $xsendfile, $retour="http"
		// et on fait donc les tests sans déclencher la cavalerie
		spip_log("fabrication de l'image responsive $dest","image_responsive");
		if ($v) {
		$img_new = image_reduire_net ($img, 0, $taille, $dpr);
		$img_new = image_reduire_net ($img, 0, $taille, $dpr, $format);
		} else {
		$img_new = image_reduire_net ($img, $taille, 0, $dpr);
		$img_new = image_reduire_net ($img, $taille, 0, $dpr, $format);
		}
		$img_new = extraire_attribut($img_new, "src");

javascript/image_responsive.js

+28 −1

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		function _image_responsive_test_webp_reel (){
		// Méthode synchrone - mais Firefox ne détecte pas correctement (tant pis pour l'instant…)
		var elem = document.createElement('canvas');

		if (!!(elem.getContext && elem.getContext('2d'))) {
		// was able or not to get WebP representation
		return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
		}

		// very old browser like IE 8, canvas not supported
		return false;
		}
		var _image_responsive_test_webp_val = "init";
		function _image_responsive_test_webp (){
		if (_image_responsive_test_webp_val == "init") _image_responsive_test_webp_val = _image_responsive_test_webp_reel();
		return _image_responsive_test_webp_val;
		}

		function charger_url_image_responsive(this_img) {
		var dPR = window.devicePixelRatio;
		var src = this_img.attr("data-src");
		@@ -20,6 +38,7 @@ function charger_url_image_responsive(this_img) {
		var numdim = [];
		if (tailles) {
		var w_max = 0;
		var taille_max = 0;
		var t = $.parseJSON(tailles.replace(/\\"/g, '"'));
		var changer_w = 1;

		@@ -33,6 +52,7 @@ function charger_url_image_responsive(this_img) {
		if (changer_w == 1) w_max = value;
		if (value >= dim) changer_w = 0;
		//numdim[w_max] = i;
		if (value >= taille_max) taille_max = value;

		});
		//console.log ("Wmax: "+w_max);
		@@ -46,7 +66,10 @@ function charger_url_image_responsive(this_img) {
		if (autorisees) {
		autorisees = $.parseJSON(autorisees.replace(/\\"/g, '"'));
		}

		var autorisees_webp = this_img.attr("data-autorisees_webp");
		if (autorisees_webp) {
		if (_image_responsive_test_webp()) autorisees = $.parseJSON(autorisees_webp.replace(/\\"/g, '"'));
		}

		// Si l'image est trop petite, c'est pas la peine de demander trop grand…
		if (vertical && parseInt(dim) > parseInt(h)) {
		@@ -73,6 +96,8 @@ function charger_url_image_responsive(this_img) {

		if (image_responsive_retina_hq && dPR) {
		dim = dim * dPR;
		if (taille_max > 0 & dim > taille_max) dim = taille_max;

		dPR = false;
		}
		} else {
		@@ -85,11 +110,13 @@ function charger_url_image_responsive(this_img) {
		else {
		if (htactif) {
		racine = src.substr(0, src.length-4);
		console.log(racine);
		terminaison = src.substr(src.length-3, 3);
		var url_img = racine+"-resp"+dim;
		if (vertical) url_img = url_img + "v";
		if (dPR) url_img = url_img + "-"+dPR;
		url_img = url_img + "."+terminaison;
		if (_image_responsive_test_webp()) url_img = url_img + ".webp";
		} else {
		var url_img = "index.php?action=image_responsive&img="+src+"&taille="+dim;
		if (vertical) url_img = url_img + "v";