Adaptive Images

@jorgenscott looking forward to the plugin, make sure to let us know when its available!

thanks

@jorgenscott I’m also looking forward to the plugin!

For those that are interested, you can grab the plugin at https://wpresolutions.co/. Hopefully it will be available in the WordPress plugin directory by the end of the week.

Thanks for creating this plugin, Jorgen. Unfortunately, it appears to have killed my WP site (self-hosted). Immediately after clicking activate plugin (after uploading via Dashboard in WP 3.2.1), I got an Internal Server 500 error. Not only is my site down, I cannot access my Dashboard-even after manually deleting the plugin via FTP. Any ideas?

I’m sorry that happened. What you need to do is erase the WP Resolutions rewrite block in your .htaccess file. Your .htaccess file will be in the root directory of your WordPress installation, and may be hidden in your FTP client by default.

This sounds like a bug that I resolved earlier today. Can you remember when you downloaded the plugin?

I encourage anyone who needs support to tweet me, @wpResolutions, or post on the plugin homepage. https://wpresolutions.co. ??

Thanks!

Ah. All is right in the world again… Thank you. I downloaded and installed around 5pm PST today. Looking forward to seeing this work. Stripped down, mobile themes are getting old… (Will tweet or post to the wpresolutions page in the future. Thanks again.)

I’m late to this discussion, but extremely interested in it. I have a PressWork Framework Child Theme that I would like to get to display my 15 randomly displayed Header Images at least on iPads. I also uploaded the WP Resolutions plugin, but it doesn’t seem to work.

I’m wondering if the Adaptive Images cache is conflicting with other plugins such as WP Super Cache, WP Touch, and others.

I notice that digitalhecht is getting tired of stripped down mobile themes. I was thinking about paying for WP Touch Pro. Do you think that I would be wasting my money if trying to get Mobile Responsive, and should I try other, newer methods of adapting my website?

I’m trying to keep using PressWork, but it’s not working too well right now with WordPress 3.3.

I’m late to this discussion, but extremely interested in it. I have a PressWork Framework Child Theme that I would like to get to display my 15 randomly displayed Header Images at least on iPads. I also uploaded the WP Resolutions plugin, but it doesn’t seem to work.

I’m wondering if the Adaptive Images cache is conflicting with other plugins such as WP Super Cache, WP Touch, and others.

I notice that digitalhecht is getting tired of stripped down mobile themes. I was thinking about paying for WP Touch Pro. Do you think that I would be wasting my money if trying to get Mobile Responsive, and should I try other, newer methods of adapting my website?

Another thought: there is a Boilerplate extension called “320 and UP” that starts from the bottom (Mobile), and works its way up to larger screens. I wonder if that would require 4-5 different sizes of each uploaded Header Image (for random display) for that to work. I think that means I would need 75 separate images (5 x 15) saved in my WordPress Gallery for the Boilerplate to draw from…..not sure yet.

Just some thoughts.

Thanks for your input, Shapeshifter. At the very least, I am now wiser, knowing of the Genesis/Mobile Responsive framework, as well as 320 and Up. I also see that Jorgen’s plugin is now available in the WP plugin directory. I am intrigued by the Genesis Framework idea. I’d like to hear others chime in. It appears that the whole concept of mobile responsive (WordPress) sites is gaining rapid momentum.

digitalhecht,

There is an aspect to the Evolution of “Responsive Web Design” that has not been determined yet. Read Jeff Sebring’s last comment of www.ads-software.com’s Ideas Forum: https://www.ads-software.com/extend/ideas/topic/new-responsive-category-for-theme-and-plugin-directories . Some design ideas use MACRO (desktop) to Micro (smart phone). And other design ideas use MICRO (smart phone) to MACRO (desktop). Often mentioned in various blog posts about Responsive Web Design is The Boston Globe’s September 12th, 2011 redesign of their Website. They chose to use the MACRO to MICRO design idea…not the reverse. Here’s a link to their promotional video: https://bcove.me/09l56ndv .

I’m wondering which concept will find itself becoming the most popular among WordPress Core, and Theme Developers.

Can’t seem to get this to work although it is doing something because my blog shows broken image icons.

Server environment;

Dreamhost
Apache 2.2.17-2
PHP 5.2 FastCGI
mod_security on

robflate,

I don’t know if this helps or not, and I aplogize if it doesn’t. I gave up on using a 3-column theme because it always looked compressed and smashed-up on mobile devices smaller than a tablet. I went from the PressWork Framework (child theme), to Coraline, and then back to the Twenty Eleven default……..I’m happy with it now.

I think the WP Resolutions Plugin will eventually work, but the difficulties might have something to do with the caching and compatibility with other plugins (particularly WPtouch)….not sure.

I uninstalled the WP Responsive Plugin for now, and instead installed the following:

1.) EnhanceJS.

2.) FitVids.

3.) WP Fluid Images.

4.) WPtouch.

And, I use the Get Shortlink button in the Post Editor when adding long outgoing link URLs in my text. There is a jQuery Plugin FitText.js for inflating and scaling Headline Text, but I can’t find a WordPress Plugin for it yet and haven’t used it.

These items seem to have given me what I was after and you can test my site Toolbox-4-Websites by pasting it’s URL into this mobile emulator: ScreenFly .

My efforts have NOT been from Bottom Up (Mobile First), but Top Down.
I think the WordPress Developers are going to have to get more involved to get the Apdaptive Images concept to work on WordPress. It also seems that it would require 3-4 sizes of each image to work. Maybe I’m wrong. I don’t know.

Shapeshifter 3,

Thanks for the info. My theme is a 1, 2 and 3 column responsive design and uses media queries, css and jquery to make images, embeds and video fluid. The last part of the puzzle for me was trying to limit the size of images displayed on mobile browsers to reduce bandwidth and make scrolling as smooth as possible. I thought I might be able to filter the_content to do this but in the end found Adaptive Images. After posting my last message I have now got the script working and it does exactly what it says on the tin. The downsides are it’s not exactly simple to setup and another drawback is that on the iPhone at least, if you open the page in portrait mode, the images served are 480px wide. This is great until you put the phone in landscape mode, which causes the 480px images to scale up (as a result of them being fluid) to fill the screen. You can probably change this behaviour in the script but it does highlight how much of a problem the responsive design idea has created when it comes to media, particularly images.

robflate,

If you have the time, can you post here how you got the Adaptive Images script to work on your site? You have indicated that it was difficult to set up. What did you have to do; are there any other WP Plugins involved; and was it a WP Code issue, or Hosting Server? I would like to see your website. Can you post a link to it?

Shapeshifter 3,

*See Update at end*

You can integrate the script yourself or use WP Resolutions plugin. This is how I got it working using the plugin;

1. Install and activate WP Resolutions plugin (you should see an ai-cach folder in the root of your wordpress installation).
2. Go to Settings > WP Resolutions, set your image upload folder and save.
3. For some reason, the plugin does not set the correct path to the adaptive-images.php file in your .htaccess file so you need to open your .htaccess file in the root of your wordpress installation and set the line that reads;

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

to

RewriteRule \.(?:jpe?g|gif|png)$ wp-content/themes/yourthemenamehere/functions/adaptive-images.php

Now when you visit the site on your iPhone or other small screen device you will notice that any images you view will get adapted and cached in the ai-cache folder.

Update

If you download WP Resolutions from github, the path problem in the htaccess file has been fixed meaning the plugin now works out of the box for me;

https://github.com/JorgenScott/WP-Resolutions