Support for Retina displays #77

Open
jrief opened this Issue Oct 15, 2012 · 9 comments

Projects

None yet

4 participants

@jrief
jrief commented Oct 15, 2012

Owners of MacBook Pro's with Retina Display might miss high resolution images on their computer.
Since images served by cmsplugin-filer-images often are thumbnailed anyway, it would be quite easy to produce a special high-resolution thumbnail with double resolution. Here is some information about how such a feature has been implemented for WordPress: http://wpmu.org/wordpress-retina/
If there is interrest for such a patch, I would like to create it.

  • Jacob
@yakky
Collaborator
yakky commented Oct 15, 2012

I have mixed feelings about this.
In my opinion the only proper solution would be a enabled template, whenever a consensus will be reached on the syntax; too bad we're quite far from that point.
I don't know if poking with cookies like the wordpress plugin is a viable / robust solution in the meantime

@jrief
jrief commented Oct 15, 2012

Well its just about creating the same thumbnail twice. Say you have a big image named awesome.png, and this image shall be displayed in a 120x120 canvas, cmsplugin-filer-images creates an image named awesome.png.120x120_q85.png. Now an additional thumbnail named awesome.png.120x120_q85@2x.png and a resolution of 240x240 would be created.
If this image is used as background, the web designer can simple add a special media directive such as::

@media all and (-webkit-min-device-pixel-ratio : 2) {
    backgound-image: url('awesome.png.120x120_q85@2x.png');
}

If this image shall be used in an tag things are more tricky. One possibility is to add some special Javascript code to replace all low-res images against their his-res counterpart. This is not the path I would take, because it requires to load every image twice.
The other option would be to examine the HTTP User-Agent. Unfortunately neither Safari nor Chrome give any hint in their User-Agent, if the browser supports Retina displays. Only the browser itself knows if it supports high-res images and delivers this information through Javascript::

if (window.devicePixelRatio >= 2) ...

Now, this information can be stored inside a Cookie and/or Session on the first site invocation, which than is evaluated by the template tag::

{% thumbnail "awesesome.png" 120x120 %}

I agree, this is not the most elegant solution, but it is feasible and suitable to the problem. Leaving the honor to others (ie. Wordpress) is FMPOV not an option.

Jacob

@neoascetic

You can use custom thumbnail processor for this or signals handlers that automatically create corresponding image for retina displays, can't you? I mean, if you really need this feature in your project.

@yakky
Collaborator
yakky commented Oct 15, 2012

@jrief I agree it's time to investigate this topic, and would be cool to have such a feature.
On the thumbnail generation side, a thumbnail processor in django-filer is the best option, I guess (which will automatically creates a @2 thumbnail whenever one is requested).
On the presentation side, I just can't figure out if wordpress-ish solution is robust enough in the django environment (i.e.: I don't think you can ensure cookie/whatever is set before any image request is sent); but then maybe a non 100% working solution is better than no solution ATM.

@yakky
Collaborator
yakky commented Oct 15, 2012

Just for completeness sake this http://responsiveimagescg.github.com/ri-usecases/ is the unofficial specification draft for the picture element

@jrief
jrief commented Oct 18, 2012

@yakky I just had a look at the way the thumbnailer plugins work. Unfortunately there is no way to thumbnail an image into two different versions. Also, since the thumbnailers are chained, there is no way to avoid that a retina suitable image is passed to the next filter which thumbnails the image again.
But the biggest problem is, who decides which of the two images shall be served? The thumbnailer certainly is not capable, simply because it does not "see" any cookie data.
From my point of view, this feature must be added at a much higher level in cmsplugin-filer.

@yakky
Collaborator
yakky commented Oct 19, 2012

I digged in the code a bit: best place to generate retina files is indeed non trivial. I assume the best option would be to generate @2 files whenever a thumbnail is created, though I don't know how to accompilsh this right now.
Or combining this part with filer serving backends (filer.server.backends) which can check the cookie, generate the retina file and serve the right file.
@stefanfoulis any thought on this topic?

@jrief
jrief commented Oct 20, 2012

I agree. This feature shall be added to easy-thumbnails. I added the following issue at SmileyChris/easy-thumbnails#175
Jacob

@teilo
teilo commented Jan 22, 2013

I would be happy if I could at least upload a file and have the "@2x" I add at the end preserved. That way I can create a high-res version of any given piece of art, upload both of them, and use retina.js to do the switching in-browser. As it is, filer renames the file, eliminates the "@", and thus makes it impossible to use retina.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment