Predefined retina and non-retina thumbnails

Permalink
I'm looking for a way to handle 2x retina images for predefined thumbnails. I've looked through the documentation, and found these two pages:

http://documentation.concrete5.org/developers/designing-for-concret...

http://documentation.concrete5.org/developers/working-with-files-an...

Which don't seem to offer a solution. From reading the Image class I don't see an obvious way to handle this, but maybe I'm missing something.

Right now I'm outputting the getBaseVersion() manually as per the second link. Would I have top do a check for retina manually and serve that up in the custom template (and if so how)?

I know if I use getTag() as per the first link concrete5 takes care of this for me, but I'm unable to figure out how to serve up a specific thumbnail type in that case. Size and aspect ratio of image is imperative, while input picture won't necessarily be in correct dimensions, therefore getTag() doesn't seem like it would work?

 
mnakalay replied on at Permalink Reply
mnakalay
Couldn't you just use the image block or add your image in a content block? Those 2 blocks automatically deal with image responsiveness, including double sized images for retina.

For the content block to do its job though you must have image sizes defined in the page_theme file of your theme. This is done throughout the function getThemeResponsiveImageMap()
nsturis replied on at Permalink Reply
Thank you very much for your response. Yes I agree that would indeed be ideal, but I'm building a solution, where a bunch of editors will be adding pictures and image sliders with more likely than not incorrect dimensions, so concrete5 has to crop and set the correct size. Is it not possible to somehow pass a thumbnail type to an image tag-object and have it still handle the retina-upscaling?
mnakalay replied on at Permalink Reply
mnakalay
The image block can crop and resize as you need it.

But anyway, what Concrete5 is using in the image and content block is what you should use to deal with Retina automatically: the html5 <picture> tag that allows specifying different pictures for different resolutions. You would just have to follow the tutorials you referenced to provide the tag with the proper images.

But again, the image block deals with automatic resizing and unless your users provide an image that is too small, there should be no problem with the image block