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

[Stuart Wright]

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]

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

 

[Jeremy]

You'll just need to use CSS:
http://coding.smashingmagazine.com/...sive-font-sizing-media-query-efficiency-more/

 

[RobParker]

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

 

[RobParker]

You'll just need to use CSS:
http://coding.smashingmagazine.com/...sive-font-sizing-media-query-efficiency-more/

Does that mean you literally just double the size of the image or does it require creating a new version of the image at double the size with a higher resolution?

I.e. Can I literally just resize an image without editing the image content?

 

[Jeremy]

Depending in the image, yes

 

[RobParker]

Depending how?

 

[Shelley]

Depending how?

I'm sure @digitalpoint created a support thread where he highlighted what he did with regards to the svg imagery. Might be worthwhile searching for that thread since it had useful info in it when he converted his smilies over.

Edit: http://xenforo.com/community/threads/original-xf-images.29966/

 

[Stuart Wright]

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.

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

 

[RobParker]

Cheers Stuart and Shelley

 

[digitalpoint]

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:

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.

 

[RobParker]

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

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