Différences

Ci-dessous, les différences entre deux révisions de la page.

--- webdev:wordpress:images_responsive [03/04/2015 01:03] – créée dolo
+++ webdev:wordpress:images_responsive [16/01/2016 21:23] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== Images responsives ======
+===== Technique du cookie de résolution =====
+Insérer dans functions.php :
+<Code:php>
+// -----------------------------------------------------------------------------
+//                            Gestion du responsive
+add_action( 'wp_head', 'add_viewport_cookie_js' );
+function add_viewport_cookie_js() {
+echo <<<JAVASCRIPT
+    <script>
+        document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';
+    </script>
+JAVASCRIPT;
+}
+/* The following cookie handling code is a modified version of the Matt Wilcox's Adaptive images plugin,
+ * which is licensed under a Creative Commons Attribution 3.0 Unported License.
+ * Plugin :  http://adaptive-images.com/
+ * Licence : http://creativecommons.org/licenses/by/3.0/
+ */
+global $client_width;
+if(!is_admin())
+{
+    if (isset($_COOKIE['resolution'])) {
+        $cookie_value = $_COOKIE['resolution'];
+        // does the cookie look valid? [whole number, comma, potential floating number]
+        if (! preg_match("/^[0-9]+[,]*[0-9\.]+$/", "$cookie_value")) { // no it doesn't look valid
+            setcookie("resolution", "$cookie_value", time()-100); // delete the mangled cookie
+        }
+        else { // the cookie is valid, do stuff with it
+            $client_width = (int) $cookie_value;
+        }
+    }
+}
+/*function getResponsiveImage($path, $id = "", $class = "", $alt = "", $title = "")
+{
+    global $client_width;
+    $return = '<img';
+    if($id != "") { $return = $return.' id="'.$id.'"'; }
+    if($class != "") { $return = $return.' class="'.$class.'"'; }
+    if($title != "") { $return = $return.' title="'.$title.'"'; }
+    $src = get_bloginfo('url').'/wp-content/'.substr($path,0,strrpos($path, '/'));// Début de l'url
+    // On vérifie les fichiers dans l'ordre croissant, pour charger une image plus petite même si la plus adapté n'a pas été créée
+    if($client_width != null)
+    {
+        if( $client_width <= 600 && is_file( $_SERVER['DOCUMENT_ROOT'].'/wp-content/'.substr_replace($path, '/mobile', strrpos($path, '/'), 0) ) )
+        {
+            $src = $src.'/mobile';
+        }
+    }
+    $src = $src.substr($path, strrpos($path, '/'));
+    $return = $return.' src="'.$src.'" alt="'.$alt.'"';
+    $size = getimagesize($src);
+    $return = $return.' width="'.$size[0].'" height="'.$size[1].'" />';
+    //return '<p>'.$client_width.'</p>';
+    return $return;
+}*/
+</Code>
+Ensuite, ajouter une nouvelle taille de miniature dans Wordpress. On peut faire ça avec du code ou avec le plugin Simple image sizes. Une fois ceci fait, voici un exemple de chargement d'image conditionnel via champs ACF :
+**Attention, toujours ajouter un test avec && $client_width != null (pour correction, donc <) ou || $client_width == null (pour valeur par défaut, donc >) pour s'assurer du bon chargement de la première page.**
+<Code:php>
+<?php
+                    if( get_field('image_diapo_1') )
+                    {
+                        $img = get_field('image_diapo_1');
+                        if($client_width != null && $client_width <= 600)
+                        {
+                            echo '<img class="main-produit-image'.$class.'" src="'.$img['sizes']['diaporama-mobile'].'" alt="'.$img['alt'].'" width="'.$img['sizes']['diaporama-mobile-width'].'" height="'.$img['sizes']['diaporama-mobile-height'].'"/>';
+                        } else {
+                            echo '<img src="'.$img['url'].'" alt="'.$img['alt'].'" width="'.$img['width'].'" height="'.$img['height'].'"/>';
+                        }
+                    }
+?>
+</Code>

Notes

Outils pour utilisateurs

Outils du site

Différences

Outils de la page