Magento2: Image Swatch size change not working

[patruvlad]

Preconditions

1. Magento CE 2.1.0

Steps to reproduce

1. Create a product attribute with Catalog Input Type for Store Owner set to "Visual swatch"
2. Create configurable product with the attribute above set to the configurations
3. Check the image swatch size in frontend ( Product List )
4. In "YOUR THEME/etc/view.xml" add changes for the image swatches

<?xml version="1.0"?>
<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>90</width>
                <height>30</height>
            </image>
            <image id="swatch_thumb" type="swatch_thumb">
                <width>120</width>
                <height>40</height>
            </image>
            <image id="swatch_image_base" type="swatch_image">
                <width>90</width>
                <height>30</height>
            </image>
            <image id="swatch_thumb_base" type="swatch_thumb">
                <width>120</width>
                <height>40</height>
            </image>
        </images>
    </media>
</view>

1. Flush Cache & recheck the image swatch size

Expected result

1. The Image swatch to change size

Actual result

1. Nothing changed, not the size of the html element or the actual file size

[bjoern-quast]

custom swatch size

...just leaving this here for any future search queries, hope it works! :)

[fowbi]

As mentioned in issue #6489, the theme configs are fetched by sorting them on theme_title ASC. And then merging them on each other, not taking parent themes into account.

Theme/Collection#L225:

public function loadRegisteredThemes()
{
    $this->_reset()->clear();
    return $this->setOrder('theme_title', \Magento\Framework\Data\Collection::SORT_ORDER_ASC)
            ->filterVisibleThemes()->addAreaFilter(\Magento\Framework\App\Area::AREA_FRONTEND);
}

It seems like the fix for issue #3573 brought this issue to the surface.
Removing the $viewConfigParams when creating a new viewConfig via the factory "resolves" the wrong theme values.

View/Config#L74:

