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

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

Mieux gérer le recadrage unique (data-src soit être renseigné après recadrage de $source)

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