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

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

Gérer les dimensions de la «picture» quand recadrages multiples dans des styles (pfff…).

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