Why the product images appear only when you hover the mouse on them?

[addison74]

Go to Backend > Catalog > Manage Products. Choose a product and edit it. No images are displayed in the Images tab initially. In order to be displayed. You have to hover the mouse pointer over each one.

This behavior gets annoying when there are many images and you have to edit their labels, positions or choose which one is Base Image/Small Image/Thumbnail.

I haven't searched the Internet so far but I would be interested in why the Magento team chose not to display the images from the very beginning. Is there a way for these images to appear without to hover the mouse on each of them?

[fballiano]

I think that's just to avoid wasting bandwidth, since those images are uncompressed (original size) and could be megabytes big.

[fballiano]

I don't know, I've a customer with hundreds of thousand of images and thumbnails where always a problem (they tend to explode in number, they're multiplied for every store, we've thumbnail, small_image, image), and they prefer to have the full size image there for their own quality checks so... adding a new resized image thumbnail... i don't know...

[addison74]

@luigifab - at least I am inspired to evaluate and make the change. I only want the images to appear without mouse actions and be 100px in size, resized from the original.

[addison74]

@fballiano - In my case the master images are obtained by automatic processing in Photoshop. From here they are saved to the desired size and quality then uploaded. It is no longer necessary to enlarge the ones displayed in the grid for quality checking but only to see them as thumbnails and perform actions on them (like setting position, label, exclude, remove) without wasting time with the mouse.

The moment the mouse hovers an image and reveal it the browser makes a request to the server and it is displayed resized with width, so the bandwidth is not saved at all. When the filled in label is visible then you don't need to see the images.

Mouse movement becomes routine but when you waste time with this action and it becomes stressful it is a problem. My opinion is this feature was designs for ancient time when Magento was released and there were no high Internet speeds like today.

[elidrissidev]

Lazy loading may be an option too, they'll only be fetched by the browser when you click the Images tab

[addison74]

I looked at both the Magento implementation and @luigifab implementation. To replace the line bellow in the template and use the resize method for product images some pretty interesting changes are needed.

<td class="cell-image"><div class="place-holder" onmouseover="<?php echo $_block->getJsObjectName(); ?>.loadImage('__file__')"><span><?php echo Mage::helper('catalog')->__('Roll Over for preview') ?></span></div><img src="<?php echo $this->getSkinUrl('images/spacer.gif')?>" width="100" style="display:none;" alt="" /></td>

I did not approach lazy loading.

[addison74]

The Magento team's concern about not loading product images from the very beginning does not cover all scenarios. If I edit a product, upload its images then I save it, if in the same session I return to edit the same product or just press [Save and Continue Edit] button, ]the image is already in the browser cache (if not it is not disabled), but the images need to roll over again which is no longer needed.