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

XF 1.2 Who wants a tutorial on how to implement retina images?

Discussion in 'Styling and Customization Questions' started by Stuart Wright, Sep 14, 2013.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    Sincere many people are using iOS devices these days, I want to support retina images.
    It would be useful if there was a tutorial on how to do this for Xenforo.

    Let's make Xenforo look as awesome as we can!
     
    Andy.N likes this.
  2. Andy.N

    Andy.N Well-Known Member

    Me me me....
    In the absence of stock support, I'm using Fontawesome web fonts to replace anything that is using sprite icons.
     
  3. Jeremy

    Jeremy XenForo Moderator Staff Member

  4. RobParker

    RobParker Well-Known Member

    Just added custom node icons but would like to make them retina friendly. Any advice on the best way to implement it?
     
  5. RobParker

    RobParker Well-Known Member

  6. Jeremy

    Jeremy XenForo Moderator Staff Member

    Depending in the image, yes
     
  7. RobParker

    RobParker Well-Known Member

    Depending how?
     
  8. Shelley

    Shelley Well-Known Member

    RobParker likes this.
  9. Stuart Wright

    Stuart Wright Well-Known Member

    This is what I have so far. It's not finished.
    I have this in a custom .css, but EXTRA.css is as good a place as any.
    The elements from .catImage118 down to #footerHub ul li a .moduleIcon are the items which, instead of using avf_sprite.png, use avf_sprite@2x.png, which is identical but two times bigger. You will need to replace them with the elements you want to retinarise.
    You will need to put the path to your retina image, replacing @imagePath/avforums/avf_sprite@2x.png.
    You will need to put the size of your standard image in there, replacing 256px 138px.

    Code:
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0),
          only screen and (min--moz-device-pixel-ratio: 2.0),
          only screen and (-o-min-device-pixel-ratio: 200/100),
          only screen and (min-device-pixel-ratio: 2.0) {
        .catImage118,
        .catImage210,
        .catImage242,
        .catImage290,
        .catImage295,
        .catImage297,
        .catImage370,
        .catImage495,
        .node .forumNodeInfo .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon,
        .breadcrumb .homeCrumb a span,
        .breadcrumb .jumpMenuTrigger,
        #navSocialIcons ul li a span,
        #footerSocialIcons ul li a span,
        #footerTop .footerTopLogo,
        #footerHub ul li a .moduleIcon
        {
                background-image:url('@imagePath/avforums/avf_sprite@2x.png');
                -webkit-background-size: 256px 138px;
                -moz-background-size: 256px 138px;
                background-size: 256px 138px;
            }
    }
    
    This image is a capture from my iPad, reduced in size by half. temp1.jpg
     
    Last edited: Oct 7, 2013
    RobParker likes this.
  10. RobParker

    RobParker Well-Known Member

    Cheers Stuart and Shelley
     
  11. digitalpoint

    digitalpoint Well-Known Member

    I took a different route... rather than use two sets of images, I just use the "retina" images and scale them down for non-retina screens via CSS.

    For example, this is what the same avatar looks like on my site vs XenForo when you zoom in:

    [​IMG]

    Example of how it looks on phone:

    http://xenforo.com/community/threads/gravatar-is-retina-ready.34472/#post-439017

    For smiles (and some other stuff like our main logo), I use SVG images (scale up infinitely). See these posts for info:

    http://xenforo.com/community/threads/original-xf-images.29966/#post-343481
    http://xenforo.com/community/threads/original-xf-images.29966/page-2#post-374205

    Actually, you probably would find that whole thread useful.
     
    Shelley and RobParker like this.
  12. RobParker

    RobParker Well-Known Member

    Taking "inspiration" from a few of you I have something that seems to work.

    Code:
    .node.node_33 .forumNodeInfo .nodeIcon, .node.node_33 .categoryForumNodeInfo .nodeIcon {
      background-image: url("images/node_icons/icn-frontnews1.png");
      background-position: 0 0;
    }
    
    .node.node_33 .forumNodeInfo.unread .nodeIcon, .node.node_33 .categoryForumNodeInfo.unread .nodeIcon {
      background-image: url("images/node_icons/icn-frontnews1.png");
      background-position: 0 0;
    }
    
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0),
      only screen and (min--moz-device-pixel-ratio: 2.0),
      only screen and (-o-min-device-pixel-ratio: 200/100),
      only screen and (min-device-pixel-ratio: 2.0) {
       
      .node.node_33 .forumNodeInfo .nodeIcon, .node.node_33 .categoryForumNodeInfo .nodeIcon {
      background-image: url("images/node_icons/icn-frontnews1-2x.png");
      -webkit-background-size: 40px 40px;
      -moz-background-size: 40px 40px;
      background-size: 40px 40px;
    }
    
    .node.node_33 .forumNodeInfo.unread .nodeIcon, .node.node_33 .categoryForumNodeInfo.unread .nodeIcon {
      background-image: url("images/node_icons/icn-frontnews1-2x.png");
      -webkit-background-size: 40px 40px;
      -moz-background-size: 40px 40px;
      background-size: 40px 40px;
    }
    }
    
    
    My question is can I optimise this in anyway? I assume for example I can take some of the code outside the node section rather than repeating it for every single node?
     

Share This Page