How To Use Generated Retina Images?

[stratboy]

Hi, I'm building a custom theme. On backoffice there's an option for generating retina images (double size): how to call them then? What's the functions to get them in frontend or controllers?

[rez0n]

Same question, not found answer anywhere (dev docs too)

[Scully]

Bump!

[rez0n]

Seems its useless function. After 3 days searching (and asking some developers) still no result. No one function for getting 2x images links

[razaro]

This is how retina images should work. You set "Generate high resolution image" to Yes in Preferences > Images.

Regenerate images and clear cache.  In code that is done in this part of AdminProductController.php

                    $generate_hight_dpi_images = (bool)Configuration::get('PS_HIGHT_DPI');

                    foreach ($imagesTypes as $imageType) {
                        if (!ImageManager::resize($file['save_path'], $new_path.'-'.stripslashes($imageType['name']).'.'.$image->image_format, $imageType['width'], $imageType['height'], $image->image_format)) {
                            $file['error'] = Tools::displayError('An error occurred while copying image:').' '.stripslashes($imageType['name']);
                            continue;
                        }

                        if ($generate_hight_dpi_images) {
                            if (!ImageManager::resize($file['save_path'], $new_path.'-'.stripslashes($imageType['name']).'2x.'.$image->image_format, (int)$imageType['width']*2, (int)$imageType['height']*2, $image->image_format)) {
                                $file['error'] = Tools::displayError('An error occurred while copying image:').' '.stripslashes($imageType['name']);
                                continue;
                            }
                        }
                    }

Then in theme you must have this line in global.tpl

{addJsDef highDPI=Configuration::get('PS_HIGHT_DPI')|boolval}

That is used in JavaScript where regular image is replaced with 2x one. From global.js function is highdpiInit

function highdpiInit()
{
	if (typeof highDPI === 'undefined')
		return;
	if(highDPI && $('.replace-2x').css('font-size') == "1px")
	{
		var els = $("img.replace-2x").get();
		for(var i = 0; i < els.length; i++)
		{
			src = els[i].src;
			extension = src.substr( (src.lastIndexOf('.') +1) );
			src = src.replace("." + extension, "2x." + extension);

			var img = new Image();
			img.src = src;
			img.height != 0 ? els[i].src = src : els[i].src = els[i].src;
		}
	}
}

Also default theme autoload highdpi.css file 

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	.replace-2x {
		font-size: 1px;
	}
	.example {
		background-image: url(../images/example2x.png);
		-webkit-background-size:13px 13px;
		-moz-background-size:13px 13px;
		-o-background-size:13px 13px;
		background-size:13px 13px;
	}
}

to set condition for retina images. Bit strange this part

 

So if you use custom theme check global.tpl and global.js as well as highdpi.css code to see if functions are included.

 

To call 2x images directly in theme for all devices and screens you can just add 2x in image type of getImageLink function

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default2x')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

but do note it will load much bigger file.

[rez0n]

Thank you for reply, so much useful information!

 

But this are not working, I'm tested.

To call 2x images directly in theme for all devices and screens you can just add 2x in image type of getImageLink function

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default2x')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

but do note it will load much bigger file.

[razaro]

Does 2x actually exists ? You enabled that option and regenerated images ?

[rez0n]

Yes, optuon enables, images regenerated, 2x files present for all product photos.