WordPress.org

Ready to get started?Download WordPress

Forums

WP Retina 2x
[resolved] Problem with the server-side method and responsive behavior (16 posts)

  1. Mathematica
    Member
    Posted 2 years ago #

    Hi. Excuse-me first for my English ... I would be more comfortable with French !

    Your plugin is awesome ! It's just what I thought about ... Exactly what I need.
    However, I have a problem with server-side method and responsive behavior. I use
    some responsive premium themes like

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

    and whenI "Turn On" the responsive behavior (it is possible to turn it off), the images don't have the good size ... I explain : for a 200x200 px image called image.jpg, the
    plugin creates a image@2x.jpg file that is a 400x400 px image.

    On my New iPad (retina), I can see the image@2x.jpg file BUT the size of the image is 800x800 px (and so, there's a blur effect) ...

    If I try the client-side method (retina.js), no more problem : I can see the image@2x.jpg and the iPad displays an image of 400x400 px (same size as a 200x200 px image on a non-retina device). With the client-side method, everything is perfect but ... slow.

    If I try now to turn "off" the responsive behavior, the server-side method works fine : I can see the image@2x.jpg and the iPad displays an image of 400x400 px too.

    Thanks again for your plugin.

    http://wordpress.org/extend/plugins/wp-retina-2x/

  2. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    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 !

  3. Mathematica
    Member
    Posted 2 years ago #

    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):

    http://ppl.ug/9BTXLCsDAhE/

    What I can see:

    http://ppl.ug/8t8IK87E0xE/

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

  4. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    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 :)

  5. Mathematica
    Member
    Posted 2 years ago #

    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="http://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 ?

  6. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    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?

  7. Mathematica
    Member
    Posted 2 years ago #

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

    http://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.

  8. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    Okay keep me updated :)

  9. Mathematica
    Member
    Posted 2 years ago #

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

    http://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.

  10. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    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 :( ).

  11. Mathematica
    Member
    Posted 2 years ago #

    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 ..

  12. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    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?

  13. Mathematica
    Member
    Posted 2 years ago #

    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="http://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 : http://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 :
    http://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 !

  14. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    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: http://www.totorotimes.com/about.

  15. Mathematica
    Member
    Posted 2 years ago #

    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.

  16. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic