Glossary Item Box
Overview
Many smart phones, tablets, and other devices now offer screens with high pixel density displays. This makes things look sharper and more defined, and is achieved by having more pixels per square inch. Some screens have 2x the pixels, some 3x, and some even more.
When viewing regular images on these screens they can look blurry because the browser must enlarge them so they appear at the correct size.
Squirrelcart's retina image feature automatically serves larger images to devices having retina displays so that they appear sharp.
How it Works
Suppose a visitor loads a page that displays an image named "example.jpg" that is 300px X 600px in size:
<img src="sc_images/products/example.jpg" width="300" height="600" alt="" />
The request for the image file is directed (via .htaccess directives) to a PHP script. That script detects the capability of the device's screen to determine the pixel density. If the device has twice as many pixels as a standard display, the script will automatically serve a different image file to the device that is twice as large and has a filename ending in @2x to indicate this, such as example@2x.jpg . If the screen has three times as many pixels, an image 3 times larger is served with a filename ending in @3x.
These larger images are automatically created for most records in Squirrelcart when the Retina Image feature is enabled, via the Auto Size feature.
Requirements
Enabling Retina Images
Check the Auto Size checkbox at the top of the page if it is not already checked.
Check the Retina Image checkbox.
Click
Connect to your server using an FTP client and navigate to the folder containing your Squirrelcart folder. For many users this is also your web root folder (public_html, www, htdocs, etc...)
Look for a file named ".htaccess" . If it does not exist you'll need to create it using a text editor. Add the following lines to that file and upload the changes to your server:
These lines will redirect all image file requests to the retina image script. Reload your store page in your browser to make sure the lines you added did not cause any issues. Modifying htaccess files incorrectly can sometimes trigger fatal errors which would be very noticeable. If you notice any errors undo the changes.
Testing the retina images script
Because this feature is designed to be transparent to users it can be a little tricky to tell if it's working properly. Here's an easy way to confirm that the script mentioned above is doing its job. For this test you will need to devices, one with a standard display and one with a high pixel density display (smartphone, tablet, etc...).
Adding Retina Images Manually
The Retina Image feature will automatically generate the necessary @2x and @3x Image files for most images in Squirrelcart such as products, categories, options, etc....
It will not automatically generate these larger images for theme images, or for any image Squirrelcart is not aware of.
For example, if you'd like to serve larger versions of your logo to devices with high pixel density screens you can do so, but will need to create larger versions of the image and add the @2x and @3x suffix. The retina image script will work on these images as well.
For example, if your store logo image is 80px X 40px and is located here:
http://www.example.com/squirrelcart/themes/my-theme/images/store_logo.png
1. Create a version that is twice the size (160px X 80px), put it in the same location, and name it store_logo@2x.png .
2. Create a version that is three times the size (240px X 120px), put it in the same location, and name it store_logo@3x.png .
© 2001-2017 Lighthouse Development. All Rights Reserved.