WordPress.org

Ready to get started?Download WordPress

Forums

Adaptive Images (38 posts)

  1. digitalhecht
    Member
    Posted 2 years ago #

    Anyone seen/heard of this?
    http://adaptive-images.com/
    So with WordPress, would the javascript code go in the head of your index.php page?

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

  3. digitalhecht
    Member
    Posted 2 years ago #

    Thanks, esmi. Right now, I cannot even get this script to work with regular html files, let alone WordPress installations.

  4. Chris Burbridge
    Member
    Posted 2 years ago #

    I'm playing with this too ... would really love to get it to work...

  5. bwinn
    Member
    Posted 2 years ago #

    Keep us posted!

  6. digitalhecht
    Member
    Posted 2 years ago #

    I am throwing in the towel for now. Bigger fish to fry, as the saying goes...

  7. JorgenScott
    Member
    Posted 2 years ago #

    I'm working on this as well, trying to integrate it in to PressWork. I haven't had much success so far. Anyone else?

  8. Chris Burbridge
    Member
    Posted 2 years ago #

    With all respect for the developer, when you look at his demo site, http://adaptive-images.com/, from what I remember, the site is not actually doing the thing that he is talking about. I.e., when I re-size the screen, it does not load a smaller version. So I am not clear what's supposed to be happening. I left him a message at his blog but did not hear back about it. It is a very compelling idea.

  9. digitalhecht
    Member
    Posted 2 years ago #

    chrisbee, that is not quite what he claims is supposed to happen. The image size served up is based on monitor resolution, not browser re-size.
    Here is an exchange I had with Matthew Wilcox (the dev):

    Hi Matthew,
    Just read about your plugin at Wired and am keen to test it.
    I have a few questions:
    1) In which page should the js code be placed for a WordPress site (self-installed)? Index.php or header.php? I ask as I received this link after posing this very question in the WordPress.org forums:
    http://codex.wordpress.org/Using_Javascript
    It indicates header.php...
    2) Once installed, how do I test if it's working? (For example, I pulled up http://adaptive-images.com/ on my iPhone and saved the becca.jpg to it. When I transferred it to my desktop, I saw it was the full-size image. Wouldn't it be the smallest version I should have? Or is the image served based on connection speed as well?)
    Many thanks!
    Ed

    (Response from Matt)
    I don't use WordPress, so I can't really help you on this. It is important that when you view the source of the HTML page the JavaScript is inside the <head> section. I would imagine that means you want to include it in the header.php file, but that's just guess work.

    To test it is working you either need to visit the site on a small device or you could publish a test entry with an image bigger than your monitor, then load the test entry in your browser. You can tell if it worked by having a look in the ai-cache folder. If it has a folder or two and the re-sized file in it, then it worked and will work for all sizes. If it doesn't, then there's something wrong with the configuration of the .htaccess file, or the ai-cache folder isn't writable.

    Hope that helps,
    Matt

    Hope this helps you, chris.

  10. Chris Burbridge
    Member
    Posted 2 years ago #

    Thanks, yes it does.

    It gets me thinking, is screen resolution really the measure that should determine things? For example iPhone 4 has a fairly huge screen resolution, but you could still want to serve a pretty light file to it. Bandwidth could be another consideration.

    Wondering about different ways to determine which file to serve.

    But actually, if it's an open source project that could be modified.

  11. JorgenScott
    Member
    Posted 2 years ago #

    Crisbeee, looking at the github repo, I came across a fork that changed the javascript cookie to factor in devicePixelRatio: https://github.com/fm86/Adaptive-Images/commit/8fc66591f2345224a3ec239042983c6d8732d679.

    Correct me if I'm wrong, but I don't think that having adaptive-images.php and the ai-cache folder in the root of the WordPress install is ideal. Wouldn't it be much better to have them with your theme files (in my case, which is integrating with a theme framework) or with your plugin files, if you opt to develop a plugin? Otherwise, implementation would always require a manual installation. Unfortunately, I have only been able to get results when adaptive-images.php is in the WordPress root, although nesting the cache folder with the theme files does not seem to be a problem.

  12. JorgenScott
    Member
    Posted 2 years ago #

    Update: I was able to get it working with adaptive-images.php nested in the theme files. The solution was that the cache path is relative to the root directory (or perhaps the directory where .htaccess is), even when the script itself is nested in another directory. Ie. even though my adaptive-images.php is nested in wp-content/themes/childtheme/ai, it was necessary to set my cache path to $cache_path = "wp-content/themes/childtheme/ai/cache"; instead of just $cache_path = "cache";

  13. glovep
    Member
    Posted 2 years ago #

    Jorgen, could you share how your htaccess file looks like?
    I have the following within "mod_rewrite.c" (basic WordPress permalink stuff)

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

    I am not sure where to correctly add the adaptive-images stuff:
    RewriteCond %{REQUEST_URI} !assets
    RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

    Any ideas?

  14. JorgenScott
    Member
    Posted 2 years ago #

    Hey glovep,

    I created a second rewrite block within my .htaccess file. I don't know if this is intelligent from a systems logic point of view, but it's seems like an efficient solution.

    WordPress creates a "WordPress section" within the .htaccess using comments that I didn't want to mess around with in case my changes ended up getting over written somehow. Instead I created an Adaptive-images section with .htaccess, which makes it easy to automate updates to adaptive-images settings. Here's my htaccess file:

    # Adaptive-Images
    <IfModule mod_rewrite.c>
    RewriteEngine On
    
    # Instead of defining paths to exclude I opted for the opposite
    # I think this makes a bit more sense for WordPress
    RewriteCond %{REQUEST_URI} /wp-content/uploads
    
    RewriteRule \.(?:jpe?g|gif|png)$ path/to/adaptive-images.php
    
    </IfModule>
    # END Adaptive-Images
    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    # WordPress rewrite rules...
    </IfModule>
    
    # END WordPress

    Hope that helps.

    P.S. I'm working on a plugin for this. Right now there I'm working out a few bugs, but it will be ready mid December.

  15. glovep
    Member
    Posted 2 years ago #

    JorgenScott, thanks for the info.

    I did the following:

    The adaptive-images.php file lives in the theme folder, while the ai-cache folder is inside the wp-content directory. I then used the separate mod_rewrite directive like you suggested, but it results in that there are no images shown at all, neither on desktop or mobile device. So the directive does do something, but I am not sure whether the path to the source images wp-content/uploads is incorrect or whether the adaptive-images.php can't be found. Either way, the ai-cache folder remains empty hence no images get resized. Any thoughts?

    Your idea of a plugin sounds excellent. If you need beta testers, loop me in!

  16. JorgenScott
    Member
    Posted 2 years ago #

    glovep,

    At least you are getting a result. :)

    I think from what you described that the path to your adaptive-images.php file, within your .htaccess file, may be incorrect. It should be wp-content/themes/your-theme/adaptive-images.php, including any subdirectories...

    If that isn't it, then also check:

    1. The $cache variable within adaptive-images.php: It should be a path to your /ai-cache/ folder, relative to your .htaccess file. ex: wp-content/uploads/ai-cache/
    2. Permissions: Make sure that your ai-cache folder has permissions '755' or '777'.

    I'll be doing testing in the next week or so and could use another tester! If you're interested then contact me at jorgen.co/contact

    Jørgen

  17. sitebuilderpro
    Member
    Posted 2 years ago #

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

    thanks

  18. visualis
    Member
    Posted 2 years ago #

    @jorgenScott I'm also looking forward to the plugin!

  19. JorgenScott
    Member
    Posted 2 years ago #

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

  20. digitalhecht
    Member
    Posted 2 years ago #

    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?

  21. JorgenScott
    Member
    Posted 2 years ago #

    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. http://wpresolutions.co. :)

    Thanks!

  22. digitalhecht
    Member
    Posted 2 years ago #

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

  23. Shapeshifter 3
    Member
    Posted 2 years ago #

    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.

  24. Shapeshifter 3
    Member
    Posted 2 years ago #

    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.

  25. digitalhecht
    Member
    Posted 2 years ago #

    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.

  26. Shapeshifter 3
    Member
    Posted 2 years ago #

    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 WordPress.org's Ideas Forum: http://wordpress.org/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: http://bcove.me/09l56ndv .

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

  27. robflate
    Member
    Posted 2 years ago #

    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

  28. Shapeshifter 3
    Member
    Posted 2 years ago #

    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.

  29. robflate
    Member
    Posted 2 years ago #

    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.

  30. Shapeshifter 3
    Member
    Posted 2 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic