backport v21: Added explicit width/height for product thumbnails in product list template#5337
backport v21: Added explicit width/height for product thumbnails in product list template#5337sreichel wants to merge 1 commit into
Conversation
sreichel
commented
Mar 22, 2026
sreichel
commented
- see RWD theme: Added explicit width/height for product thumbnails in product list template #3981
…ct list template - see OpenMage#3981
github-actions
Bot
added
Component: Catalog
There was a problem hiding this comment.
Pull request overview
Backport of the RWD theme change from #3981 to add explicit width/height attributes to product thumbnail <img> tags in product list templates, addressing Lighthouse warnings about missing image dimensions.
Changes:
- Add
width/heightattributes to product thumbnails in the frontend catalog product list template. - Add
width/heightattributes to product thumbnails in the email catalog product list template.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| app/design/frontend/rwd/default/template/email/catalog/product/list.phtml | Adds explicit thumbnail dimensions to product list images in email rendering. |
| app/design/frontend/rwd/default/template/catalog/product/list.phtml | Adds explicit thumbnail dimensions to product list images in storefront list/grid modes. |
| src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>" | ||
| alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /> | ||
| alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" | ||
| height="<?php echo $_imgSize ?>" |
There was a problem hiding this comment.
keepFrame(false)->resize($_imgSize) produces a non-square image (when only width is provided, the adapter calculates the height proportionally). Setting both width and height to $_imgSize therefore advertises an incorrect aspect ratio and can cause distorted rendering (especially in email clients). Consider either removing keepFrame(false) so the generated image is square, or otherwise ensure the width/height values reflect the actual resized dimensions.
| height="<?php echo $_imgSize ?>" |
| <img id="product-collection-image-<?php echo $_product->getId(); ?>" | ||
| src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>" | ||
| alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /> | ||
| alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" | ||
| height="<?php echo $_imgSize ?>" | ||
| width="<?php echo $_imgSize ?>" | ||
| /> |
There was a problem hiding this comment.
keepFrame(false)->resize($_imgSize) results in a proportional (non-square) output when only width is passed. With width and height both set to $_imgSize, the markup declares a 1:1 intrinsic ratio that does not match the generated image, which can lead to image squashing/stretching in list mode. Either generate a square image (e.g., don’t disable keepFrame) or adjust the width/height values to the real resized dimensions.
|
