I have hidden my thumbnail from the gallery as what I display in the category listing is not the same image as what I want to show in the gallery (it has extra bits in it).

In the JsonConfig object, I got from the swatch, I have the list of the images from the Gallery but not my thumbnail.

How can I modify the JsonConfig object to add an item to it?

Do I extend the question to "how to add another image role in the JsonConfig object? (i.e. not only the thumbnail)"

1 Answer 1


The idea was here to extend the class \Magento\Swatches\Block\Product\Renderer\Listing\Configurable and particularly the method _getAdditionalConfig(). Below is my code, the 2 images roles I wanted to extract are called category_mobile and category_tablet.





<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <preference for="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" type="Memes\Extendjsonconfig\Block\Product\Renderer\Listing\Configurable" />


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Memes_Extendjsonconfig" setup_version="0.0.1"/>


 * Created by memes (http://chezmemes.com)
 * Date: 26/10/2016
 * Time: 6:02 PM
namespace Memes\Extendjsonconfig\Block\Product\Renderer\Listing;

class Configurable extends \Magento\Swatches\Block\Product\Renderer\Listing\Configurable

protected function _getAdditionalConfig()
    $image_mobile = 'category_mobile';
    $image_tablet = 'category_tablet';

    return [$image_mobile => $this->getOptionImages($image_mobile), $image_tablet => $this->getOptionImages($image_tablet) ];

protected function getOptionImages($imageRole)
    $images = [];
    foreach ($this->getAllowProducts() as $product) {

        $mobileImage = $product->getData($imageRole);   
                if(isset($mobileImage) && $mobileImage != 'no_selection' ){
                    $mobileImageAttr = $product->getCustomAttribute( $imageRole );
                    $image = $mobileImageAttr->getValue();
        $images[$product->getId()] =
                'path' => $image
    return $images;

This gives me the relative path of the images in the folder http://www.store.com/pub/media/catalog/product, I can then use it in my Javascript to update whatever I want.

This would be easily extendable to any other attribute needed.

A variant would be to use a Plugin rather than a preference, this is discussed in this question

  • thank you for this answer. i was about to post the question for this function.
    – Softec
    Apr 23, 2020 at 1:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.