Magento 2 resize swatches images

Question

I want to resize swatch images

See this http://awesomescreenshot.com/0d466soja3

We will change this color swatches to product images and

i want to resize this & if we can remove this resize code

it will also good.

Answer 1

Open class : Magento\Swatches\Block\Product\Renderer\Configurable

and find method : extractNecessarySwatchData()

here you can find all you solutions

I did this :

protected function extractNecessarySwatchData(array $swatchDataArray)
{
    $result['type'] = $swatchDataArray['type'];

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();

    $url =  $objectManager->get('Magento\Store\Model\StoreManagerInterface')
                ->getStore()
                ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);


    if ($result['type'] == Swatch::SWATCH_TYPE_VISUAL_IMAGE && !empty($swatchDataArray['value'])) {
        $result['thumb'] = $url. 'attribute/swatch'. $swatchDataArray['value'];
        $result['value'] = $url. 'attribute/swatch'. $swatchDataArray['value'];
    } else {
        $result['value'] = $swatchDataArray['value'];
    }

    return $result;
}

Answer 2

1) Copy and create template vendor/magento/module-swatches/etc/view.xml into your theme app/design/frontend/[Vendor]/[Theme Name]/Magento_Swatches/etc/view.xml

2) Clear cache : php bin/magento cache:clean

3) Resize images : php bin/magento catalog:images:resize

4) Flush browser cache (F12 in Chrome, then right click refresh icon and choose "Emtpy Cache And Hard Reload")

<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>