1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Support for HiDPI images and assets / Retina display support

Discussion in 'XenForo Suggestions' started by Erik, Jun 21, 2012.

  1. Erik

    Erik Well-Known Member

    Now that we have an actual computer out with a high density display, I would really like to see HiDPI support in the next major point release of XenForo.

    XenForo already looks great on the Retina MacBook Pro due to its extensive use of CSS, but if it served HiDPI images across the entire product, it would look beautiful and truly stand apart.

    I would hope for a server-side solution, as something like retina.js not only slows down page loading, but also uses far more bandwidth than necessary by loading both the normal resolution and the high-resolution image.

    In fact, since XenForo seems to almost entirely use CSS background-images for UI images, including avatars, almost everything could be handled by making a slight change on the backend to generate @2x versions of every image, and then using CSS media-queries to serve the HiDPI versions to clients that support it. Like so:

    Code:
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
         /* target code here */
    }
     
  2. Andy.N

    Andy.N Well-Known Member

    Fully support this idea. I have been tinkering with my site since I got the ipad 3.
    I also read up on making websites retina ready.
    For the time being, I redid my logo to use SVG format. The result is great.
    So either XF provides stock images in vector format or provide 2x versions.
     
    Adam Howard likes this.
  3. Quillz

    Quillz Well-Known Member

    SVG elements would be nice because then they'd scale properly up or down to any resolution.
     
    Adam Howard likes this.
  4. DeltaHF

    DeltaHF Well-Known Member

    I'd love to see this as well. It's going to take some time to get widespread support, however, until HiDPI becomes a bit more mainstream.
     
    Adam Howard likes this.
  5. Andy.N

    Andy.N Well-Known Member

    I just tried to upload a svg file as avatar and got an invalid type error.
     
    Adam Howard likes this.
  6. Quillz

    Quillz Well-Known Member

    Most sites don't allow raw posting of SVG images, at least as avatars. If you're using Illustrator or Inkscape, though, you can very easily export it to a raster format, such as PNG.
     
    Adam Howard likes this.
  7. Erik

    Erik Well-Known Member

    Yeah, that's not going to work, mostly because the internals are built entirely to handle bitmap image formats (including upscaling/downscaling). Support for vector user uploads would be nice, but vectors aren't appropriate for most avatar images, so there's still going to need to be a lot of backend work to generate @1x and @2x versions for each image.
     
  8. Adam Howard

    Adam Howard Well-Known Member

    With many major sites accepting this as a standard option, such as Gravatar which is built into XenForo and a wide range of mobile, tablet, and even desktop hardware support for retina display, logic would suggest XenForo offer better built in support for this.

    Even free alternatives such as Word Press are adding such support
    http://techcrunch.com/2012/08/02/wo...atar-and-all-hosted-and-self-hosted-wp-sites/
     
    Mr. Goodie2Shoes likes this.
  9. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    They ought to add the support as they are from the same company... its logical innit? :D
     
    ShadyX likes this.
  10. mizter1nho

    mizter1nho Well-Known Member

    Please add Retina Display support for XenForo default style.
    It's small work and very useful for owners of Retina MacBook, iPad and iPhone.
     
    SonicRC, Andy.N and DeltaHF like this.
  11. Arty

    Arty Well-Known Member

    Nokia and old IE won't allow it.

    The only thing that needs to be done to support @2 displays is create larger icons and then scale them down via background-size. Problem with that is Opera Mini and old IE don't support background-size.

    edit: I was wrong. Please ignore this.
     
  12. mizter1nho

    mizter1nho Well-Known Member

    It can be implemented in JavaScript.
     
  13. RobParker

    RobParker Well-Known Member

    Digitalpoint is retina-friendly isn't it?
     
  14. Arty

    Arty Well-Known Member

    No, its not. Yes, it is!
    You'll still need 2 sets of icons. That's the biggest problem.
     
  15. digitalpoint

    digitalpoint Well-Known Member

    Why do you say that?
     
  16. RobParker

    RobParker Well-Known Member

    I thought I saw Shawn mention how he'd made the images all SVGs and they scaled for retina display. I might be misremembering though.
     
  17. Arty

    Arty Well-Known Member

    Because I just checked it with my phone that has @2 display.
     
  18. digitalpoint

    digitalpoint Well-Known Member

    Any chance you could post a screenshot of what you see with your phone?

    The left is the same avatar here vs on my site (as example)...

    [​IMG]
     
  19. Arty

    Arty Well-Known Member

    Nice. I didn't look at avatars. Well done :)
    Forum icons though aren't done. See folder icons and forum selection icon on screenshots below.
     

    Attached Files:

  20. Andy.N

    Andy.N Well-Known Member

    I think Shawn posted how to make the avatars retina-ready before.
    Can you make your Responsive addon retina compatible as well?
     

Share This Page