Resize individual image in widget - magento 2.0.1

Question

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

Answer 1

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

• Bilal Usean: Thanks for the reply. Give me sometime I am working with your answer. after while I come back to you.
• Bilal Usean: 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
• David Verholen: 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
• Bilal Usean: I can't get clear, image definition? . In temlate file only mention the class
• David Verholen: 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/…