...
$viewConfigParams['area'] = (isset($params['area'])) ? $params['area'] : null;
/** @var \Magento\Framework\Config\View $config */
$config = $this->viewConfigFactory->create($viewConfigParams);
if (isset($key)) {
    $this->viewConfigs[$key] = $config;
...

[patruvlad]

So I guess still no update on this issue. Does somebody have a workaround?

[paalsoberg]

Any update on this?

[vil11]

Hi!
Thanks for reporting the issue. Internal ticket MAGETWO-59789.

[minlare]

Any update on this? Still appears to be a bug in 2.1.4

[johnny-longneck]

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.

[blizam]

I'm running into the same issue on 2.1.5... tried bin/magento catalog:image:resize with no luck...

[thdoan]

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!

[erfanimani]

Thanks @thdoan, I noticed that as well.

Are your swatch images uploaded on the attribute level, or the product level?

[thdoan]

@erfanimani Attribute

[dreamworkers]

Hi @okorshenko, please assign this to me and @OZZlE.

[OZZlE]

@patruvlad "swatch_image" is swatch button image and "swatch_thumb" is the bigger image in the tooltip you see when you hover the button. The images preserve proportions/constraints so 100x50 might become 100x42 etc depending on the height/width ratio of the original image.

Tested on latest 2.1-develop branch.

[OZZlE]

The swatch button also has a fixed size inside CSS as 30x20, which can easily be changed from inside a theme. It's probably good that it's a fixed size so that the buttons don't appear different in size depending on what images an admin uploads.

[vherasymenko]

Can`t reproduce this bug on latest 2.1-develop version

Steps to reproduce:

1. Install Magento
2. Click "Store > Attributes > Product"
3. Click Add new
4. Enter any name type choose "Visual swatch"
5. In section Advance Attribute Properties "Scope" set to Global
6. Save attribute
7. Click "Catalog > Products"
8. Click on arrow "Add product" and choose "Configurable product"
9. Enter name assign to some category and click Add configuration
10. Choose early created attribute
11. Assign image set other qty and price
12. Save product with created configurable option
13. Go to storefront side and check swatch image size.
14. Add code to view.xml which situated in appdesignfrontendMagentoetc

<?xml version="1.0"?>
<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>90</width>
                <height>30</height>
            </image>
            <image id="swatch_thumb" type="swatch_thumb">
                <width>120</width>
                <height>40</height>
            </image>
            <image id="swatch_image_base" type="swatch_image">
                <width>90</width>
                <height>30</height>
            </image>
            <image id="swatch_thumb_base" type="swatch_thumb">
                <width>120</width>
                <height>40</height>
            </image>
        </images>
    </media>
</view>

1. Run command php bin/magento cache:flush and reload page with cleaning cache
2. Pay attention on image size and move mouse cursor on swatch image button and check size of displayed image

Actual result: Image size is changed succesfully.

[okorshenko]

Closing the issue. Can not reproduce

[patruvlad]

Just tested this on Magento 2.1.7 with the steps above that @K7Triton wrote , the swatch images still do not resize.

[okorshenko]

All fixed from 2.1-develop branch will be available in upcoming patch releases

[korostii]

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?

[DnDDeployer]

@okobchenko Do you have a date for this release?

[OZZlE]

@patruvlad @korostii @DnD-Merlin it should be fixed in 2.1.7 at least perhaps earlier but you need to write like 1 line of css to get the proper size in your theme after changing it in xml.

But note that it preserves image proportions so if you specify something that would stretch the image it wont take that size but rather pick the smaller width/height and adjust the other one accordingly. It makes sense since it's not adding any frame to the images.

[DnDDeployer]

@OZZlE,
Thank you for your quick answer but unless I do not understand, we are already are in 2.1.7

[josefbehr]

I'm also still experiencing this issue on 2.1.7. When will a fix be available publicly, @okorshenko ?
And come on, who decided it would be a good idea to get the config from themes alphabetically?

Workarounds for now:

• change Magento_Swatches/templates/product/layered/renderer.phtml to use $swatchThumbPath instead of $swatchImagePath for the background image, set background-size to "cover", and use css to get the wished-for actual size of the swatch (if less than 110x90 that is ...)
• or: Give your theme a title that puts it behind its parent(s) alphabetically (e.g. X_myTheme)

[seanscott49]

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

`

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

`

I updated CSS.

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

[roura356a]

Im pulling from 2.1 branch and still having this issue.

[LucienC]

@magento-engcom-team What's the fix?

[krisztian-fekete]

I'm having this issue with 2.2.1.

Workaround

Stretching the default (20x30) swatch image using background-size: cover looks a bit ugly if you need a bigger swatch, so as a workaround, I used the thumbnail image (it's loaded anyway, so this doesn't have any performance impacts I think).

1. I needed this for the layered navigation, so I copied vendor/magento/module-swatches/view/frontend/templates/product/layered/renderer.phtml to app/design/frontend/mytheme/default/Magento_Swatches/templates/product/layered/renderer.phtml.

2. Changed the following line:

<?php $swatchImagePath = $block->getSwatchPath('swatch_image',
                            $swatchData['swatches'][$option]['value']); ?>

to

<?php $swatchImagePath = $block->getSwatchPath('swatch_thumb',
                            $swatchData['swatches'][$option]['value']); ?>

[magentomaniac]

Also having the same issue on 2.2.2. Changing in parent theme works but not in child theme.

[adampmoss]

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.

[adampmoss]

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.

[AnjaliReddy123]

Step:
In "module-swatches/etc/view.xml " file it is overriding to ""YOUR THEME/etc/view.xml" it is not working can you please tell me how to override module-swatches/etc/view.xml file my magento version 2.2.3

[nicolaisen]

As @adampmoss points out, your view.xml in your custom theme will be overriding by the view.xml in blank and luma, if your custom theme's title is listed before(alphabetically). So a simple fix, is to change the title in your custom theme.xml to "z - custom theme name" or something like that, and then i works, because it will be last.

[markshust]

I'm reopening this issue, as there appears to be recent commits referencing MAGETWO-73862 above (which I tried out but don't seem to fix the issue), and I'm able to replicate on 2.2.6.

Presently there doesn't seem to be any way to override a view.xml file. I did try @adampmoss's update, which seems like a good update but doesn't seem to fix this ticket.

Currently there is no way for me to override the settings in vendor/magento/module-swatches/etc/view.xml within a child theme with a parent of Magento/luma.

[bheindl]

Fix of @adampmoss is working fine on 2.2.6. Implemented this by overriding MagentoSwatchesHelperMedia by preference.

[josefbehr]

@markoshust Does it work, if you change the name of your theme in the DB to "X something"?

[markshust]

@josefbehr i'm going to re-check this -- i believe i tried changing the name, but not in the db.

what does the fix in https://github.com/magento/magento2/commit/076ec45105534053a550c4e4398409c72b5266f3#diff-06f164cc839cbe29fd1d40f6aa4ce11a do -- should i retest with that on 2.3-develop?

[srenon]

Still having this issue in 2.2.7. However, 2.3.0 seem to be fixed.

[magento-engcom-team]

@shikhamis11 Thank you for verifying the issue.

Unfortunately, not enough information was provided to created internal ticket. Please consider adding the following:

• [ ] Add "Reproduced on " label(s) to this ticket based on verification result

Once all required information is added, please add label "Issue: Confirmed" again.
Thanks!

[pmclain]

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

[magento-engcom-team]

Hi @engcom-backlog-tomash. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

• [x] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 3. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

[ghost]

We are closing this issue as it was fixed in 2.3.0

[josefbehr]

We should fix this in 2.2. branch as well

[Nikolay1993]

Working with:
Server - Apache/2.4.29
PHP - 7.2.15-0ubuntu0.18.04.1
With install sample-data

[sdzhepa]

Hello @patruvlad

Thank you for contribution and collaboration!

The corresponding internal ticket MAGETWO-73862 was fixed and closed by Magento team

Delivered to 2.2-develop branch and should be available with 2.2.8 release
Related commit(s):

• 913ca5e