Image size adjustment

14/05/2010

The size of preview, stock and user-uploaded images in a Magento store can be customized to better fit the type and purpose of the product.

Previews are generated at a certain default size by ZetaPrints web-to-print and dynamic imaging system. Magento can reduce the preview size, but it can not make it larger. If the preview provided by ZetaPrints is not large enough you need to generate a bigger one first.

Preview images

Magento product preview image

Size of preview images can be changed in zp-style.css file, set a different max-width value to the a.zetaprints-template-preview img CSS selector:
1
2
3
4
a.zetaprints-template-preview img
{
max-width: 265px;
}

Stock images

Magento web-to-print stock images

The images you’ve made available to customers as image selection can be PNG, GIF, JPG, JPEG, TIFF or EPS.

PNG and GIF images

To adjust the default size of the PNG and GIF images in the Stock Images scroll of the product, you need to edit the max-height value in the following selector of zp-style.css:

1
2
3
4
div.images-scroller img
{
max-height: 100px;
}

Other image formats

To set the size of JPG, JPEG, TIFF… and other supported image formats, you need to change 0x100 part of image URL to the preferred one. Value is WEIGHTxHEIGHT in pixels. in common-templates.xslt file.

1
2
3
4
<xsl :otherwise>
<img src="{$zetaprints-api-url}photothumbs/{substring-before
(@Thumb,'.')}_0x100.{substring-after(@Thumb,'.')}" />

</xsl>

User uploaded images

Magento user-uploaded images

The procedure for changing display size of user-uploaded images in PNG and GIF format is identical to the one in stock images.

For other supported image types (JPG, JPEG, TIFF…), change 0x100 value of parameter to preferred one where template is WEIGHTxHEIGHT (pixels) in PersonalizationForm.php and UploadController.php files.

1
2
if ($image['mime'] === 'image/jpeg' || $image['mime'] === 'image/jpg')
$thumbnail = str_replace('.', '_0x100.', $image['thumbnail']);
See also: