How magento 2.3 generates swatch images?
-
22-03-2021 - |
Question
I want to resize default generated swatch images but upon doing that swatch images get blurred. So my question is, how to resize Magento swatch so that it will look nice? I have tried modifying background-size in swatch-renderer.js
from initial
to 50% 50% !important
. Here is the code for your reference from swatch-renderer.js
if (type === 2) {
// Image
$image.css({
'background': 'url("' + thumb + '") no-repeat center',
//Background case
// changed background-size from initial to 50% 50% !important
'background-size': '50% 50% !important'
});
$image.show();
}
Can anyone help me how can I do that?
Any help would be appreciated.
Thanks In advance..!
Solution
vendor/magento/module-swatches/etc/view.xml
path to override
app/design/frontend/{Package}/{themename}/etc/view.xml
example :
<?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="swatch_image" type="swatch_image">
<width>30</width>
<height>20</height>
</image>
<image id="swatch_thumb" type="swatch_thumb">
<width>110</width>
<height>90</height>
</image>
<image id="swatch_image_base" type="swatch_image">
<width>30</width>
<height>20</height>
</image>
<image id="swatch_thumb_base" type="swatch_thumb">
<width>110</width>
<height>90</height>
</image>
</images>
</media>
</view>
Now applying changes you have to clear cache and var folder.
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange