Adaptive Images

Viewing 15 replies - 1 through 15 (of 37 total)

  • https://codex.www.ads-software.com/Using_Javascript

    Thread Starter digitalhecht

    (@digitalhecht)

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

    I’m playing with this too … would really love to get it to work…

    Keep us posted!

    Thread Starter digitalhecht

    (@digitalhecht)

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

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

    With all respect for the developer, when you look at his demo site, https://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.

    Thread Starter digitalhecht

    (@digitalhecht)

    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 www.ads-software.com forums:
    https://codex.www.ads-software.com/Using_Javascript
    It indicates header.php…
    2) Once installed, how do I test if it’s working? (For example, I pulled up https://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.

    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.

    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.

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

    glovep

    (@glovep)

    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?

    JorgenScott

    (@jorgenscott)

    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.

    glovep

    (@glovep)

    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!

    JorgenScott

    (@jorgenscott)

    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

Viewing 15 replies - 1 through 15 (of 37 total)
  • The topic ‘Adaptive Images’ is closed to new replies.