HOW TO IMPLEMENT ADAPTIVE IMAGE IN WORDPRESS

If you don't know about Adaptive image please Read my last artical.

STEP:1

COPY .htaccess , Adaptive-image.php, ai-cookie.php, DS_Store file in your root directory

STEP 2:

CREATE folder in wp-contant/uploads/adaptive/ai-cache

if .htaccess file already exist then pest this code in it but be carefull take its backup

CODE

#START Adaptive-Images

#Add any directories you wish to omit from the Adaptive-Images process on a new line.
#Omit plugins, wp-includes and wp-admin content.
RewriteCond %{REQUEST_URI} !wp-content/plugins
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin

#Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
#to adaptive-images.php so we can select appropriately sized versions
RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php

#END Adaptive-Images


UNDER

# BEGIN WordPress
<IfModule mod_rewrite.c>

RewriteEngine On


STEP3:

Open Adaptive-image.php

change with it

$cache_path    = "wp-content/uploads/adaptive/ai-cache";

STEP 4:

In $resolution write down all breakpoint in your stylesheet.

Example: $resolutions   = array(760, 801, 598, 758, 478, 545, 378, 475, 318, 375, 200, 315, 699, 698, 548, 597, 983, 900, 830, 768, 700, 600, 450);

But they should match in you stylesheet.


step 5:

write this code in header.php in head tag

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/‘;</script>

if you want to use retina display
 thaen

use this

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>

and now boooooommmmmmmmm.



Some time it not take effect in front end images