source: spip-zone/_plugins_/image_responsive/image_responsive_fonctions.php @ 88918

Last change on this file since 88918 was 88918, checked in by arno@…, 5 years ago

Accepter les recadrage dans |image_responsive avec des pourcentages et des zéros:

|image_responsive{

588/840/1280/1920,
0,
0,
(max-width: 420px)/(min-width:421px) and (max-width: 700px)/(min-width:701px) and (max-width:1280px)/,
71%x0/83%x0/0x0/0x0

}

File size: 12.2 KB
Line 
1<?php
2
3function image_responsive_insert_head_css($flux) {
4        $flux .= "\n<link rel='stylesheet' type='text/css' media='all' href='".find_in_path("image_responsive.css")."'>\n";
5
6        return $flux;
7}
8
9function image_responsive_insert_head($flux) {
10        $type_urls = lire_meta("type_urls");
11        $htactif = 0;
12        if (preg_match(",^(arbo|libres|html|propres|propres2)$,", $type_urls)) {       
13                $htactif = 1;
14        }
15       
16        $flux .= "<script>htactif=$htactif;document.createElement('picture');</script>";
17        $flux .= "
18<script type='text/javascript' src='".find_in_path("javascript/jquery.smartresize.js")."'></script>
19<script type='text/javascript' src='".find_in_path("javascript/image_responsive.js")."'></script>
20<script type='text/javascript' src='".find_in_path("javascript/picturefill.js")."'></script>
21                ";
22       
23        return $flux;
24}
25
26function image_responsive_header_prive($flux) {
27        $flux .= "\n<link rel='stylesheet' type='text/css' media='all' href='".find_in_path("image_responsive.css")."'>\n";
28        $flux .= "<script>htactif=false;document.createElement('picture');</script>";
29
30        $flux .= "
31<script type='text/javascript' src='".find_in_path("javascript/jquery.smartresize.js")."'></script>
32<script type='text/javascript' src='".find_in_path("javascript/image_responsive.js")."'></script>
33<script type='text/javascript' src='".find_in_path("javascript/picturefill.js")."'></script>
34                ";
35
36        return $flux;
37}
38
39
40function _image_responsive($img, $taille=-1, $lazy=0, $vertical = 0, $medias="", $proportions="") {
41        $taille_defaut = -1;
42       
43        if ($taille == -1) {
44                $taille_defaut = 120;
45                $taille = "";   
46        }
47
48        if (preg_match(",^0$|^0\/,", $taille)) {
49                $taille_defaut = 0;
50                $taille = preg_replace(",^0$|^0\/,", "", $taille);
51        }
52
53
54        $tailles = explode("/", $taille);
55       
56        if ($taille_defaut < 0) {
57                if (count($tailles) > 0) $taille_defaut = $tailles[0];
58                else $taille_defaut = $taille;
59        }
60
61//      $img = $img[0];
62        $type_urls = lire_meta("type_urls");
63        if (preg_match(",^(arbo|libres|html|propres|propres2)$,", $type_urls)) {       
64                $htactif = true;
65        }
66        $source = extraire_attribut($img, "src");
67        $source = preg_replace(",\?[0-9]*$,", "", $source);
68        if (file_exists($source)) {
69                $l = largeur($source);
70                $h = hauteur($source);
71
72                $img = vider_attribut($img, "width");
73                $img = vider_attribut($img, "height");
74                $img = vider_attribut($img, "style");
75
76
77                // Récupérer les proportions et éventuellement recadrer
78                $proportions = explode("/", $proportions);
79                if (count($proportions) > 0) {
80                        $i = 0;
81                        foreach($proportions as $prop) {
82                                $i++;
83                                $prop = trim ($prop);
84                                $regs_l = false;
85                                $regs_h = false;
86                                if (preg_match(",^([0-9\.]+\%?)(x([0-9\.]+\%?))?(x([a-z]*))?(x([0-9\.]*))?$,", $prop, $regs)) {
87                               
88                                        if ($regs[1] == "0") $regs[1] = $l;
89                                        if ($regs[3] == "0") $regs[3] = $h;
90                               
91                                        $p[$i]["l"] = $regs[1];
92                                        $p[$i]["h"] = $regs[3];
93                                        $p[$i]["f"] = $regs[5];
94                                        $p[$i]["z"] = $regs[7];
95
96                                        // Gérer les dimensions en pourcentages
97                                        preg_match(",([0-9\.]+)\%$,", $regs[1],$regs_l);
98                                        preg_match(",([0-9\.]+)\%$,", $regs[3],$regs_h);
99                                       
100                                        if ($regs_l[1]>0 OR $regs_h[1]>0) {
101                                                if ($regs_l[1] > 0) $p[$i]["l"] = $l * $regs_l[1] / 100;
102                                                else $p[$i]["l"] = $l;
103                                                if ($regs_h[1] > 0) $p[$i]["h"] = $h * $regs_h[1] / 100;
104                                                else $p[$i]["h"] = $h;
105                                        }
106
107                                       
108                                        if (!$regs[5]) $p[$i]["f"] = "center";
109                                        if (!$regs[7]) $p[$i]["z"] = 1;
110                                }
111                        }
112                }
113                if (count($p) == 1) {
114                        $source = image_proportions($source, $p[1]["l"], $p[1]["h"], $p[1]["f"], $p[1]["z"]);
115                        $source = extraire_attribut($source,"src");
116                }
117
118       
119                //$img = inserer_attribut($img, "src", $src);
120                $img = inserer_attribut($img, "data-src", $source);
121                $classe = "image_responsive";
122               
123                if ($vertical == 1) {
124                        $classe .= " image_responsive_v";
125                        $v = "v";       
126                        if ($h < $taille_defaut) $taille_defaut = $h;
127                } else {
128                        $v = "";
129                        if ($l < $taille_defaut) $taille_defaut = $l;
130                }
131               
132                if ($htactif) {
133                        $src = preg_replace(",\.(jpg|png|gif)$,", "-resp$taille_defaut$v.$1", $source);
134                }
135                else {
136                        $src = "index.php?action=image_responsive&amp;img=$source&amp;taille=$taille_defaut$v";
137                }
138               
139                if ($taille_defaut == 0) $src = "rien.gif";
140                if ($lazy == 1) $classe .= " lazy";
141                $img = inserer_attribut($img, "data-l", $l);
142                $img = inserer_attribut($img, "data-h", $h);
143               
144                // Gérer les tailles autorisées
145                if (count($tailles) > 0) {
146                        sort($tailles);
147                        include_spip("inc/json");
148                       
149                        $img = inserer_attribut($img, "data-tailles", addslashes(json_encode($tailles)));
150
151
152                        // Fabriquer automatiquement un srcset s'il n'y a qu'une seule taille d'image (pour 1x et 2x)
153                        if (count($tailles) == 1 && $lazy != 1) { // Pas de srcset sur les images lazy
154                                        $t = $tailles[0];
155                                        if ($t != 0 && $t <= $l) {
156                                       
157                                                if ($htactif) {
158                                                        $srcset[] = preg_replace(",\.(jpg|png|gif)$,", "-resp$t$v.$1", $source)." 1x";
159                                                        $srcset[] = preg_replace(",\.(jpg|png|gif)$,", "-resp$t$v-2.$1", $source)." 2x";
160                                                }
161                                                else {
162                                                        $srcset[] = "index.php?action=image_responsive&amp;img=$source&amp;taille=$t$v 1x";
163                                                        $srcset[] = "index.php?action=image_responsive&amp;img=$source&amp;taille=$t$v&amp;dpr=2 2x";
164                                                }
165                                        }
166                        }
167
168                       
169                        // Fabriquer des <source> s'il y a plus d'une taille associée à des sizes
170                        if (count($tailles) > 1 && $lazy != 1) {
171                                $medias = explode("/", $medias);
172                                if (count($tailles) == count($medias)) {
173                                        $i = 0;
174                                        foreach($tailles as $t) {
175                                                $m = trim($medias[$i]);
176                                                $i++;
177                                               
178                                                $source_tmp = $source;
179                                               
180                                                if (count($p) > 1 && count($p[$i]) > 1) {
181                                                        $source_tmp = image_proportions($source_tmp, $p[$i]["l"], $p[$i]["h"], $p[$i]["f"], $p[$i]["z"]);
182                                                        $source_tmp = extraire_attribut($source_tmp,"src");
183                                                       
184                                                        $pad_bot_styles[$m] = "padding-bottom:" .(($p[$i]["h"]/$p[$i]["l"])*100)."%!important";
185                                                       
186                                                }
187
188                                                if ($htactif) {
189                                                        $set = preg_replace(",\.(jpg|png|gif)$,", "-resp$t$v.$1", $source_tmp)." 1x";
190                                                        $set .= ",".preg_replace(",\.(jpg|png|gif)$,", "-resp$t$v-2.$1", $source_tmp)." 2x";
191                                                }
192                                                else {
193                                                        $set = "index.php?action=image_responsive&amp;img=$source_tmp&amp;taille=$t$v 1x";
194                                                        $set .= ","."index.php?action=image_responsive&amp;img=$source_tmp&amp;taille=$t$v&amp;dpr=2 2x";
195                                                }
196                                               
197                                                if (strlen($m) > 0) {
198                                                        $insm = " media='$m'";
199                                                        $sources .= "<source$insm srcset='$set'>";
200                                                }
201                                                else {
202                                                        $src = find_in_path("rien.gif");
203                                                        $srcset[] = $set;
204                                                }
205                                               
206
207                                        }
208                               
209                                }
210                        }
211                }
212
213                // Gérer le srcset
214                if ($sources || $srcset) $classe .= " avec_picturefill";
215
216                $img = inserer_attribut($img, "src", $src);
217               
218                $img = inserer_attribut($img, "class", $classe);
219                if ($srcset) {
220                        $srcset = join($srcset, ",");                           
221                        $img = inserer_attribut($img, "srcset", $srcset);
222                }
223               
224                if ($sources) {
225                        $sources = "<!--[if IE 9]><video style='display: none;'><![endif]-->$sources<!--[if IE 9]></video><![endif]-->";
226                }
227               
228
229                if ($pad_bot_styles) {
230                        foreach($pad_bot_styles as $m=>$pad) {
231                                $style = "##classe##{".$pad."}";
232                                if ($m) $style = "\n@media $m {".$style."}";
233                                $styles .= $style;
234                        }
235                        $styles = "<style>$styles</style>";
236                        $nom_class = "class".md5($styles);
237                        $styles = str_replace("##classe##", "picture.".$nom_class, $styles);
238                        // pour affichage dans la classe de picture
239                        $nom_class = " ".$nom_class; 
240                }
241               
242                if ($vertical == 0) {
243                        if (count($p) == 1) $r = ($p[1]["h"]/$p[1]["l"]) * 100;
244                        else if (count($p) == 0) $r = (($h/$l)*100);
245                       
246                        if ($r) $aff_r = "padding-bottom:$r%";
247                        $img = "<picture style='padding:0;$aff_r' class='conteneur_image_responsive_h$nom_class'>$sources$img</picture>";
248                } else {
249                        $r = (($h/$l)*100);
250                        $img = "<picture class='conteneur_image_responsive_v$nom_class'>$sources$img</picture>";
251                }
252                $img = $img.$styles;
253        }
254       
255        return $img;
256}
257
258
259
260
261function image_responsive($texte, $taille=-1, $lazy=0, $vertical=0, $medias='', $proportions='') {
262        if (!preg_match("/^<img /i", $texte)) {
263                if (strlen($texte) < 256 && file_exists($texte)) $texte = "<img src='$texte'>";
264                else return $texte;
265        }
266        return preg_replace_callback(",(<img\ [^>]*>),", create_function('$matches', 'return _image_responsive($matches[0],"'.$taille.'",'.$lazy.','.$vertical.',"'.$medias.'","'.$proportions.'");'), $texte);
267}
268
269
270
271
272function background_responsive($src, $taille=120, $lazy=0) {
273
274        if (preg_match("/^<img /i", $src)) {
275                $src = extraire_attribut($src, "src");
276        }
277
278       
279               
280        $tailles = explode("/", $taille);
281        if (count($tailles) > 1) $taille_defaut = $tailles[0];
282        else $taille_defaut = $taille;
283       
284//      $img = $img[0];
285        $type_urls = lire_meta("type_urls");
286        if (preg_match(",^(arbo|libres|html|propres|propres2)$,", $type_urls)) {       
287                $htactif = true;
288        }
289        $src = preg_replace(",\?[0-9]*$,", "", $src);
290               
291        if (file_exists($src)) {
292                include_spip("filtres/images_transforme");
293
294
295                $l = largeur($src);
296                $h = hauteur($src);
297       
298               
299                //$img = inserer_attribut($img, "src", $src);
300               
301                if ($l > $h) {
302                        $ins = "data-italien-src='$src'";
303                        $ins .= " data-italien-l='$l'";
304                        $ins .= " data-italien-h='$h'";
305                       
306                        $srcp = image_reduire($src, 0, 2400);
307                        $srcp = image_proportions($srcp, 3, 4);
308                        $srcp = extraire_attribut($srcp, "src");
309                        $lp = largeur($srcp);
310                        $hp = hauteur($srcp);
311                       
312                        $ins .= "data-portrait-src='$srcp'";
313                        $ins .= " data-portrait-l='$lp'";
314                        $ins .= " data-portrait-h='$hp'";
315               
316                } else {
317                        $ins = "data-portrait-src='$src'";
318                        $ins .= " data-portrait-l='$l'";
319                        $ins .= " data-portrait-h='$h'";
320
321
322                        $srcp = image_reduire($src, 2400, 0);
323                        $srcp = image_proportions($srcp, 4, 3);
324                        $srcp = extraire_attribut($srcp, "src");
325                        $lp = largeur($srcp);
326                        $hp = hauteur($srcp);
327                       
328                        $ins .= " data-italien-src='$srcp'";
329                        $ins .= " data-italien-l='$lp'";
330                        $ins .= " data-italien-h='$hp'";
331                }
332
333
334                $ins .= " data-responsive='background'";
335               
336
337                if ($l < $taille_defaut) $taille_defaut = $l;
338                $v = "";
339               
340               
341                if ($htactif) {
342                        $src = preg_replace(",\.(jpg|png|gif)$,", "-resp$taille_defaut$v.$1", $src);
343                }
344                else {
345                        $src = "index.php?action=image_responsive&amp;img=$src&amp;taille=$taille_defaut$v";
346                }
347               
348               
349                if ($taille_defaut == 0) $src = "rien.gif";
350                if ($lazy == 1) $ins .= " data-lazy='lazy'";
351
352                $ins .= " class='$class'";
353               
354                if (count($tailles) > 1) {
355                        sort($tailles);
356                        include_spip("inc/json");
357                       
358                        $ins .= " data-tailles='".addslashes(json_encode($tailles)) ."'";
359                }
360               
361                $ins .= " style='background-image:url($src)'";
362               
363                return $ins;
364        }
365       
366
367}
368
369
370function image_proportions($img, $largeur=16, $hauteur=9, $align="center", $zoom=1) {
371        $mode = $align;
372       
373        if (!$img) return;
374       
375       
376       
377        $l_img = largeur ($img);
378        $h_img = hauteur($img);
379
380        if ($largeur == 0 OR $hauteur == 0) {
381                $largeur = $l_img;
382                $hauteur = $h_img;
383               
384        }
385
386       
387        if ($l_img == 0 OR $h_img == 0) return $img;
388       
389        $r_img = $h_img / $l_img;       
390        $r = $hauteur / $largeur;       
391       
392        if ($r_img < $r) {
393                $l_dest = $h_img/$r;
394                $h_dest = $h_img;
395        } else if ($r_img > $r) {
396                $l_dest = $l_img;
397                $h_dest = $l_img*$r;
398        }
399       
400       
401        // Si align est "focus", on va aller chercher le «point d'intérêt» de l'image
402        // avec la fonction centre_image du plugin «centre_image»
403        if ($align == "focus" && function_exists(centre_image)) {
404                $dx = centre_image_x($img);
405                $dy = centre_image_y($img);
406
407                if ($r_img > $r) {
408                        $h_dest = round(($l_img * $r)/$zoom);
409                        $l_dest = round($l_img/$zoom);
410                } else {
411                        $h_dest = round($h_img/$zoom);
412                        $l_dest = round(($h_img / $r)/$zoom);
413                }
414                        $h_centre = $h_img * $dy;
415                        $l_centre = $l_img * $dx;
416                        $top = round($h_centre - ($h_dest/2));
417                        $l_centre = $l_img * $dx;
418                        $left = round($l_centre - ($l_dest/2));
419                       
420                        if ($top < 0) $top = 0;
421                        if ($top + $h_dest > $h_img ) $top = $h_img - $h_dest;
422                        if ($left < 0) $left = 0;
423                        if ($left + $l_dest > $l_img ) $left = $l_img - $l_dest;
424                       
425                        //echo "$dy - $l_img x $h_img - $h_dest x $l_dest - $h_centre x $l_centre - $top x $left";
426                        $align = "top=$top, left=$left";
427        }
428
429        include_spip("filtres/images_transforme");
430        $img = image_recadre($img, $l_dest, $h_dest, $align);
431       
432        // Second passage si $zoom (on verra plus tard si c'est intéressant de le traiter en amont)
433        if ($zoom > 1 && $mode != "focus") {
434                $l_img = largeur ($img)/2;
435                $h_img = hauteur($img)/2;
436               
437                $img = image_recadre($img, $l_img, $h_img);
438               
439        }
440       
441        return $img;
442}
443
444
445function image_responsive_affiche_milieu($flux, $effacer=false) {
446
447        $exec = $flux["args"]["exec"];
448       
449       
450        if ($exec == "admin_vider") {
451                $retour = recuperer_fond("squelettes/admin_vider_responsive");
452
453                $flux["data"] .= $retour;
454        }
455
456        return $flux;
457}
458
459
460
461?>
Note: See TracBrowser for help on using the repository browser.