Magento 2 How to resize product gallery images?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
I have to resize the product gallery images.
I'm using this link to resize image
Resize Image
but it's only allow to resize image product_base_image. While I have to resize all other image then base image.
I'm getting all images by
$images = $_product->getMediaGalleryImages();
it's give me images data as
Array
(
[value_id] => 3424
[file] => //w/b/wb01-black-0_1.jpg
[media_type] => image
[entity_id] => 14
[label] =>
[position] => 3
[disabled] => 0
[label_default] =>
[position_default] => 3
[disabled_default] => 0
[video_provider] =>
[video_url] =>
[video_title] =>
[video_description] =>
[video_metadata] =>
[video_provider_default] =>
[video_url_default] =>
[video_title_default] =>
[video_description_default] =>
[video_metadata_default] =>
[url] => http://192.168.1.174/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
[id] => 3424
[path] => D:/xampp/htdocs/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
)
magento2.2 product-images image-resizing
|
show 1 more comment
I have to resize the product gallery images.
I'm using this link to resize image
Resize Image
but it's only allow to resize image product_base_image. While I have to resize all other image then base image.
I'm getting all images by
$images = $_product->getMediaGalleryImages();
it's give me images data as
Array
(
[value_id] => 3424
[file] => //w/b/wb01-black-0_1.jpg
[media_type] => image
[entity_id] => 14
[label] =>
[position] => 3
[disabled] => 0
[label_default] =>
[position_default] => 3
[disabled_default] => 0
[video_provider] =>
[video_url] =>
[video_title] =>
[video_description] =>
[video_metadata] =>
[video_provider_default] =>
[video_url_default] =>
[video_title_default] =>
[video_description_default] =>
[video_metadata_default] =>
[url] => http://192.168.1.174/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
[id] => 3424
[path] => D:/xampp/htdocs/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
)
magento2.2 product-images image-resizing
Try run this php bin/magento catalog:images:resize
– Prathap Gunasekaran
10 hours ago
Have you edited your theme/etc/view.xml file to update the height and width for product_page_more_views then run the above command
– Dava Gordon
10 hours ago
I want to resize only on the details page programatically.
– Magecode
10 hours ago
@Magecode take a look at rakeshjesadiya.com/resize-custom-image-in-magento-2
– Dava Gordon
10 hours ago
@DavaGordon it's not custom image. It's product gallery images
– Magecode
10 hours ago
|
show 1 more comment
I have to resize the product gallery images.
I'm using this link to resize image
Resize Image
but it's only allow to resize image product_base_image. While I have to resize all other image then base image.
I'm getting all images by
$images = $_product->getMediaGalleryImages();
it's give me images data as
Array
(
[value_id] => 3424
[file] => //w/b/wb01-black-0_1.jpg
[media_type] => image
[entity_id] => 14
[label] =>
[position] => 3
[disabled] => 0
[label_default] =>
[position_default] => 3
[disabled_default] => 0
[video_provider] =>
[video_url] =>
[video_title] =>
[video_description] =>
[video_metadata] =>
[video_provider_default] =>
[video_url_default] =>
[video_title_default] =>
[video_description_default] =>
[video_metadata_default] =>
[url] => http://192.168.1.174/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
[id] => 3424
[path] => D:/xampp/htdocs/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
)
magento2.2 product-images image-resizing
I have to resize the product gallery images.
I'm using this link to resize image
Resize Image
but it's only allow to resize image product_base_image. While I have to resize all other image then base image.
I'm getting all images by
$images = $_product->getMediaGalleryImages();
it's give me images data as
Array
(
[value_id] => 3424
[file] => //w/b/wb01-black-0_1.jpg
[media_type] => image
[entity_id] => 14
[label] =>
[position] => 3
[disabled] => 0
[label_default] =>
[position_default] => 3
[disabled_default] => 0
[video_provider] =>
[video_url] =>
[video_title] =>
[video_description] =>
[video_metadata] =>
[video_provider_default] =>
[video_url_default] =>
[video_title_default] =>
[video_description_default] =>
[video_metadata_default] =>
[url] => http://192.168.1.174/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
[id] => 3424
[path] => D:/xampp/htdocs/magento2261/pub/media/catalog/product/w/b/wb01-black-0_1.jpg
)
magento2.2 product-images image-resizing
magento2.2 product-images image-resizing
asked 11 hours ago
MagecodeMagecode
551421
551421
Try run this php bin/magento catalog:images:resize
– Prathap Gunasekaran
10 hours ago
Have you edited your theme/etc/view.xml file to update the height and width for product_page_more_views then run the above command
– Dava Gordon
10 hours ago
I want to resize only on the details page programatically.
– Magecode
10 hours ago
@Magecode take a look at rakeshjesadiya.com/resize-custom-image-in-magento-2
– Dava Gordon
10 hours ago
@DavaGordon it's not custom image. It's product gallery images
– Magecode
10 hours ago
|
show 1 more comment
Try run this php bin/magento catalog:images:resize
– Prathap Gunasekaran
10 hours ago
Have you edited your theme/etc/view.xml file to update the height and width for product_page_more_views then run the above command
– Dava Gordon
10 hours ago
I want to resize only on the details page programatically.
– Magecode
10 hours ago
@Magecode take a look at rakeshjesadiya.com/resize-custom-image-in-magento-2
– Dava Gordon
10 hours ago
@DavaGordon it's not custom image. It's product gallery images
– Magecode
10 hours ago
Try run this php bin/magento catalog:images:resize
– Prathap Gunasekaran
10 hours ago
Try run this php bin/magento catalog:images:resize
– Prathap Gunasekaran
10 hours ago
Have you edited your theme/etc/view.xml file to update the height and width for product_page_more_views then run the above command
– Dava Gordon
10 hours ago
Have you edited your theme/etc/view.xml file to update the height and width for product_page_more_views then run the above command
– Dava Gordon
10 hours ago
I want to resize only on the details page programatically.
– Magecode
10 hours ago
I want to resize only on the details page programatically.
– Magecode
10 hours ago
@Magecode take a look at rakeshjesadiya.com/resize-custom-image-in-magento-2
– Dava Gordon
10 hours ago
@Magecode take a look at rakeshjesadiya.com/resize-custom-image-in-magento-2
– Dava Gordon
10 hours ago
@DavaGordon it's not custom image. It's product gallery images
– Magecode
10 hours ago
@DavaGordon it's not custom image. It's product gallery images
– Magecode
10 hours ago
|
show 1 more comment
1 Answer
1
active
oldest
votes
You can use Magento default image resize command.
To resize image please follow the steps below.
Assume You are using a custom them name "Conpany_MyTheme"
step 1: create the xml file view.xml under MAGENTOROOT/app/design/frontend/Company/MyTheme/etc
FIle: view.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
<image id="category_page_grid" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_grid-1" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_list" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_large_no_frame" type="image">
<frame>false</frame>
</image>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_image_medium_no_frame" type="image">
<width>1500</width>
<height>1500</height>
<frame>false</frame>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>75</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="related_products_list" type="small_image">
<width>152</width>
<height>190</height>
</image>
<image id="hotpicks_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>600</width>
<height>600</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>300</height>
</image>
</images>
</media>
</view>
You can mention image sizes with their XML entity name in the view.xml file
product_page_main_image
product_page_main_image_default
product_page_more_views
step 2: Run the CLI command from the Magento root.
sudo php bin/magneto catalog:images:resize
Note: Depending on your requirement you can delete other media XML entity like bundled_product_customization_page, cart_cross_sell_products etc
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269905%2fmagento-2-how-to-resize-product-gallery-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use Magento default image resize command.
To resize image please follow the steps below.
Assume You are using a custom them name "Conpany_MyTheme"
step 1: create the xml file view.xml under MAGENTOROOT/app/design/frontend/Company/MyTheme/etc
FIle: view.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
<image id="category_page_grid" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_grid-1" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_list" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_large_no_frame" type="image">
<frame>false</frame>
</image>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_image_medium_no_frame" type="image">
<width>1500</width>
<height>1500</height>
<frame>false</frame>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>75</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="related_products_list" type="small_image">
<width>152</width>
<height>190</height>
</image>
<image id="hotpicks_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>600</width>
<height>600</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>300</height>
</image>
</images>
</media>
</view>
You can mention image sizes with their XML entity name in the view.xml file
product_page_main_image
product_page_main_image_default
product_page_more_views
step 2: Run the CLI command from the Magento root.
sudo php bin/magneto catalog:images:resize
Note: Depending on your requirement you can delete other media XML entity like bundled_product_customization_page, cart_cross_sell_products etc
add a comment |
You can use Magento default image resize command.
To resize image please follow the steps below.
Assume You are using a custom them name "Conpany_MyTheme"
step 1: create the xml file view.xml under MAGENTOROOT/app/design/frontend/Company/MyTheme/etc
FIle: view.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
<image id="category_page_grid" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_grid-1" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_list" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_large_no_frame" type="image">
<frame>false</frame>
</image>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_image_medium_no_frame" type="image">
<width>1500</width>
<height>1500</height>
<frame>false</frame>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>75</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="related_products_list" type="small_image">
<width>152</width>
<height>190</height>
</image>
<image id="hotpicks_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>600</width>
<height>600</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>300</height>
</image>
</images>
</media>
</view>
You can mention image sizes with their XML entity name in the view.xml file
product_page_main_image
product_page_main_image_default
product_page_more_views
step 2: Run the CLI command from the Magento root.
sudo php bin/magneto catalog:images:resize
Note: Depending on your requirement you can delete other media XML entity like bundled_product_customization_page, cart_cross_sell_products etc
add a comment |
You can use Magento default image resize command.
To resize image please follow the steps below.
Assume You are using a custom them name "Conpany_MyTheme"
step 1: create the xml file view.xml under MAGENTOROOT/app/design/frontend/Company/MyTheme/etc
FIle: view.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
<image id="category_page_grid" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_grid-1" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_list" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_large_no_frame" type="image">
<frame>false</frame>
</image>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_image_medium_no_frame" type="image">
<width>1500</width>
<height>1500</height>
<frame>false</frame>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>75</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="related_products_list" type="small_image">
<width>152</width>
<height>190</height>
</image>
<image id="hotpicks_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>600</width>
<height>600</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>300</height>
</image>
</images>
</media>
</view>
You can mention image sizes with their XML entity name in the view.xml file
product_page_main_image
product_page_main_image_default
product_page_more_views
step 2: Run the CLI command from the Magento root.
sudo php bin/magneto catalog:images:resize
Note: Depending on your requirement you can delete other media XML entity like bundled_product_customization_page, cart_cross_sell_products etc
You can use Magento default image resize command.
To resize image please follow the steps below.
Assume You are using a custom them name "Conpany_MyTheme"
step 1: create the xml file view.xml under MAGENTOROOT/app/design/frontend/Company/MyTheme/etc
FIle: view.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
<image id="category_page_grid" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_grid-1" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="category_page_list" type="small_image">
<width>800</width>
<height>800</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_large_no_frame" type="image">
<frame>false</frame>
</image>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_image_medium_no_frame" type="image">
<width>1500</width>
<height>1500</height>
<frame>false</frame>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>560</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>75</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="related_products_list" type="small_image">
<width>152</width>
<height>190</height>
</image>
<image id="hotpicks_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>600</width>
<height>600</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>300</height>
</image>
</images>
</media>
</view>
You can mention image sizes with their XML entity name in the view.xml file
product_page_main_image
product_page_main_image_default
product_page_more_views
step 2: Run the CLI command from the Magento root.
sudo php bin/magneto catalog:images:resize
Note: Depending on your requirement you can delete other media XML entity like bundled_product_customization_page, cart_cross_sell_products etc
answered 10 hours ago
Pritam Info 24Pritam Info 24
79217
79217
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269905%2fmagento-2-how-to-resize-product-gallery-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try run this php bin/magento catalog:images:resize
– Prathap Gunasekaran
10 hours ago
Have you edited your theme/etc/view.xml file to update the height and width for product_page_more_views then run the above command
– Dava Gordon
10 hours ago
I want to resize only on the details page programatically.
– Magecode
10 hours ago
@Magecode take a look at rakeshjesadiya.com/resize-custom-image-in-magento-2
– Dava Gordon
10 hours ago
@DavaGordon it's not custom image. It's product gallery images
– Magecode
10 hours ago