Enabling Automatic Image Resizer

• Overview
• Enable Automatic Resizing
• Using the Resizer for Custom Images
• Common Problems with Resizing
• Other Considerations

AmeriCommerce online stores include a built-in image resizer that automatically resizes images to fit different areas of your store. This eliminates the need to manually create multiple image sizes. By uploading a single large image, the system dynamically resizes it for different pages, including the Shopping Cart, Widgets, Category Pages, and Product Pages. Below, we'll cover how to enable and use this feature effectively.

Enable Automatic Resizing

1. Go to Settings > Catalog > General.
2. Scroll to the Product Photo Handling section.
3. Enable the image resizer.

Note: Since this is a store-level setting, make sure you have the correct store selected in the store dropdown.

4. To adjust image settings, go to Themes > Edit Theme and select the relevant page (e.g., Product Details).
5. Enable Size Proportionally to prevent image distortion.

Using the Resizer for Custom Images

You can also use the resizer for custom images by adding parameters to the image URL. This is useful for headers, email images, or any other images used across the site.

Example URL:

http://YOURSTORENAME.americommerce.com/store/resize/shared/i/C/BEAN-C.jpg&lr=t&bw=300&w=300&bh=350&h=350

Explanation of URL Parameters:

• /store/resize/ - Triggers the resizer.
• lr=t - Lock ratio to maintain proportional resizing.
• bw=300 - Maximum width.
• w=300 - Target width (not exceeding bw).
• bh=350 - Maximum height.
• h=350 - Target height (not exceeding bh).

Using the ##IMAGERESIZER## Merge Code:

Within your theme, you can use the ##IMAGERESIZER## merge code to generate the resizer URL dynamically.

Example:

##IMAGERESIZER[path=/shared/i/C/BEAN-C.jpg,bw=300,bh=350,lr=t]##

Common Problems with Resizing

Issue: Images appear blurry or stretched.

Solution: Ensure that CSS or HTML settings are not overriding your resizer settings. If CSS sets a fixed height or width, it may override the resizer and lead to pixilation.

For more details, see this article.

Other Considerations

• The resizer cache stores images based on content and desired size, which means:
  • Cached images may have different filenames compared to original uploads.
  • Deleting an image from the cache requires clearing the cache folder.
  • Old cached images are not automatically removed.
• You can manually delete the cache, but this may temporarily slow down page load times as images are regenerated.
• The resizer stores images in the shared directory.

By following these steps, you can ensure that your store images are optimized for different display areas while maintaining quality and performance.