WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Image size not set with retina disabled (32 posts)

  1. Manu-PB
    Member
    Posted 3 months ago #

    Hi,
    I've got a strange thing when disabling retina support :
    - when I upload an image the size is not set,
    - and then WP tries to display it with a size of 1x1px.
    It is so small that I first thought is was not there!

    I would really like to disable Retina ; but this issue makes it impossible.
    Is there any fix available ?

  2. rdellconsulting
    Member
    Posted 3 months ago #

    Could this help?

  3. Manu-PB
    Member
    Posted 3 months ago #

    Hi,
    From the post you mention, I understand - and confirm - that everything is fine with Retina enabled.
    But I do not wand Retina, and when it is disabled the upload of images fails : image size is not set (no image data).
    Since I would like to disable Retina (because of the numerous files), I would appreciate a fix.

  4. ElectricFeet
    Member
    Posted 3 months ago #

    This is a bug and nobody's been able to pin it down yet.

    Could I ask why you don't want retina support? Retina support will deliver sharper images to people who have retina devices—a lot of the latest phones, for example. Without retina support, images will look blurry on those devices.

    It's a genuine question: One way to get rid of the bug that I've suggested is to simply make retina-support standard, but I'm interested in knowing why anyone would not want this.

  5. chappie
    Member
    Posted 3 months ago #

    @ElectricFeet - can't argue that retina screens are prevalent on new devices but that still leaves a majority of the installed base without retina screens, as well as many entry-level new devices. I don't know the stats but a chum in the industry reckons retina currently accounts for 20% (and rising) of all screens.

    If it is the case that WP loads retina-resolution images whether they are needed or not, then the majority of viewers will suffer an overhead in terms of site loading time for benefits which are seen by a minority. An informed view here.

    Arguably too, retina is of questionable value to many phone users, given that the screen is so small and that viewers would need a) 20:20 eyesight and b) the screen unnaturally close to their eye so see the full benefit. Interesting review of current display technologies here.

  6. ElectricFeet
    Member
    Posted 3 months ago #

    Ah, thanks Chappie. I hadn't realised that it loads both.

    Re the 20:20. Those with the leading-edge retina devices will demographically be those with the best eyesight :-) (And it's not so leading edge any more, now that we have cheaper 4K screens coming through.)

    Doing some more digging, this seems to be a WordPress bug, not a Customizr bug. On the second page of this post, there's a WP hack:

    I got the same problem after upgrading WP from 3.6.1 to 3.8.1.
    It looks like there was a change in wp-includes/media.php function wp_constrain_dimensions(): width and height is set to max(1, $current_<w/h> * $ratio). I have changed:
    $w = max ( 1, intval( $current_width * $ratio ) );
    $h = max ( 1, intval( $current_height * $ratio ) );
    to
    $w = intval( $current_width * $ratio );
    $h = intval( $current_height * $ratio );
    as it was in v3.6.
    It's a hack rather than fix, so do it at your own risk.

    I don't see how it works because the 3.8 code looks fine to me. I could imagine that the new code might be bringing out another bug somewhere else, though—for instance if the image size was in some way discarded previously as it was malformed or unobtainable, but constraining it to a max fixes it totally and incorrectly to 1px.

    Alternatively, the first page of that post says it might be a permissions issue. Can anyone investigate this permissions issue?

    Maybe it's a combination of permissions (which refuses to give you the image size info, yet allows you to display the image) and the new code (which in the absence of the image size info constrains the image to 1px x 1 px).

    Sounds like a plausible scenario. Any WordPress image gurus out there?

    Mods: any chance you could raise this to an image specialist's attention?

  7. ElectricFeet
    Member
    Posted 3 months ago #

    (And for completeness, if a WP image guru does pass by, here's a previous troubleshooting post on the problem)

  8. ElectricFeet
    Member
    Posted 3 months ago #

    Apologies: that was a post that was prematurely closed. The correct troubleshooting post is here.

  9. Side note and unrelated to this topic: please do not tag topics as modlook unless there's abuse, spam or something that needs fixing such as broken formatting or worse posted malware.

  10. chappie
    Member
    Posted 3 months ago #

    ElectricFeet, that stuff is way above my pay grade but I hope a fix can be found. I agree with @Manu-PB that it's a nonsense to be forced to enable the retina option.

    FWIW, as I have mentioned before, it is possible to fix the in-page display problem where an apparently corrupted image is manually inserted and therefore its dimensions are editable in HTML. Simply altering the 1 x 1 pixel size to the correct size of the image forces it to display properly on the page -- albeit its library preview thumbnail remains broken.

  11. ElectricFeet
    Member
    Posted 3 months ago #

    Jan: Apologies Jan, won't do it again.

    Chappie: I realize that manually changing the images patches things up in posts/pages, but lots of people have this problem in their featured images, which cannot be patched up easily. I'm determined to get to the bottom of it one day, or cheer loudly when someone else does...

    Manu-PB, Chappie, I can confirm that the hack:

    In wp-includes/media.php function wp_constrain_dimensions(): change:
    
    $w = max ( 1, intval( $current_width * $ratio ) );
    $h = max ( 1, intval( $current_height * $ratio ) );
    
    to
    
    $w = intval( $current_width * $ratio );
    $h = intval( $current_height * $ratio );
    
    (as it was in v3.6)

    does fix the problem (I have the problem on my local install when retina is off).

    However, the problem itself is rare, so to get it fixed permanently, we need to find out under what circumstance it happens. If someone can tell me what tests to do, I can try them on my local install.

    Anyone?

  12. Manu-PB
    Member
    Posted 3 months ago #

    Thanks all for these information.
    @ElectricFeet, I'm not ready to modify WP core files, so until the problem is fixed I continue tu use Retina.

  13. ElectricFeet
    Member
    Posted 2 months ago #

    Well, I've done a little more study on this. The change above seems to "correct" the problem in the media library, but does not resolve the underlying issue.

    The image is coming through at 0px x 0px. This is set when the image is uploaded. Something somewhere is stopping it coming through at the proper size. (This is where I'll look next)

    The reason that changing the code above seems to help is as follows: The code in question is part of a function that (among other things) defines the size of the thumbnail image to display in the media library. As the image is coming through at 0px x 0px, the "max" function in the code above changes it to 1px x 1px, and that's why you can only see a 1px dot in the media library. If you take the "max" function out as the other poster suggested, then the image size (which is still 0px x 0px) is not reset to 1px x 1px. WP then displays the image properly—probably because there's some error correction going on elsewhere (something along the lines of "if the image is 0px x 0px, then it's clearly wrong, so ignore it and display the whole thing").

    Anyway, bottom line is that it's not WP code that's in error, but something that's happening on the upload.

    BTW, for anyone else who wondered (like I did) how to see what's in a variable — in a very quick and dirty way — this line of code does it:
    echo '<pre>' . print_r($current_width, true) . '</pre>';
    (substituting $current_width with whatever variable you want to see).

  14. chappie
    Member
    Posted 2 months ago #

    @ElectricFeet - following with interest. Surely the answer lies in the difference between the retina-enabled upload function and the retina-disabled upload function?

    Or between the retina-disabled upload function and the standard 2013 upload function when all images displayed fine?

  15. ElectricFeet
    Member
    Posted 2 months ago #

    Hi Chappie. Yes, that will be where the problem lies, but I was trying to find out why that hack seemed to solve the problem.

    Further investigations this evening (exporting my database from phpadmin -- all new territory for me) show that for non-retina images, the metadata is not being saved.

    Will keep you posted...

  16. ElectricFeet
    Member
    Posted 2 months ago #

    Well, that was quicker than I thought. Once I'd found there was no metadata, I could do a better search on Google. Specifically this post, where someone has an issue with loss of _wp_attachment_metadata. In his case, the poster of the question is using a filter, and the answer is telling him that he should return some data with the return statement. In Customizr's case, we have this function:

    /**
       * This function handles the support for high resolution devices
       *
       * @hook wp_generate_attachment_metadata (10 ,2)
       * @package Customizr
       * @since Customizr 3.0.15
       * @credits http://wp.tutsplus.com/author/chrisbavota/
       */
        function tc_add_retina_support($metadata, $attachment_id) {
          //checks if retina is enabled in options
          if ( 0 == tc__f( '__get_option' , 'tc_retina_support' ) )
            return;
    
          foreach ( $metadata as $key => $value ) {
              if ( is_array( $value ) ) {
                  foreach ( $value as $image => $attr ) {
                      if ( is_array( $attr ) )
                          $this -> tc_create_retina_images( get_attached_file( $attachment_id ), $attr['width'], $attr['height'], true );
                  }
              }
          }
          return $metadata;
        }//end of tc_retina_support

    Following the same logic—that we should return some data—even though I shouldn't necessarily follow the same logic as it's not a filter, I played around with using this for the if statement instead:

    if ( 0 == tc__f( '__get_option' , 'tc_retina_support' ) )
            return $metadata;

    ...and whaddayaknow? It seems to work. Could this be a case of the iffy if? Can you try it Chappie?

    @Nikeo: is this the bug fix we've all been looking for or is it just another case of two wrongs making a right somewhere along the way?

  17. ElectricFeet
    Member
    Posted 2 months ago #

    I should add that you'll find that code in class-fire-init.php.

  18. nikeo
    Member
    Theme Author

    Posted 2 months ago #

    THIS IS IT!!!!!!
    So perfectly simple and beautiful.

    Will of course be included in next release! Thanks @electricfeet

    Big smile on my face :)

  19. chappie
    Member
    Posted 2 months ago #

    :-D

    All Hail @ElectricFeet. This is right up there with antibiotics.

    Next: perpetual motion.

  20. Manu-PB
    Member
    Posted 2 months ago #

    Magnifique !
    Merci @ElectricFeet !

  21. ElectricFeet
    Member
    Posted 2 months ago #

    He he :-) Thanks guys.

    Chappie: not sure if Florey would agree :-)

    On the issue of the discussion of retina support, although I cannot read javascript, I've found out that it doesn't load both images anyway:

    • nikeo is using c.bavota's code (and retina.js by Imulus). c.bavota clearly states:
      It only makes sense to display a higher quality image if the end user is using a retina display. For our purposes, the best way is with JavaScript. I like to use a script called retina.js by Imulus. It weighs in at only 4kb and adds all the front-end functionality you need to detect a retina display and load the right image.
    • But if that's not enough to convince, I did a small experiment on my browser. First I emptied the cache. Then I went to my site and browsed some images. I then entered about:cache (it's Firefox) and looked at what images had been downloaded. Answer: no retina images.

    So it shouldn't—it seems—be an issue to leave retina support switched on in all cases anyway. There doesn't seem to be anything lost (apart from a few nanoseconds to execute a few lines of code).

    I'd like to thank (sorry if this sounds like an academy award or something) ... I'd like to thank all the mods for their patience while I publicly worried this bug to death over the last few months. Thanks guys :-)

  22. chappie
    Member
    Posted 2 months ago #

    ElectricFeet, that's great information about the retina code. But I'm not convinced that retina-compliant images display exactly the same on a non-retina device as a conventional single resolution image. I'm sure that I have noticed slight changes to the display quality of my single-resolution images after enabling the retina option: they seemed to be a fraction darker, a fraction grainier and perhaps a fraction more contrasty. Not enough for me to get out all my tools and take scientific measurements though…

    Your comment about Firefox's about:cache got me thinking because I need a more reliable method of determining which images are actually being used in my site so that I can delete every other image I have uploaded over the past 6 months. Sounds like I just need to load every page in a cache-empty Firefox to get my answer.

    As for your Sherlockian compulsion to solve this mystery, it is highly commendable and the posters on this thread won't be the only ones grateful for it. Anyway, WP *should* have its Academy Awards or Hall of Fame or MVP Awards imho…

  23. ElectricFeet
    Member
    Posted 2 months ago #

    Nope: placebo effect there, I think :-)

    The code loads either the normal image to a normal screen or the retina image to a high-definition "retina" screen/device.

    So retina devices see the retina image (an image twice the px size with a "@2x" suffix), while non-retina devices see the normal image. On a normal screen, you're seeing the normal image.

    ...unless, of course, you've found a bug in retina.js :-)))

    I have an iPod Touch (retina) and can say that retina images really make a difference (I'm lucky to still have good close-up eyesight). They look really sharp and crisp. Even a crap photo looks good on a retina device—probably because most of the web doesn't have retina support yet, so there's not that much competition. On my (non-retina) desktop, on the other hand, I view a very good quality screen at arms-length with my computer glasses and can see every pixel. It drives me crazy.

    Bottom line: Retina support is a Good Thing, and I don't think there's any evidence that enabling it is detrimental. But I'm happy to be proved wrong with magnified screenshots from a non-retina screen :-)

  24. ElectricFeet
    Member
    Posted 2 months ago #

    p.s. On your comment:

    I need a more reliable method of determining which images are actually being used in my site so that I can delete every other image I have uploaded over the past 6 months. Sounds like I just need to load every page in a cache-empty Firefox to get my answer.

    The media library has a column "Uploaded to" which shows if an image is attached to a page or "unattached". Of the "unattached"s, you have to allow for the logo, favicon, and slider images. Everything else should be fair game for spring-cleaning.

  25. chappie
    Member
    Posted 2 months ago #

    Well, my son proudly showed me his retina MacBook and I couldn't see any difference. But I'm willing to accept that my old eyes aren't what they used to be. I did notice a big difference when our TVs went from SD to HD - but I can't see any further gains since then…at least, not at normal viewing distances, which have to be the benchmark.

    Of the "unattached"s, you have to allow for the logo, favicon, and slider images. Everything else should be fair game for spring-cleaning.

    That's the rub though: over 50% of my image detritus is discarded slider images so the method you recommend would be akin to Russian Roulette for me.

    Why can't the media library pick up on attached slider images?

  26. chappie
    Member
    Posted 2 months ago #

    Then I went to my site and browsed some images. I then entered about:cache (it's Firefox) and looked at what images had been downloaded.

    @ElectricFeet - I'm trying to work out how to do this. I don't much use Firefox. Where/how do I enter about:cache?

    TIA.

  27. d4z_c0nf
    Member
    Posted 2 months ago #

    In the address bar. ;)

  28. chappie
    Member
    Posted 2 months ago #

    Duh! Hey - that's pretty cool!

    Thanks d4z_c0nf. I'm bored with gardening now - back to the voyage of discovery…

  29. rdellconsulting
    Member
    Posted 2 months ago #

    Gardening? Leave that to the wife like I do. Trouble is, it would be more healthy in the garden than stuck in front of this screen every day ;)

  30. chappie
    Member
    Posted 2 months ago #

    Nobody - but nobody - touches my computer, my car, or my lawnmower.

    Btw, I'm very happy with my website today and making time for the garden was proof of that. In other words, I blame you guys for me being cream-crackered tonight.

    Public warning: my first Customizr/first WP website may go online this week, after 6 months of community building. I will probably need more help. Please keep your diaries clear. Thank you.

Reply »

You must log in to post.

About this Theme

About this Topic