CODEWITHSUNDEEP
imagewordpressdeviceretina
Caspert
Caspert

Reputation: 4363

Adaptive Images+ for WordPress: Integrate with WordPress

Intro

I decided to create a topic for a script that create adaptive images. I have updated this topic so I can refer. Demand a more focused on a particular answer @ChrisFerdinandi advised me to use the script Adaptive Images+. This script would do exactly do what I'm looking for.

So I was looking for a script that checked me when the website is visited on a retina screen, like an iPad or iPhone for WordPress.

Problem

I will explain at every step what I did and share my code. Before I share my code and walk-through all steps, I will post some information about my WordPress installation.

I have installed my WordPress installation in a subfolder called /wordpress. I am using a custom WP theme, that I have developed on my own. I use featured images for my portfolio items. I create them in my function.php file like add_image_size('thumbnail-portfolio', 300, 200, true);

According to the installation page of the plugin from Chris Ferdinandi, we start by changing the .htaccess file in step 1. So, what I did is past everything between the comments #START Adaptive-Images and #END Adaptive-Images immediately after RewriteEngine On.

So my entire file would like this:

#BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On

#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

RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>

#END WordPress

Ok, after modifying the .htaccess file, I uploaded to the server. I update it inside the /wordpress subfolder. Fine that's done, let's go to step 2. This step I have skipped because this was an optional option.

Right step 3. I uploaded adaptive-images.php into the same directory as my .htaccess file, for clarity I have both files uploaded in the subdir. /wordpress.

Step 4. I add the cookie script right after the beginning <head> before all other scripts will run. My entire file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>

<!-- Meta Tags -->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<!-- Stylesheets -->
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/960.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/flexslider.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/isotope.css" rel="stylesheet">

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

<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.flexslider.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.isotope.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.isotope.min.js"></script>

<?php
    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>

</head>

Alright that's also done. In step 5. I have add the snippet of code to my css file.

Okay, the last step. Step 6 is testing all the stuff, here is probably the problem immediately clear. Since I have access to a mobile device retina, I decided first to look my site on that device. Unfortunately, only small resolution pictures shown, so that the image is not clear focus. I then looked as step 6 indicates that if there are really new images are created and stored/saved. There is an ai-cache folder created by the script adaptive-images.php, but this is unfortunately empty.

Something to notice, is that I have set the featured image size to the normal size and not to the retina version. So 300x200 is for default view, for retina would be the size 600x400px

What have I done?

I have checked the debug page of the script. I noticed that the cookie will be set as resolution. When I replace the line RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php in .htaccess to RewriteRule .(?:jpe?g|gif|png)$ test.png all images will be override by that one.

Error will be given after remove the comment before the error call. Every path is linking right.

I tried to change the permissions of the folder ai-cache from 755 to 777 with no results.

Upvotes: 1

Views: 1111

Answers (2)

Chris Ferdinandi
Chris Ferdinandi

Reputation: 1962

I've had great success with Adaptive Images, but it involves a bit of manual work. http://cferdinandi.github.io/adaptive-images/

Upvotes: 1

Web Guy
Web Guy

Reputation: 92

I have found the easiest solution is to make one image -- twice the norm -- compress it, and call it on non retina displays at half its size.

See explanation here...

 http://silev.org/test/Retina-resize.html

Upvotes: 0

Related Questions