I'm looking to attach size charts to products in my store using the Magneto data import. I want to use the same image for each of them, and it's already on the server. So I've got a twofold issue.

How do I assign this image, without re-importing, to each product? Can I just give the full path from inside the catalog/product directory? Most of these have extra images already, so I need to avoid removing those.

How do I assign a position? I want this to be the last image on each, so I'd like to just assign it position 12 or something to that effect to ensure it's last.

1 Answer 1


If you want to use the same size chart image (static) for all products, then you can try override the catalogGallery js widget using js mixin to push the size chart image to fotorama object.

You can try to follow the steps described below.

Note :

1) Sizechart images are the same for all products

2) Sizechart images are static means you have to place the size chart image to YOUR-MAGENTO-ROOT/pub/media/sizechart

3) Assume you are using a custom extension name "Company_SizeChart".

step 1) create requirejs-config.js under YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/view/frontend

File: YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {            
            'company-sizechart': 'Company_SizeChart/js/sizechart'

step 2) Create js file sizechart.js under YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/view/frontend/web/js

File: YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/view/frontend/web/js/sizechart.js

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

], function($){

    'use strict';

    //create Sizechart widget and push sizechart image to fotorama
    $.widget('mage.sizechart', {
        options: {
            sizechartData: '',            
        _create: function () {
            $(this.element).on('gallery:loaded',  $.proxy(function () {
                this.fotoramaItem = $(this.element).find('.fotorama-item');
            }, this));
        _initialize: function () {  
            var sizeChartData = this.options.sizechartData;
        _initSizeChart: function (sizeChartData) {                      
             var fotorama = this.fotoramaItem.data('fotorama');                      
             var imageUrl =  sizeChartData.image;
             var thumbUrl =  sizeChartData.thumb;            
                     img: imageUrl, 
                     thumb : thumbUrl,
                     caption: sizeChartData.caption,


    return $.mage.sizechart;


step 3) Create the Block class file Sizechart.php under YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/Block/Product/View/

File : YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/Block/Product/View/Sizechart.php


namespace Pritam\SizeChart\Block\Product\View;

use Magento\Catalog\Block\Product\Context;
use Magento\Framework\DataObject;

class Sizechart extends \Magento\Framework\View\Element\Template

    public $_storeManager;    

     * @param Context $context    
     * @param StoreManagerInterface $storeManager     
     * @param array $data
    public function __construct(
        Context $context,     
        \Magento\Store\Model\StoreManagerInterface $storeManager,           
        array $data = []      
    ) {
        parent::__construct($context, $data);
        $this->_storeManager = $storeManager;

    * Get Image Fraem Config related data
    * @return Json Object
    public function getSizechartImageJson(){
        $mediaPath =  $this->_storeManager->getStore()->getBaseUrl().'pub/media/sizechart/';
        $sizeChartImage = 'sizechart-main.jpeg';
        $sizeChartThumb = 'sizechart-icon.png';

        $imageFramItem = new DataObject([
                'image' => $mediaPath.$sizeChartImage,  
                'thumb' => $mediaPath.$sizeChartThumb, 
                'caption' => __('Sizechart')
        $imageFramItems[] = $imageFramItem->toArray();                 
        return json_encode($imageFramItems);


step 4) Create YOUR-MAGENTO-ROOT/pub/media/sizechart under YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/view/frontend/layout

File: YOUR-MAGENTO-ROOT/app/code/Company/SizeChart/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="product.info.media">          
             <block class="Pritam\SizeChart\Block\Product\View\Sizechart" name="product.info.media.sizechart" 
             after="product.info.media.video" template="Pritam_SizeChart::catalog/product/view/sizechart.phtml"/>

step 5) Create the PHTML file sizechart.phtml YOUR-MAGENTO-ROOT/app/code/Pritam/SizeChart/view/frontend/templates/catalog/product/view/

File: YOUR-MAGENTO-ROOT/app/code/Pritam/SizeChart/view/frontend/templates/catalog/product/view/sizechart.phtml

<script type="text/x-magento-init"> 
        "[data-gallery-role=gallery-placeholder]": {
            "Company_SizeChart/js/sizechart": {
                "sizechartData": <?= /* @escapeNotVerified */ $block->getSizechartImageJson() ?>                

step 7) Put size charts images [ for example 'sizechart-main.jpeg' for main image and 'sizechart-icon.png' for thumb image;] under YOUR-MAGENTO-ROOT/pub/media/size chart

step 6) Run following Magento CLI commands

sudo php bin/magento setup:di:compile
sudo php bin/magento c:f

enter image description here

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.