Made in Chicago Company Directory

Resolved

(@hsntgm)

Hello Codepeople!

I disabled my main wordpress theme’s header in calculated fields form page.I only inserted my site logo and some helper images to form with html content.Now i want to make my form images retina supported.

First i tried to do it with html content field;


<div id="logoform"></div>

<style>
#logoform {
  background: url("..logofff.png") center center no-repeat;
  background-size: 143px 114px;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5),
       all and (-o-min-device-pixel-ratio: 3 / 2),
       all and (min--moz-device-pixel-ratio: 1.5),
       all and (min-device-pixel-ratio: 1.5) {
  #logoform {
    background: url("..logofff@2x.png") center center no-repeat;
    background-size: 143px 114px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #logoform {
    background: url("..logofff@2x.png") center center no-repeat;
    background-size: 143px 114px;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  #logoform {
    background: url("..logofff@2x.png") center center no-repeat;
    background-size: 143px 114px;
  }
}
</style>

This doesn’t work.Image not seen anymore.

Second i tried to do it jQuery with that 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()) {
		jQuery('#formlogo').attr('src', '..logofff@2x.png');
		}
		else
		{
		jQuery('#formlogo').attr('src', '..logofff.png');	
		}
    		
});
</script>

Without success 🙁

How can i make my form images retina supported.

Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter hsntgm
(@hsntgm)

7 years, 7 months ago
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, 7 months ago by hsntgm.
Plugin Author codepeople
(@codepeople)

7 years, 7 months ago

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.
Thread Starter hsntgm
(@hsntgm)

7 years, 7 months ago
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.

logofff@2x.png = width=”286″ height=”228″
```
<img class="aligncenter" src="..logofff@2x.png" 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.
Plugin Author codepeople
(@codepeople)

7 years, 7 months ago
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/logofff@2x.png" 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/logofff@2x.png');
}
</script>
```
I’m checking the resolution, and replacing the source of the image in consequence.

Best regards.
Thread Starter hsntgm
(@hsntgm)

7 years, 7 months ago

Brilliant !

It is working.
I understand the logic now.

Sincerely,

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Retina Image support’ is closed to new replies.