Support thread for JcM Adaptive Images addon

[♥JcMagpie 1,466]

JcM Adaptive Images addon Frozen

This will automatically produce several images from your original image so each device can be served with the correct size image. Will help speed up site loading on mobile devices.

Again totally standalone with no core code change. Once you have copied all the files over go into admin/Content /Modules and install “JcM Adaptive Images “ and turn it on.

You will have nothing to see as it just adds script. Go to a mobile device and view your site, browse around and then check your site files. You should have a directory /ai-cache and withing this will be other folders /100 /200 ect. To match your image widths. If this is true its working. If not check your config.

The script works but will mess up low quality images! So if your images are small to begin with not much point using this. As it scales up images to try and give a better view all you will get is a fussy mess!

To your a .htaccess file

I strongly advise you to duplicate that file so you can revert to it if things go pear-shaped.

Open your existing .htaccess file and edit the contents. You'll need to look and see if there is a section that begins with the following:

<IfModule mod_rewrite.c>

If there is, then you need to add the following lines into that block:

# Adaptive-Images -----------------------------------------------------------------------------------

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

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

If you don't have a code block then simply copy and paste the following into your file instead:

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On

  # Adaptive-Images -----------------------------------------------------------------------------------

  # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
  # RewriteCond %{REQUEST_URI} !some-directory
  # RewriteCond %{REQUEST_URI} !another-directory

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

Next,

You can now open the “adaptive-images.php” file and have a play with the settings that are in the CONFIG area. By default it looks like this:

/* CONFIG ----------------------------------------------------------------------------------------------------------- */

$resolutions   = array(1382, 992, 768,500, 480, 250, 100, 40, 57); // 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   = 80; // 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 -------------------------
--------------------------------------------------------------------------------------------------------------------- */
You need to change this (1382, 992, 768,500, 480, 250, 100, 40, 57) to add the width sizes you have in your shop admin for your images.

 

Edited July 16, 2018 by JcMagpie

[valquiria23 164]

Hello @JcMagpie Zahid

Again, thank you very much for sharing this amazing information with the community.

Will this addon also work in EDGE or only on Frozen?
All my images I am modifying them to 500x400 with the EasyImageModifier and they are very small. If I install this addon will something happen to the quality of the images?

Best regards.

Valqui

[♥JcMagpie 1,466]

It should work on edge but depends on which version you have! Anyway it does not make any changes to original images. It just makes new images to use with mobile devices. So if your images are 500x400 it will make smaller images for phones, It all depends on what you have set up in admin for image size, make the width in config the same as width in admin/images.

This is best used with large high quality images so that those with large screens will see good image and the script will make the small images for others.

I found that if your images are small or of poor quality they will not look good as script trys to upscale them for larger screens. If it works on your site best to change to good quality main images and let script do all the work.

Anyway try and see what you get if your not happy just turn off the addon and remove the ai-cache directory and your site will start using the original images again.

[burt 3,977]

The licensing of the adaptive-images part of this addon appears to be incompatible.  

You'll need to recognise that you may very well get into legal trouble either from

• users of your addon
• the owner of the AI script

[♥JcMagpie 1,466]

45 minutes ago, burt said:

The licensing of the adaptive-images part of this addon appears to be incompatible.  

You'll need to recognise that you may very well get into legal trouble either from

• users of your addon
• the owner of the AI script

Don't think so got mine from GitHub and it say your free to use it or modify it.

https://creativecommons.org/licenses/by/3.0/

https://github.com/MattWilcox/Adaptive-Images

[♥mattjt83 133]

@JcMagpie

You have a stray 

</form>

in your template file.

Also, just a couple thoughts... 

1. This probably could/should be a header_tag module rather than a content module since it just inserts a single line of javascript. No use in sticking it inside a <div> and also he recommends it being in the <head> section preferably before any other scripts.

2. I think any file that is using the code from Matt Wilcox should give him credit.

Edited July 16, 2018 by mattjt83
typo...

[♥JcMagpie 1,466]

7 hours ago, mattjt83 said:

@JcMagpie

You have a stray 

</form>

in your template file.

Also, just a couple thoughts... 

1. This probably could/should be a header_tag module rather than a content module since it just inserts a single line of javascript. No use in sticking it inside a <div> and also he recommends it being in the <head> section preferably before any other scripts.

2. I think any file that is using the code from Matt Wilcox should give him credit.

The </form> is part of the addon.

header tag yeah maybe but it works fine as a header.

any file used from external source is left as is with all its acknowledgments.

Edited July 17, 2018 by JcMagpie

[burt 3,977]

Sounds like you know best 

[♥JcMagpie 1,466]

Have updated add-on to show

This addon uses the code by MattWilcox/Adaptive-Images  from GitHub It is used as supplied and all credit is with original author.
All this add-on does is allow you to install in as a module you can turn on and off.

The Author allows free down load from his website so code is not restricted. The code is in the public domain.

