Concrete5: How to display retina image through the image block?

Question

I am trying to implement Retina.js plugin for displaying alternate images on retina display. This will certainly work if I have a fixed image path hardcoded into the page or theme but how do I make this work through the Image block? Or is there a better alternative to this?

Answer 1

That library sounds a little heavy handed in just pinging your server for every single image. However, if you include it in the page it should work just fine.

One thing to keep in mind is that by default concrete5 uses the <picture> tag to output from the image block. Any library you use should have compatibility with that tag.

If you end up using a library that requires you output the image differently, I'd recommend creating a custom \Concrete\Core\Html\Image subclass and binding it to the container in you /application/bootstrap/app.php file:

<?php

$app->bind('html/image', \My\Custom\Image::class);