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

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!
 
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.webp
 
Last edited:
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:

Image%202013.01.28%2012:19:07%20AM.png


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.
 
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?
 
Top Bottom