Also his license is very clear,

You are free to:

• Share — copy and redistribute the material in any medium or format

• Adapt — remix, transform, and build upon the material for any purpose, even commercially.

• The licensor cannot revoke these freedoms as long as you follow the license terms. ( these just say keep files as provided if not changed and leave original comments which i have )

Also may be scope to improve on this as the Author himself points out.

Project status

I am not maintaining this project any longer.

This is an old project, and still works as intended, with little need for new features (hence the lack of updates). That said; if you are building a new website I would strongly recommend looking into HTLM’s new ‘picture’ tag, and the srcset and sizes properties now available on regular img tags. These were not available at the time of making AI, have since become a standard, and in many cases these are more appropriate solutions today.

If the owner of the code has any issues with its use then I'm happy to have it removed from the App Market.

[♥mattjt83 133]

7 hours ago, JcMagpie said:

The </form> is part of the addon.

header tag yeah maybe but it works fine as a header.

any file used from external source is left as is with all its acknowledgments.

I looked at the code again and I'm not seeing an opening <form> tag. Also there is zero need for a <form></form> to be used with this snippet or a <div></div>.

A header tag would make a lot more sense in this circumstance and would also get the script into the <head> like the author suggests.

[♥JcMagpie 1,466]

Yep! The </form> is just an over site on my part when reusing the file for this add-on! Not going to do anything drastic me thinks!

Yes i read your first statement about header_tags, as I said working fine as it is. Feel free to do it as a header_tag I have no issues with that, its all good.

[♥JcMagpie 1,466]

OK I'm happy to listen and take advise updated add-on to be header_tags module was just busy with customers they just keep calling!

https://apps.oscommerce.com/8OSyE&jcm-adaptive-images-addon-frozen

If you have already installed it just turn off and uninstall in admin, then remove header files. Add new header_tags files and go to header_tags and install and turn on. That's it, you do not have to touch any other file.

Edited July 17, 2018 by JcMagpie

[♥mattjt83 133]

21 minutes ago, JcMagpie said:

OK I'm happy to listen and take advise updated add-on to be header_tags module was just busy with customers they just keep calling!

https://apps.oscommerce.com/8OSyE&jcm-adaptive-images-addon-frozen

If you have already installed it just turn off and uninstall in admin, then remove header files. Add new header_tags files and go to header_tags and install and turn on. That's it, you do not have to touch any other file.

The stray </form> tag could cause unforeseen issues and invalidates the html. Not relevant though since you updated the module to a header_tag.

I can appreciate what you are doing and I think it's great you're giving back to the community. I have edited your header_tag module so that it is coded according to the proper standards and hopefully doesn't cause issues for users.

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2018 osCommerce

  Released under the GNU General Public License
  V1.0 JcM Adaptive Images   16-7-2018
  
  Adaptive Images by Matt Wilcox is licensed under a Creative Commons Attribution 3.0 Unported License.
   This addon uses the code by MattWilcox/Adaptive-Images  from GitHub It is used as supplied and all credit is with original author.
All this add-on does is allow you to install in as a module you can turn on and off.

