Magento2 Custom Thumbnail Size – How to Set for New Products Widget

magento-2.1.7product-imagesthumbnail

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

On the home page, I have inserted a "New Products" widget via the Magento admin.

enter image description here

I am overwriting the default template for this widget in my theme, with a app/design/frontend/VendorName/ThemeName/Magento_Catalog/templates/product/widget/new/column/new_default_list.phtml template file.

The problem is the product images are too small, I want to be able to set custom width and height.

The code for the product "squares":

<div class="product-item-info">
  <a class="product-item-photo" href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
    title="<?php /* @escapeNotVerified */ echo $block->stripTags($_product->getName(), null, true) ?>">
  <?php echo $block->getImage($_product, 'side_column_widget_product_thumbnail')->toHtml(); ?>
  </a>
  <div class="product-item-details">
    <strong class="product-item-name">
    <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
      title="<?php /* @escapeNotVerified */ echo $block->stripTags($_product->getName(), null, true) ?>)" class="product-item-link">
    <?php /* @escapeNotVerified */ echo $this->helper('Magento\Catalog\Helper\Output')->productAttribute($_product, $_product->getName(), 'name') ?>
    </a>
    </strong>
    <div class="product-item-actions">
      <div class="actions-primary clearfix">
    <?php if ($_product->isSaleable()): ?>
    <?php if ($_product->getTypeInstance()->hasRequiredOptions($_product)): ?>
    <?php /* @escapeNotVerified */ echo $block->getProductPriceHtml($_product, '-widget-new-' . $suffix) ?>
    <button type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>"
      class="action tocart btn"
      data-mage-init='{"redirectUrl":{"url":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($_product) ?>"}}'>
    <span class="hidden"><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    </button>
    <?php else: ?>
    <?php
      $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
      $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_product), ['product' => $_product->getEntityId()]);
      ?>
    <?php /* @escapeNotVerified */ echo $block->getProductPriceHtml($_product, '-widget-new-' . $suffix) ?>
    <button type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>"
      class="action tocart btn"
      data-post='<?php /* @escapeNotVerified */ echo $postData; ?>'>
    <span class="hidden"><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    </button>
    <?php endif; ?>
    <?php else: ?>
    <?php if ($_product->getIsSalable()): ?>
    <div class="stock available" title="<?php /* @escapeNotVerified */ echo __('Availability') ?>">
      <span><?php /* @escapeNotVerified */ echo __('In stock') ?></span>
    </div>
    <?php else: ?>
    <div class="stock unavailable" title="<?php /* @escapeNotVerified */ echo __('Availability') ?>">
      <span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
    </div>
    <?php endif; ?>
    <?php endif; ?>
      </div>
    </div>
  </div>
</div>

What shall I change here? Or is there an alternative to editing the new_default_list.phtml template file?

Thank you!

Best Answer

Create view.xml in app/design/frontend/your_theme_namespace/yourtheme/etc/ with following content

<?xml version="1.0"?>

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="side_column_widget_product_thumbnail" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
        </images>
    </media>
</view>

Here you can change image size depending on your template and requirement.
I hope this will help you.