Images responsives

Insérer dans functions.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;
}*/

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.

<?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'].'"/>';
                        }
                    }
?>