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

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

Possibilité de zoomer sans définir $h et $l (mis à zéro donc), c’est-à-dire recadrer en zoomant et en conservant les proportions d’origine

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