Retina Image support

Edit:
Still doesn’t work. This was a good try ??

HTML content (fieldname286):

<img class="replace-2x" src=".../wp-content/uploads/2017/01/logofff.png" alt="" width="143" height="114" />

jQuery Code:

<script>
jQuery(document).on(
'ready', function isRetinaDisplay() {
	if (window.matchMedia) {
        var mq = window.matchMedia('only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)');
        return (mq && mq.matches || (window.devicePixelRatio > 1)); 
	}
			if (window.isRetinaDisplay()) {
			var img_to_replace = jQuery('[id*="fieldname'+'286_"]').find('img.replace-2x').get();
 
				for (var i=0,l=img_to_replace.length; i<l; i++) {
				var src = img_to_replace[i].src;
				src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');
				img_to_replace[i].src = src;
				};
			}		
});
</script>

Anyway maybe this is too much for unpaid member.You don’t need to answer that.

Thanks.

• This reply was modified 7 years, 10 months ago by hsntgm.

Hello,

Could you send me the link to your webpage to check it in detail, please?

That seems the URL to the image is incorrect. Have you checked the “Developers Tools” in your browser?

Best regards.

Hello,

I am suprised that i only added my double sized image link to html field and now it is retina ready on all devices.

[email protected] = width=”286″ height=”228″

<img class="aligncenter" src="[email protected]" alt="" style="margin-top: -25px;" width="143" height="114">

But honestly i didn’t understand the logic. I tried to make it with jQuery code. Maybe my main theme codes helped me.

And you are welcome to my project it is live on here

It will be online (home,office) renovation bid system if i can handle it.

Thank you very much for your all support.
Hasan.

Hello,

In your current solution, you are using only the image with better resolution, but forcing the width and height to the image with less resolution. The solution is correct, because it is not an heavy image.

However, assuming you want to insert an image tag, depending if the pixel ratio of the screen is equal or greater than 1, you can use the following code.

In your form there is inserted the “HTML Content” field: fieldname286, currently with the image tag:

<img class="aligncenter replace-2x" src="https://www.luksdekortadilat.com/wp-content/uploads/2017/01/[email protected]" alt="Renovation price" style="margin-top: -25px;" width="143" height="114">

I’ll assume in my explanation, that the class “replace-2x” identifies the tag.

Replace the content of this field, with the following piece of code:

<img class="aligncenter replace-2x" src="https://www.luksdekortadilat.com/wp-content/uploads/2017/01/logofff.png" alt="Renovation price" style="margin-top: -25px;" width="143" height="114">
<script>
window.getDevicePixelRatio = function () {
    var ratio = 1;
    if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
        ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
    }
    else if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    return ratio;
}
if( window.getDevicePixelRatio() != 1 )
{
jQuery('.replace-2x').attr('src', 'https://www.luksdekortadilat.com/wp-content/uploads/2017/01/[email protected]');
}
</script>

I’m checking the resolution, and replacing the source of the image in consequence.

Best regards.

Brilliant !

It is working.
I understand the logic now.

Sincerely,