I have used the product widget to display products from a specific category on the homepage. I need to get a different sized image for the first product that gets rendered (for visual layout reasons the first product is double the size of the others).

Do you have any advice on how to achieve this? Obviously i do not want to set all the images to be the enlarged size, just the first one in the collection. I understand images sizes are now controlled using the etc/view.xml but is there a way to override this in the templates so i can count the first one and render a larger image?

1 Answer 1


you could define your large image size in view.xml and name it category_page_grid_larger

then you could set up the rendering in your template like this:

<?php $iterator = 1; ?>
<?php foreach ($_productCollection as $_product): ?>
    <?php $image = ($iterator++ == 1) ? 'category_page_grid_larger' : 'category_page_grid'; ?>
<?php echo $block->getImage($_product, $image)->toHtml(); ?>
<?php endforeach; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.