Image thumbnails in Shop-Script storefront

When a product image is uploaded in the backend, several thumbnails (reduced image versions) are automatically created on the server. Thumbnails of different size are useful for publication on various types of storefront pages: product lists, categories, product pages.

Thumbnails are generated according to the rules specified in backend section "Settings → Product images". This section always contains a minimum set of thumbnail generation rules, which you cannot modify or delete. You may add your own rules, if necessary.

Adding new rules will result in generation of additional thumbnails for all product images uploaded afterwards.

If you you prefer to use the disk space of your server economically, then you will find it convenient to enable "Allow on-demand generation of custom-sized thumbnails" option in image settings. In this case the requested thumbnail, if it does not exist, will be generated "on the fly" every time a page with that thumbnail is requested.

Thumbnail generation rules

Shop-Script supports several types of rules for creating thumbnails from original images. Below are provided descriptions of those rules and their use in storefront templates.

Examples of code offered below shall be used in template product.html, which generates product pages in the online storefront.

Fit into a square [200]

Original image is scaled down proportionally so that neither its width nor height exceeds the specified value.

Thumbnail setting example:

Max (width, height) = 200px

Code for template:

{$wa->shop->productImgHtml($product, '200')}

Limited by width [200x0]

Original image is scaled down proportionally so that the resulting thumbnail width does not exceed the specified value.

Thumbnail setting example:

Width = 200px, height = auto

Code for template:

{$wa->shop->productImgHtml($product, '200x0')}
Note: When entering two dimensions in the image format, use the x letter.

Limited by height [0x200]

Original image is scaled down proportionally so that the resulting thumbnail height does not exceed the specified value.

Thumbnail setting example:

Width = auto, height = 200px

Code for template:

{$wa->shop->productImgHtml($product, '0x200')}

Square crop [96x96]

A square of maximum size is cropped from the middle of original image and the result is scaled down to the specified size. If the original image has a square shape, it is simply scaled down.

Thumbnail setting example:

Square crop: size = 96px

Code for template:

{$wa->shop->productImgHtml($product, '96x96')}

Rectangular crop [100x50]

A rectangle of the maximum size, with dimension proportions equal to that of the original image, is cropped from the middle of the original image, and the result is scaled down proportionally to the specified values. if the original image has the same dimension proportions, it is simply scaled down.

Thumbnail setting example:

Rectangular crop: width = 100px, height = 50px

Code for template:

{$wa->shop->productImgHtml($product, '100x50')}

How to obtain thumbnail URL

If you need to obtain only the URL of a thumbnail instead of its complete HTML code, use helper {$wa->shop-><strong>productImgUrl</strong>($product, $size)} in a similar manner as shown in the example below:

{$wa->shop->productImgUrl($product, '750x0')}

0 comments

    Add comment

    To add a comment please sign up or login