Images for Ipads retina Display?

I wanted to upgrade the images on my site so they look good for the retina display on the new Ipad. What size/resolution do the pictures need to be saved as. Also is it possible for non-retina displays to see a small size file to cut back on loading time?

View Replies:
CygnetMidwest replied on at Permalink Reply
iPad retina display is 2048x1536 at 264 pixels per inch (ppi). I would recommend using web-fonts if you don't already. They will remain crisp at any size. A nice article that may help:

Yes, you can use CSS media queries to server different images to different size displays:

All of this can be done in your theme's CSS. Concrete5 has little to actually do with this.
moth replied on at Permalink Reply
I'm pretty sure C5 has everything to do with this.

Media queries will only get you halfway.

What about image assets that are uploaded via the File Manager?
CygnetMidwest replied on at Permalink Reply
C5 needs to be involved only if you need to let your Editors either change the design template of the site or upload retina ready photos for the content.

I answered this assuming that the question was only about the design and that the template would not be editable.

If that is the case, then *everything* can be done through CSS and media queries, and C5 does not need to be involved.
youngpixel replied on at Permalink Reply
Guys, any solutions for the images uploaded through the file manager? Thanks
moth replied on at Permalink Reply
This is my C5 solution to retina images via the File Manager. Contrary to the opinions above, I think that C5 does need to be involved if you intend to use retina images via the file manager.

This is not a complete solution however, but does work for things like thumbnail images set as attributes for blog posts (for one example).

I've used it with Page Lists and the Image block, via Custom Templates

Currently I have no solution for images used in the content block.


1) Setup and use Retina Images -

This is a set of PHP/JS tools that detects retina displays. Short story = it sets a cookie that you can read via PHP. Long Story = Read the manual.

This is also good for images served direct from your theme.

You will need to be able to edit your .htaccess file.

2) Create a C5 helper;

class RetinaHelper {
    * Returns true if the device is a retina device
   function is_retina_device() 
      // Check if a cookie is set
      $cookie_value = false;
      if (isset($_COOKIE['devicePixelRatio'])) {
         $cookie_value = intval($_COOKIE['devicePixelRatio']);
      // Check if DPR is high enough to warrant retina image
      if ($cookie_value !== false && $cookie_value > 1) {
         // Check if retina image exists

3) Use it in your Page List custom template

defined('C5_EXECUTE') or die("Access Denied.");
$rssUrl = $showRss ? $controller->getRssUrl($b) : '';
$th = Loader::helper('text');
$rth = Loader::helper('retina'); // Load retina helper
$ih = Loader::helper('image'); //<--uncomment this line if displaying image attributes (see below)
//Note that $nh (navigation helper) is already loaded for us by the controller (for legacy reasons)
<div class="ccm-page-list">
   <?php  foreach ($pages as $page):
      // Prepare data for each page being listed...
      $title = $th->entities($page->getCollectionName());
      $url = $nh->getLinkToCollection($page);
      $target = ($page->getCollectionPointerExternalLink() != '' && $page->openCollectionPointerExternalLinkInNewWindow()) ? '_blank' : $page->getAttribute('nav_target');
      $target = empty($target) ? '_self' : $target;
restyles replied on at Permalink Reply
Any news about how too use retina images in concrete5 sites?

JohntheFish replied on at Permalink Reply
restyles replied on at Permalink Reply
Looks good, will test this!