Automatic Picture Resizing: 

Spark Pay online stores have a built in image resizer cache that resizes the images sent to it for you.  This keeps you from having to worry about multiple image sizes for the same picture.  It also allows you to set the picture size across each page in your application and change them on the fly.  Upload one large image of a product, and the system will handle resizing it in different places. Places like the Shopping Cart, widgets, Category Pages, Product Pages, etc...  Forget worrying about images from now on. Now, the only reason to have a separate thumbnail is if you want the smaller version to look different. For example, you want the smaller image to be a zoomed in section of the product.  Turn this feature on by reading below:

1. Turn on the resizer for the store, located in Store Settings for the store you are working on.  This is under Settings > Catalog > General.  Scroll to the Product Photo Handling section. 

NOTE: Because this is a store level setting, ensure you have the correct store selected in the store dropdown. 

2. Find the image settings by going to Themes > Edit Theme and selecting the applicable page. We are using the Product Details for this example.

By setting "Size Proportionally" you ensure that images don't skew/stretch.  These fundamental image settings are self-explanatory. 

Using The Resizer for any of your other Images: 

You can also use the resizer for your own images by using the URL and passing the size in the image reference. The image will generated at this size. These are useful for header images, email images, or any other image used on the site.

Example URL:

http://YOURSTORENAME.mysparkpay.com/store/p/Controls/i/is.aspx?path=/shared/i/C/BEAN-C.jpg&lr=t&bw=300&w=300&bh=350&h=350

http://YOURSTORENAME.mysparkpay.com/store/p/Controls/i/is.aspx?path=/shared/i/C/BEAN-C.jpg&lr=t&bw=300&w=300&bh=350&h=350  

Explanation of Settings:

• /i/is.aspx /i/is.aspx? - this ending triggers the resizer to be used.
• path=/ - path to the image (must be local to your store or in your shared directory)
• lr = t  - lock ratio so image is resized proportionally.
• bw = 300 - bound width, or maximum width
• w = 300 - the width used to set the image as long as not greater than BW
• bh = 300 - bound height, or maximum height
• h = 300 - the height used to set the image as long as not greater than BH

Common Problems with Resizing Properly:

Ensure the CSS classes or HTML sizing of your image are not overriding your resizer settings.  If the height or width is set by CSS, it will override the image and force a less than optimal HTML resize. This causes pixelation when putting it at different sizes than you intended. 

For more details on this, see this article.

Other Considerations:

• The image cache is generic, and uses a hash to determine the name based on content and desired size. The image size is tied to the theme and not the product itself.  What this means: 
  • You may see a difference in size when viewing your images vs cachedimages folders. Some files are renamed where the size is changed, and will still be present.
  • The image is not easily deleted from the temporary cache folder, due to the files' naming convention.
  • There is not an easy way to tell when a cached image was last accessed to remove old unused ones.
  • You can delete all the files in your cache if you like. Next time the image is called, it will recreate the image which may slow down the page load time initially. This will most likely be a minimal slowdown, and will be hard to notice.
• The resizer requires the files to be on your site, and will store the images locally in the shared directory.