user3999667
user3999667

Reputation:

Magento - Auto set base, small and thumbnail on upload

Morning,

We have literally searched all over Stackoverflow and Google to find this solutions but still don't have the right answer.

We're trying to auto-set the Base, Small and Thumbnail options on the first uploaded image, so when uploading multiple images the first image will always have all three options checked.

If anyone has tried and succeeded with find this answer and advice, Thank you.

Catalog Product

Upvotes: 1

Views: 1879

Answers (3)

Simon
Simon

Reputation: 4192

Thanks to Fabian and Doug for the groundwork. I just published an extension, which does exactly what you are trying to achieve in a clean way: https://github.com/customgento/CustomGento_AutoSelectImages

It simply adds a JS file on the admin product edit page. In the JS file, the mentioned method Product.Gallery.createImageRow is wrapped, so that the radio buttons can be selected after the first image has been uploaded. Here is the JS "magic":

if (typeof Product.Gallery !== 'undefined') {
    Product.Gallery.prototype.createImageRow = Product.Gallery.prototype.createImageRow.wrap(function (parentMethod, image) {
        // first call the parent method
        parentMethod(image);

        // auto-select the radio buttons for the first uploaded image
        $H(this.imageTypes).each(function (pair) {
            if (this.images.length === 1) {
                this.getFileElement(image.file, 'cell-' + pair.key + ' input').checked = true;
            }
        }.bind(this));
        this.setProductImages(image.file);
    });
}

Upvotes: 0

tzvi
tzvi

Reputation: 511

If you have already uploaded your images and need to set the first one as thumb/base/small try the sql command in this post:

Just follow the instructions given by stereo_world and nhahtdh and then refresh your cache.

Upvotes: 0

P0ZiTR0N
P0ZiTR0N

Reputation: 612

It is very easy. Example's here. Replace in root/js/mage/adminhtml/product.js in the end of handleUploadComplete around 120 row code

    this.container.setHasChanges();
    this.updateImages();
},
updateImages : function() {

with

    this.container.setHasChanges();
    this.updateImages();
    $$('tr#media_gallery_content-image-1 td.cell-image.a-center input')[0].setAttribute('checked','checked');
    $$('tr#media_gallery_content-image-1 td.cell-small_image.a-center input')[0].setAttribute('checked','checked');
    $$('tr#media_gallery_content-image-1 td.cell-thumbnail.a-center input')[0].setAttribute('checked','checked');
},
updateImages : function() {

And enjoy autoselect first image after upload

Upvotes: 2

Related Questions