Help for people running wordpress

[MattWilcox]

Having trouble with your Wordpress install? Please comment here.

Remember that any problems are very likely to be something with your server configuration or Wordpress set up. As those things can be so varied, please can you give as much info as possible about them "it doesn't work" isn't enough for anyone to help you :)

Are you running WP on a domain or in a sub-folder of a domain? Are you running any plugins or themes that may be making use of a .htaccess file? What server and software versions are you running? etc. Everything you think might be relevant. Thanks.

[Kaimps]

Hi. I'm trying to get it to work on my Wordpress site, but don't know exactly how. I've installed WP in a subfolder wcms. Right now i have all the stuff in the root: .htaccess, adaptive-images.php and ai-cache folder with permission 777. htaccess file looks like that-> <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_URI} !images RewriteCond %{REQUEST_URI} !uploads RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php

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

Should i put the php file and cache folder in a subfolder where the WP is installed (wcms) or even in my theme folder? The .htaccess file must be in the root? If i put a-i.php and cache folder in wcms folder or theme folder, what files and what paths i have to change? I've tried different options but could not get it right. In some cases all my images where missing. That seems to be the question of these lines in htaccess: RewriteCond %{REQUEST_URI} !uploads. Am i right? At the moment i see all my images but checking the site on my phone still gets large file (900x650px).

[MattWilcox]

I don't know myself as I don't use WordPress. I do think that the RewriteBase statement may be causing problems for you though.