*/

  class ht_jcm_adaptive_images {
    var $code = 'ht_jcm_adaptive_images';
    var $group = 'header_tags';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function __construct() {
      $this->title = MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_TITLE;
      $this->description = MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_DESCRIPTION;

      if ( defined('MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_STATUS') ) {
        $this->sort_order = MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_SORT_ORDER;
        $this->enabled = (MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_STATUS == 'True');
      }
    }

    function execute() {
      global $oscTemplate;
      
$output = <<<EOD
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
EOD;
      $oscTemplate->addBlock($output, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_STATUS');
    }

    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable JcM Adaptive Images Module', 'MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_STATUS', 'True', 'Do you want to allow images script to be added to the page header?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Adaptive Images for OcS', 'MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_DESCRIPTION_STATUS', 'True', 'adaptive images', '6', '0', 'tep_cfg_select_option(array(\'True\'), ', now())");
     
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_STATUS', 'MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_DESCRIPTION_STATUS',  'MODULE_HEADER_TAGS_JCM_ADAPTIVE_IMAGES_SORT_ORDER');
    }
  }
  ?>

 

[♥JcMagpie 1,466]

Its just been one of those days, just not good practice to code in between dealing with customers. Should have just left it to the weekend. I just uploaded the draft folder by mistake, It’s been fixed and V1.1 is up now with good code.

For anyone who installed the first sorry but we got there in the end, just took the scenic route

Thanks for all the feedback and help, I do try and listen honest...

[radhavallabh 25]

Hi..Seems awesome!!

I am using KissItThumbnailer on my Current Frozen Edge Version.. Is this similar to that or it is something different.

Please could you explain me so I could swap it.

Warm Regds./

radhavallabh

[♥JcMagpie 1,466]

If you already have a solution then just keep using it as you have already done all the work!

The 2 are very different. The Kiss-It add-on is very good but it requires several changes to core OsC.

This Add-on is different in that it requires no core changes. The only change is adding 3 lines of code to you .htaccess file. It also only makes the new images that are required and this is done automatically.

Negatives, you need to have good quality images to begin with. If your images are low quality then this is not the add-on for you as scaling up of low quality images results in fuzzy images. The php will try and sharpen the image but as they say you can't polish a “T” :)

I recommend using sharp good quality 500x400 or 800x640 images as your base image and then letting the script make all the other images. Size is up to you but you need to stick to one aspect ratio. This gives good quality images for all devices. Keep all base images the same size, if you need to size up add padding do not scale up if image quality is low.

Use a good quality image tool to process your images to be compressed and remove all unnecessary meta data.

[radhavallabh 25]

32 minutes ago, JcMagpie said:

If you already have a solution then just keep using it as you have already done all the work!

The 2 are very different. The Kiss-It add-on is very good but it requires several changes to core OsC.

This Add-on is different in that it requires no core changes. The only change is adding 3 lines of code to you .htaccess file. It also only makes the new images that are required and this is done automatically.

Negatives, you need to have good quality images to begin with. If your images are low quality then this is not the add-on for you as scaling up of low quality images results in fuzzy images. The php will try and sharpen the image but as they say you can't polish a “T” :)

I recommend using sharp good quality 500x400 or 800x640 images as your base image and then letting the script make all the other images. Size is up to you but you need to stick to one aspect ratio. This gives good quality images for all devices. Keep all base images the same size, if you need to size up add padding do not scale up if image quality is low.

Use a good quality image tool to process your images to be compressed and remove all unnecessary meta data.

Thank you so much.. The addon looks awesome.. But as you said as I have already installed KissIT then I shall continue with it..

[valquiria23 164]

New update available.

- Language Update, added Spanish language files. Core files are original, only new Spanish language files have been added.

All credits are for the original author of this addon = @JcMagpie

[♥Dnj1964 11]

On 7/16/2018 at 12:26 PM, valquiria23 said:

Hello @JcMagpie Zahid

Again, thank you very much for sharing this amazing information with the community.

Will this addon also work in EDGE or only on Frozen?
All my images I am modifying them to 500x400 with the EasyImageModifier and they are very small. If I install this addon will something happen to the quality of the images?

Best regards.

Valqui

Were you able to get it to work with Edge.

 

I am using Edge Gold BS4 and it doesn't seem to be working.... At least for me!

[♥JcMagpie 1,466]

It should work fine, Please check the install instructions as a number of people have found on checking they have missed a step.

Also the script will only make the images if they are needed so to check go to your site and view on a mobile phone and each product you view you should then see in your server a new folder for the new image size.

You say you are modifying all images to 500x400 the script will resize images as required by each device, you should use good quality images as expanding poor quality ones gives poor results.

I find it's best to use a good quality large image and et the script produce the small ones.

If you still having issues PM me and I can take a look at how you have configured the add-on.

[♥SCH_001 14]

Hi installed this add-on but it does not appear to work if all your images are store in separate folder off the images dir?

Else I have something else stopping it

[♥JcMagpie 1,466]

As far as seeing things 😊 it's fully automatic so you will see nothing, only when a browser requests a image size that you don't have will it automaticly produce these and ad them to the image files. When these are made you will see a new directory

ai-cache  and within this will be all the requested image sizes.

these automaticly made by the script as and when they are requested by a device.

If you wish to check if it's working then after instaling check it's setup properly and then access your site from a mobile phone and go to a few products. Then check your site again and you will see new image files added by the device request.

[♥SCH_001 14]

@JcMagpie

  Once I installed it non of my pictures showed up at all?

I have added it to the growing list of things to get working

So will come back to this

PS can you recommend a topic / forums which discusses getting multiple images uploads setup in admin
Went to add a product and found I could only add one image arrrrrr

[♥JcMagpie 1,466]

28 minutes ago, supercheaphobb said:

Went to add a product and found I could only add one image arrrrrr

You can add as many images as you like, click the add large image and add another image, click it again and add another.......

If your refering to adding more than one image at the same time to a product,  then you have to use somthing like easypopulate or use a CSV file to update the product images in the database.

 

28 minutes ago, supercheaphobb said:

Once I installed it non of my pictures showed up at all?

Then you have something wrong with your install or site. This is a very simple add-on no core code changes at all. All you need to do is copy the files over , install the header tag and setup the .htaccess file as instructed.

Your going to have to post or pm a link to your site as debugging without seeing what's happening is not easy. Use your browser to inspect the html output.

You have made a lot of custom changes to the code on your site so it's no posiable to guess what could be the cause.

Edited June 4, 2019 by JcMagpie

[♥SCH_001 14]

Sorry @JcMagpie you are correct it's 2am and I am starting to see things all wrong. I off to bed