magento2: Image Swatch size change not working

So the fix for this bug is not released yet? Wouldn’t it make sense to keep the issue open until that patch release becomes available?

I added the following to my theme/etc/view.xm and CSS and it works. 2.1.7

`<images module="Magento_Catalog">

 <image id="swatch_image" type="swatch_image">
	<width>50</width>
	<height>50</height>
</image>
<image id="swatch_thumb" type="swatch_thumb">
	<width>50</width>
	<height>50</height>
</image>
<image id="swatch_image_base" type="swatch_image">
	<width>50</width>
	<height>50</height>
</image>

</images>`

I updated CSS.

.page-wrapper .swatch-option { height: 50px; min-width: 50px; }

So I’ve looked into this further the function getImageConfig() is only used by the swatches module and I don’t see why looping through the themes is necessary. There are other modules such as Magento_Catalog_Block_Product_View_Gallery::getConfigView() where this isn’t the case.

We’ve been able to get around this issue by matching the way Magento_Catalog_Block_Product_View_Gallery::getConfigView() gets the image configuration. So that means that Magento\Swatches\Helper\Media::getImageConfig() becomes:

public function getImageConfig()
{
    return $this->viewConfig->getViewConfig()->getMediaEntities('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE);
}

I’m not aware of any knock-on effects of rewriting this but will update this ticket if any issues occur.

I’ve discovered the cause of the problem, but am yet to find a solution.

In magento/module-swatches/Helper/Media.php it calls getSwatchAttributeImage() which then calls getFolderNameSize() which calls getImageConfig() - this is what’s responsible for getting the image configuration.

public function getImageConfig()
    {
        $imageConfig = [];
        foreach ($$this->getRegisteredThemes() as $theme) {
            $config = $this->viewConfig->getViewConfig([
                'area' => Area::AREA_FRONTEND,
                'themeModel' => $theme,
            ]);
            $imageConfig = array_merge(
                $imageConfig,
                $config->getMediaEntities('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE)
            );
        }
        return $imageConfig;
    }

The code was looping through 4 registered themes starting with our custom theme, setting the data correctly, then moving through the rest of the themes and overwriting the config in $imageConfig.

1. Abc/default
2. Magento/blank
3. Magento/luma
4. Snowdog/blank

I checked getRegisteredThemes() and this was loading all themes that are of type Physical and Virtual and ordering them alphabetically. Our theme happened to be at the beginning.

Next, I just need to understand what the difference between swatches and other images when loading the image config.

We should fix this in 2.2. branch as well

This has been fixed in 2.3-develop https://github.com/magento/magento2/pull/13506

We’re on 2.1.5 and for whatever reason Magento is generating 20x20 swatch images and deploying them to pub/media/attribute/swatch/swatch_image/30x20/s/w (source images are 50x50). Setting the dimensions in view.xml doesn’t work, so as a quick fix I add this to our global JS file to fix blurry swatch images on both category and product pages:

require(['jquery'], function($) {
  $(window).on('load', function() {
    $('.color .swatch-option.image').each(function() {
      var $this = $(this);
      $this.css('background-image', $this.css('background-image').replace(/swatch_image\/30x20/, 'swatch_thumb/110x90'));
    });
  });
});

There’s a tiny bit of FOUC, but it’s better than having blurry swatch images!

I tried it with the xml code above on 2.1.4 and then bin/magento catalog:image:resize (don’t know if that was needed) and images successfully changed. css needs to be adjusted, though.