The .htaccess file needs to be at the highest level you'll want to use AI with, which is normally root, but you may be ok with it in the /wcms/ folder instead, so give that a try if you like. I don't actually know what rewrite base does (I can guess, but wouldn't know how it might effect other things). It's almost definitely messing about with paths though, and that is likely why it's not working for you.

[bentographics]

I have the same setup as Kaimps:

Wordpress installation in sub-folder, ai-cache folder, adaptive-images.php and htaccess also in subfolder. Wordpress still runs from that sub-folder (I have not moved the index.php file and changed the path to the installation yet, only when going live).

As soon as I add the htaccess statement I get an "Internal Server Error" (blank page with that message), this statement seems to be causing the issue:

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

This is how my whole .htaccess file looks like:

` RewriteEngine On RewriteBase /site/ RewriteRule ^index.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /site/index.php [L]

RewriteCond %{REQUEST_URI} !themes RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php `

I also removed the Wordpress rewrite statement i.e. RewriteBase for testing, but the result is the same, whenever I add the following I get an internal server error:

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

Any hints greatly appreciated, it would totally solve the whole dilemma around image for responsive websites (based on Wordpress)!

[noeltock]

Might best be solved as a plug-in in wp.org, this way it's handled once for the WP crowd.

[MattWilcox]

It likely would, only I don't use WordPress so can't make one. Anyone's welcome to do so if they have the skills! :)

[soulreverie]

I just installed the script on a subfolder installation of wordpress. Here is what I did that worked....

The .htaccess and the adpative-images.php file are both in the subfolder, the Wordpress installation root.

I created a new folder in wp-content/uploads for the stored images and added the path to the adaptive-images.php file: "wp-content/uploads/adaptcache".

I then edited the .htaccess file to restrict access to my theme files, plugin files, wp-admim folder and wp-includes folder.

RewriteCond %{REQUEST_URI} !wp-content/themes RewriteCond %{REQUEST_URI} !wp-content/plugins RewriteCond %{REQUEST_URI} !wp-content/plugins RewriteCond %{REQUEST_URI} !wp-includes RewriteCond %{REQUEST_URI} !wp-admin

Hope this helps someone!

[soulreverie]

Anyone have any suggestions for integrating this script into a multisite Wordpress environment? I'm going to tackle it but thought I would throw the idea out for suggestions first.

[noeltock]

I did create a WP plugin for this, but not using the adaptive images code (certainly not for any negative reason, just envisioned a different fit/implementation): http://wordpress.org/extend/plugins/hammy/

[soulreverie]

nice... I'll take a look. I appreciate the response... no need to reinvent the wheel if you don't have to!

[thetrickster]

Does anyone have any experience using this script in a Wordpress environment where the root is read-only? This means that our images are being processed using the WP-Read-Only plugin (http://wordpress.org/extend/plugins/wpro/) using Amazon's S3 buckets to store our images. Does this plugin work on images at external URLs? Does it require a cache folder to be writable on the server? I'm currently hosting the Wordpress site on Heroku with a custom PHP buildpack and Heroku Postgres as the database. I'd love to be able to use this for a new responsive site but I'm not sure if it works on images hosted on S3.

[michelkaeser]

I think to remember that it does not work with remote images...

[ghost]

If AI is not working, you must ensure that .htaccess is not being altered by another .htaccess inside a child folder on your installation (in my case was a .htaccess inside wordpress folder)

[seezee]

I got it working fine in a sub-directory. Since I am running a multi-site installation, I put the files in /wp-content/blogs.dir/# (where # is the upload directory for my site), made the necessary changes to the paths in the files, and kabang! it worked like a charm.

[sethburtonhall]

Has anybody had any conflicts with running ai.php and W3 Total Cache?

[seezee]

Since my post 2 months ago, I've finally started using a smartphone -- ai.php no longer seems to work (not seeing any cache directories being created when I visit the site on the phone). I do have W3TC enabled on the network; it could be part of the problem?

[sethburtonhall]

Hmmm, yeah, maybe. So you just decided to go with caching via W3 instead of serving adaptive images?

[seezee]

No, using both. Caching to speed things up for everybody; adaptive images to speed things up for mobile users. Though my experience w/ W3 is that it's a PITA. Can't use the minify feature because it screws up some of my scripts.

[sethburtonhall]

per your last comment, you said that ai.php is no longer working on mobile. So it seems that W3 may be the issue. What about ai.php with other devices

[seezee]

When I tested it w/ a responsive testing bookmarklet (which had worked 2 months ago), I got no joy. But the other possibility here is that the javascript isn't loading fast enough — I can't get it to load before jQuery.

[sethburtonhall]

hmm, not sure there.

[sethburtonhall]

yeah, I am testing ai.php by reloading screen size, then reloading. When I inspect image it the large image being resized.

[seezee]

I did this to force it to load 1st, but jQuery still loads before it for reasons I can't fathom. Hard-coding it into header.php doesn't work either; Wordpress loads jQuery 1st:

if (!is_admin()) {

    // Deregister already loaded script
    wp_deregister_script('jquery');

    // Register & enqueue Adaptive Image script; must load 1st

    function scripts_important()  
        {  
            // Register script  
            wp_register_script( 'adaptive_image', get_stylesheet_directory_uri() . '/path_to_scripts/adaptive-image.js' );  

            // Enqueue script  
            wp_enqueue_script( 'adaptive_image' );  
        }  
    add_action( 'wp_enqueue_scripts', 'scripts_important', 1 );  

    // Reload CDN
    wp_register_script('jquery', ('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'), false);
    wp_enqueue_script('jquery');

    // Register custom scripts (must load after jQuery)
    wp_register_script('my_custom_script', get_stylesheet_directory_uri().'/path_to_scripts/my_custom_script.js',false);

    // Enqueue scripts
    wp_enqueue_script('my_custom_script');
}

[sethburtonhall]

what theme or starter theme are you using.?

[seezee]

I created a child-theme of a commercial theme: Area 53 from WPscientist. The website is http://mercury-photo.com; surf on over on your tablet or phone & I'll look to see whether it triggered any adaptive cache action.

[sethburtonhall]

Did it trigger?

The load time was slow both 1st and second time. iPhone 4S. Chrome.

One thought is to conditionally load the "green grass" background image.

Seth Hall middle8media.com

On Friday, May 10, 2013 at 3:25 PM, seezee wrote:

I created a child-theme of a commercial theme: Area 53 from WPscientist. The website is http://mercury-photo.com; surf on over on your tablet or phone & I'll look to see whether it triggered any adaptive cache action.

— Reply to this email directly or view it on GitHub (https://github.com/MattWilcox/Adaptive-Images/issues/22#issuecomment-17739745).

[seezee]

Ah, unfortunately, it did not.

I'll need to polish up my PHP before tackling the background slider. The plugin that loads it is supposed to run only on the home page, but I've never been able to get that feature to work. I'm betting that the social buttons (lower left corner) also slow load time; I've been thinking of removing them. http://www.tnooz.com/2011/10/13/news/why-we-dumped-the-google-plus-button-from-the-front-page-of-our-travel-search-site/

[cferdinandi]

Anyone get this properly figured out yet?

I've got Adaptive Images running perfectly on my local environment. When I set it up on a live server, I get 404s on all my images. Here's my setup:

ROOT > subfolder running WordPress

1. I added adaptive-images.php to the subfolder. I also incorporated the rewrite rules into my existing WP .htaccess file (this approach worked well locally).
2. I tested that the rewrite works by pointing all images to a test.jpg file in the subfolder. That worked fine.
3. When I point images to adaptive-images.php instead, I get 404s on all images.

Based on that, I believe I need to update something in adaptive-images.php, but I don't know what. Any ideas?

[cferdinandi]

Ok, I FINALLY got this up and running. Here's a complete step-by-step for anyone else who's having trouble:

1. Modify your .htaccess file

DO NOT replace or overwrite your existing .htaccess file, or you'll break WordPress.

Your existing file probably looks something like this (if you've enabled pretty permalinks):

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /your-site/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /your-site/index.php [L]
</IfModule>

# END WordPress

Edit your existing file with Adaptive Image redirects just after RewriteEngine On as follows:

# 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 /your-site/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /your-site/index.php [L]
</IfModule>

# END WordPress

If you're on a Mac, .htaccess will be hidden when you download it (the dot in the front is how OSX hides files). Here are instructions on how to view it: http://osxdaily.com/2009/02/25/show-hidden-files-in-os-x/

When you're done editing the file, upload it back to the server.

2. Upload adaptive-images.php

Adjust your breakpoints in adaptive-images.php and upload it in the same directory as your .htaccess file.

3. Add the JavaScript to your header

Open up your header.php file in your theme directory. Just above the closing </head> tag, and above <?php wp_head(); ?> if that snippet exists, include this script:

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

If you don't want to optimize images for retina screens, use this one instead:

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

This sets a cookie with the maximum screen size of the device visiting the site. Because it's the max size, and not the actual window size, resizing your browser will not adjust the size parameter set by the cookie or the image size served by Adaptive Images.

4. Test

Open up your site on a smaller screen device.

Save an image and email it to yourself to compare to the original. Or, locate the ai-cache on your server and see if any images were generated and saved to it.

If you don't have a small screen device, change the cookie to:

document.cookie='resolution='480'; path=/';

This will trick Adaptive Images into thinking you're using a device with a max width of 480px. Make sure to clear your cookies first, or this trick won't work.

If things are working, congrats! (Don't forget to switch the cookie back or everyone will get the small-screen images.) If not, go to step 5 to debug.

5. Debugging

There are a few possible reasons why this isn't working. If you're still seeing image files but they're not being compressed:

1. Add an image named test.jpg to your root folder (the same one that adaptive-images.php and .htaccess sit in).
2. Update the .htaccess rewrite rule to say: RewriteRule .(?:jpe?g|gif|png)$ test.jpg. This forwards all images to the test image instead.
3. Reload your site.

If the test image now replaces all of your image files, the .htaccess file works and the problem is with adaptive-images.php. If not, your sever isn't recognizing the rewrite.

You may need to get more specific with the rewrite. Something like: RewriteRule .(?:jpe?g|gif|png)$ your-site-folder/test.jpg. If that doesn't work, you'll need to contact your web host to figure out how to fix that.

If the test.jpg trick worked, but you're still not seeing cached images (or worse, all of your images are throwing 404 errors):

1. Change the .htaccess rewrite rule back to RewriteRule .(?:jpe?g|gif|png)$ adaptive-image.php.
2. Open up adaptive-images.php. Just after the opening <?php tag, type: sendErrorImage("there is a problem");.
3. Save the file and reupload it to your server.
4. Reload your page.
5. All images should now show an error message with the Document Root, Requested URI, Requested File, and Source File. These are the values that adaptive-images.php is pulling and processing. Chances are, one of them is wrong (this happens if WordPress is in a subfolder of the root.

You'll need to identify what's off. In my case, there was a missing subfolder in the Source File string. Since the Source File is a mix of the Document Root and Requested URI, I edited $document_root in the adaptive-images.php file to look like this:

$document_root  = $_SERVER['DOCUMENT_ROOT'].'/subfolder-name';

Don't forget to remove sendErrorImage("there is a problem"); from the top of the adaptive-images.php file. I hope this helps anyone else who's been running into issues.

[MattWilcox]

Thanks so much for that thorough WordPress guide! I'm sure it'll help a lot of people :) Do you mind if I include it in the main Adaptive Images site at some point? (The website is moving up my list of 'hey, you need to get this stuff updated' items).

[cferdinandi]

@MattWilcox - That would be awesome. I just made a few minor updates to the post for better clarity and consistency. Feel free to use it on the site, and thanks for building such an awesome tool. It helped me reduce file size by over 80-something % for some applications.

[martinconnelly]

Hey Cferdinandi --

Trying to follow this and got to a point where test.jpg replaces all of the theme images (logo, social etc) but doesn't seem to touch anything in wp-content/uploads -- which makes very little sense to me. Did you ever run into that?

Cheers -m

[cferdinandi]

Really odd - never seen that before! Last month someone tipped me off about Photon, which is built into the Jetpack plugin. It essentially does the same thing as Adaptive Images, but without the need to configure anything. If your comfortable with WordPress.com hosting and serving the images, it might be another option to consider.

[martinconnelly]

Cool! thanks!

[topdown]

You should create a wiki page with this content https://github.com/MattWilcox/Adaptive-Images/issues/22#issuecomment-19578982

That would allow better change tracking and updating.

[beijersbergen]

Why not change all the 'RewriteCond %{REQUEST_URI} !xxx' rules to just one rule 'RewriteCond %{REQUEST_URI} wp-content/uploads/' (that's without the preceding exclamation point (!)) since Wordpress uses only that directory for uploaded images?

[Dunchead]

Just a note for anyone trying to test by setting a resolution 480 cookie: the javascript cookie setting code advised in the instructions above under 'Test' does not work (quotes around the 480). Use the following code instead:

document.cookie='resolution=480; path=/';

[willthemoor]

@cferdinandi Thank you so much for your guide. Really helped.

There is a another WP plugin for Adaptive Images here: http://wordpress.org/plugins/new-nine-adaptive-images/ I couldn't get it to work until I read your troubleshooting section - the plugin assumes a default install with everything under the /wordpress folder. I posted some steps to fix that here: http://wordpress.org/support/topic/doesnt-work-automatically-if-you-install-wp-in-a-subfolder-fix-included

EDIT 5/9/14 Plugin was removed from the WP plugin repo due to license incompatibility. http://wordpress.org/support/topic/license-violation-1

The plugin claims to be "GPL2" but CC BY 3.0 is incompatible with the GPLv2. Therefore, this plugin not only violates WordPress.org's policies, but it also violates the license of the original script (according to CC BY 3.0's "You may not sublicense the Work.").

[cferdinandi]

@willthemoor - Glad I was able to help!

[andrew5555]

Has anyone figured out how to install this into a WordPress multisite installation? When I follow instructions, everything seems to work on main site, but on sub-sites, images are broken. It only breaks images inside of wp-content/uploads directory on sub-sites.

[andreawo]

4.Test without a small screen device

The following code for changing the cookie in header.php didn't work for me:

document.cookie='resolution='480'; path=/';

I had to change it to:

document.cookie='resolution=480,1; path=/';

[bhardy]

Hey @andrew5555 and anyone else who comes here in the future and is hoping to get this to work on a Wordpress Multisite installation.

I was able to get this working on our project by adding 1 line of code to adaptive-images.php

After:

$requested_uri = parse_url(urldecode($_SERVER['REQUEST_URI']), PHP_URL_PATH);

Simply cut off the root folder for the sub-pages by adding:

$requested_uri = strstr($requested_uri, '/wp-content');

I can't promise this will work for you all, but it worked for me. Good luck.

[tibor]

Hi,

like mentioned on twitter, I get following error message My .htaccess looks like

Adaptive-Images -----------------------------------------------------------------------------------

RewriteBase /cms/

Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:

RewriteCond %{REQUEST_URI} !images

RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too

RewriteCond %{REQUEST_URI} !assets

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 -------------------------------------------------------------------------------

and my a-i.php is

$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels) $cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root! $jpg_quality = 75; // the quality of any generated JPGs on a scale of 0 to 100 $sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images? $watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached) $browser_cache = 60_60_24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default) $document_root = $_SERVER['DOCUMENT_ROOT'].'/cms';

[k3v3n]

** Notez que je serai absent du bureau du 18 au 29 juillet 2014 (de retour le 29 juillet).

Je répondrai à mes courriels moins rapidement qu'à l'habitude.

Pour une urgence, veuillez communiquer avec Pierre-Luc Lamothe (extension 101) ou avec François Drolet (extension 105) pour le support technique du service d'hébergement web.

---

Keven Marin, Directeur des solutions web Collectiv - Agence de publicité

+1 888 959-6352 x102 | www.collectiv.ca

[rodelika]

Hi, I hope, somebody can help me. I´m trying to run adaptive images on a wordpress installation. Well, in a way, it´s working. There are pictures in my ai-cache folder with different sizes. But the problem is, that the sizes are not correct. When I go on my page with my 21" screen, the pictures are stored in a 1300-folder. When I use my smartphone, the pictures are stored in a 1950-folder. Does anybody know, why? What can I do? Thanks for helping!

[jaa31]

Hi, I've a problem on wordpress, doesn't work :( htaccess Options FollowSymLinks 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

adaptive-image.php $resolutions = array(1280, 1024, 960, 768, 600, 460, 400, 320); // the resolution break-points to use (screen widths, in pixels) $cache_path = "wp-content/uploads/adaptive/ai-cache"; // where to store the generated re-sized images. Specify from your document root! $jpg_quality = 75; // the quality of any generated JPGs on a scale of 0 to 100 $sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images? $watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached) $browser_cache = 60_60_24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

/* END CONFIG ---------------------------------------------------------------------------------------------------------- ------------------------ Don't edit anything after this line unless you know what you're doing ------------------------- --------------------------------------------------------------------------------------------------------------------- */

/* get all of the required data from the HTTP request */ $document_root = $_SERVER['DOCUMENT_ROOT']; $requested_uri = parse_url(urldecode($_SERVER['REQUEST_URI']), PHP_URL_PATH); $requested_file = basename($requested_uri); $source_file = $document_root.$requested_uri; $resolution = FALSE;

plz help me

[tlehtimaki]

@cferdinandi I would have asked that could please elaborate the reason you place Rewritecond rules in between the WordPress rules?

[cferdinandi]

@tlehtimaki I actually don't remember! It's been a while since I used this.

[kyawthein]

Hi, I have used adaptive-images.php to upgrade my wordpress site performance. But I have still this problem.

Configuration data in adaptive-image-config.php missing.

[cferdinandi]

Just a heads up for everyone: now that WordPress has baked responsive image support into the core, I'm not sure this is the best approach to mobile-friendly image delivery anymore.