[Plugin: WP Retina 2x] Problem with the server-side method and responsive behavior

Haha, I am sorry, I didn’t quite understand what the problem is :p You can also write directly to me (via Totoro Times) in French (that will be easier for me as well actually, haha :p) and I am especially interested in talking to you if you are using a French version of WordPress too.

But to give you a quick answer already : the client-side used to be very slow BUT the original author of the JavaScript file updated it 3 days ago, I noticed it today, and tried it. It is now fast! It will never be as good as the server-side method, but at least it doesn’t block your browser and it is very smooth. I will update the plugin in one hour or two hours, and release a new version. Your website will then work great with the client-side method.

Then later, let’s talk by email and try to find a way to make your website to work with the server-side method as well. Deal? ?? à bient?t !

Thanks for your answer … I’ll try to be clearer. With the server-side method on my new iPad, it is as if I had activated the debug mode and I was watching the result on my old MacBook : all the image have twice their normal size.

What I should see (it works with the client-side method):

https://ppl.ug/9BTXLCsDAhE/

What I can see:

https://ppl.ug/8t8IK87E0xE/

I will try your new update and contact you via Totoro Times.

Okay, it’s what I was afraid of… Actually with Retina you really need to set a width and height to all your images. But WordPress normally does that automatically when you include them to your posts, isn’t it?

By the way, I just release the new version. Try it out, and tell me if it is faster ??

Hi.
I’m not sure ti understand the problem …

“But WordPress normally does that automatically when you include them to your posts, isn’t it?”

In fact, my html code to display my image is :

<img class="alignnone size-medium wp-image-248" title="Basilique-Saint-Vincent-slider" src="https://www.pcsi2.net/cpge/wp-content/uploads/2012/07/Basilique-Saint-Vincent-slider1-300x111.jpg" alt="" width="300" height="111" /></img>

With the server-side method, I tried to delete width="300" and height="111", but nothing has changed. I tried to delete the class="alignnone size-medium wp-image-248" but nothing has changed either.

I don’t know why it works with the client-side method, but it works. I suppose that when a retina display is detected, the code is modified in some other way.

I tried your plugin’s update and the client-side method seems to be more efficient now … thanks ! However, le server-method seems more attractive, does it ?

I’m glad it works better with the new version and the client-side. I saw your website, and you aren’t using a crazy amount of images, so you’d probably better off using it this way ??

That said, it should work with your HTML code and the server-side method as well. There is something strange somewhere here, but I don’t know what.

Are you sure that there aren’t any “width: auto” and/or “height: auto” applied by CSS to your images?

Hi.
My website is not responsive. I actually work on a new site with MAMP and this theme :

https://themeforest.net/item/office-responsive-business-theme/1718861

I don’t have a lot of time today, but I will try to check the css file to understand what happens with the image when the responsive behavior is activated.

I’ll tell you in 8 or 9 hours.
Thanks.

Okay keep me updated ??

Hi.
I made a special site using my responsive theme to test the plugin :

https://www.pcsi2.net/Retina/

You can see what happens on the unique article “Bonjour tout le monde !”
I tried to determine whether there was a problem with the css applied to images by editing the file responsive.css (I can send it to you if you want it).

I have not really found “width: auto” applied to the images but I tried to remove some css that seemed doubtful. The problem was not solved in this way. Similarly, with Firebug.

This has perhaps unrelated, but I noticed there is a problem with the server-method if I do not activate the permalinks: the plugin does not display the retina version of the image.

Hello!

You actually probably right on that point: if the permalinks are disabled, the plugin might not work at all. I will give it a shot today.

I just tried your website with my iPhone 4, and the first picture shows well, but the second appears much bigger :p Can you do something for me? On this “Retina” installation, can you set the “Debug Mode” on for Retina? That would help me for my testing ( from non-retina computer, unfortunately I am not always at home with my brand new MBP ?? ).

Done. (Debug mod is “ON”)

I changed width: 300px in max-width: 300px because I thought about an iPhone there could be a problem with the second image (but not on an iPad …)

On my iPad now, the first image is too large (twice te normal size) and the second one is OK.

I will try my site with an iPhone later today ..

Actually I just realized that “width=’300px’ height=’111px'” was missing in the HTML attributes of your image, that is why! Normally when you insert an image in your post, those attributes are always added. Aren’t they added in your case? Did you write the HTML yourself?

Hi.
Here is my code for the firsrt image :

Image medium-size 300x111 px avec son double rétina 600x222 px ...

<img class="alignnone size-medium wp-image-8" title="Basilique-Saint-Vincent-slider" src="https://www.pcsi2.net/Retina/wp-content/uploads/2012/07/Basilique-Saint-Vincent-slider-300x111.jpg" alt="" width="300" height="111" />

I didn’t write the HTML myself … but I saw you’re right : using Firebug, I couldn’t see
“width” and “height” in the HTML code.

1. I know that the problem only exists with responsive behavior, so … I deleted the responsive.css file but nothing changed.

2. I just added an image 300x111px without retina version and this time, the image has the right size (of course, there is no retina display)

|| Quote || “I don’t understand why the images on your website aren’t named “@2x”, it is like you’re not even using the plugin to me :p”

When I try to save the retina image from Firefox, the image isn’t named “@2x” BUT the “@2x” image is displayed (really ?? :
See the ftp folder : https://www.pcsi2.net/images/Poids-des-images.png

One more thing ?? I created a Portfolio page on the website. The small image in the Portfolio uses the “grid-thumb” size as you can see here :
https://www.pcsi2.net/images/retina-dashboard.png

You can see that the “@2x” image is used, with the right size … so I think there’s just a problem with the images that I insert in Posts.

I can sent you a “login/password” so that you can check by yourself … but I don’t find your email on Toroto Times …

Thanks again !

Don’t try to play with the CSS, they are not the culprits here ??

The issue for me is clear now: it is when you EDIT the post and INSERT the images. The HTML code for the images must contain the width and height properties but it doesn’t. Why? I have no idea, in all my WP installations I always have them. Maybe your theme is running some trick when you insert images and remove those properties? I have no idea…

You can contact me directly here: https://www.totorotimes.com/about.

Hi.
You’re right ! My theme seems to delete image properties (width and height) to produce responsive behavior. I’m going to ask the theme designer.

I’ll let you know if I can find a solution … I’ll contact you via torototimes now.
Thanks again.

Okay, I think the theme designer will be willing to help ?? Hopefully!