0

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!

3

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.

8
  • That is nice coding but I already have a template. Can't I edit what I have to get the result I want? – Razvan Zamfir Nov 9 '17 at 9:24
  • It seems you are using widget, if you are using widget type - new product list then you can change size in new_products_content_widget_list, if you are using widget type - new product grid then you can change in new_products_content_widget_grid – Anshu Mishra Nov 9 '17 at 9:56
  • Is new_products_content_widget_grid a template? What template should I use? – Razvan Zamfir Nov 9 '17 at 10:00
  • It is image id which is used in the corresponding widget type. – Anshu Mishra Nov 9 '17 at 10:10
  • What shall I do? – Razvan Zamfir Nov 9 '17 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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