2

I have created customize theme which extends to magento blank. I am using widget to show latest products in home page.

Now, My page look like this

easy for your reference

I want to resize the every image (catalog product list) in widget. I will expect my page look like this

expected result

Note : I could refer this link to change all image size but no luck. copy view.xml from blank theme, paste into app/design/..../mytheme/etc/view.xml. I change below content in view.xml

<image id="category_page_grid" type="small_image">
    <width>400</width>
    <height>400</height>
</image>
<image id="category_page_list" type="small_image">
    <width>400</width>
    <height>400</height>
</image>

but nothing get reflected

here I put two questions

  1. How to resize individual image in product list

  2. Why mytheme view.xml get not reflected

Improve this question

1 Answer 1

Reset to default
3

1) you can define any new image type in the view.xml. To use it you have to pass the image id to the image helper used like here for example: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Block/Product/View/Gallery.php#L60

2) if I got the right widget here, you have to override a differrent image id:

grid: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/view/frontend/templates/product/widget/new/content/new_grid.phtml#L21

list: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/view/frontend/templates/product/widget/new/content/new_list.phtml#L21

So you would have to override these images in your view.xml:

grid: https://github.com/magento/magento2/blob/develop/app/design/frontend/Magento/blank/etc/view.xml#L55

list: https://github.com/magento/magento2/blob/develop/app/design/frontend/Magento/blank/etc/view.xml#L59

Improve this answer
10
  • Thanks for the reply. Give me sometime I am working with your answer. after while I come back to you.
    – Bilal Usean
    Commented Mar 16, 2016 at 18:10
  • Wow great geneious, its working. you have given right answer to second question. I up vote you. I have one doubt, how you find image id for appropriate task
    – Bilal Usean
    Commented Mar 16, 2016 at 18:25
  • You have to locate the template or Block file to see which image definition is used. Currently, many core features rely on having the related images defined in your view.xml. I hope this will be more flexible in the future. Some images are hardcoded in the Core Modules and if they are not defined in the view.xml you will get an error
    – David Verholen
    Commented Mar 16, 2016 at 18:28
  • I can't get clear, image definition? . In temlate file only mention the class
    – Bilal Usean
    Commented Mar 16, 2016 at 18:33
  • i updated the answer. The Product Gallery for example creates the images in the block. The Image Helper can create resized images for you by passing the image id defined in your view.xml like here: github.com/magento/magento2/blob/develop/app/code/Magento/…
    – David Verholen
    Commented Mar 16, 2016 at 18:36

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.