I opted for the client side solution (for now) and moderated the retina.js in order to keep the images at 100% width and auto height.
$('#main-games img').each(function(){
new RetinaImage(this);
});
Only issue that remains is that @2x is added to the image url when using this snippet, even though @2x is already added… So you get the correct images but also a load of 404’s in the console 😀
Html rewrite works! BUT only when debug mode is enabled
Are you using caching? Maybe a cache plugin?
Cloudflare thing
I don’t know on your local, but with Cloudflare the server-side wouldn’t work. The HTML Rewrite would though, and the Client-side too.
Only issue that remains is that @2x is added to the image url when using this snippet, even though @2x is already added
Why is @2x already there?
You can check if the filename contains @2x, and if it doesn’t, then you’ll call the line “new RetinaImage”, otherwise not. Simple 🙂
Hi, thanks for replying! Still lovin’ you plugin and spreading the name towards my m8’s 🙂
I am sticking with the client side solution. The site is cached three times through memcache, varnish and cloudflare… I bet one of those might cause the rewrite to go bad? 😛
Anyway, the issue with the double @2x was due to a lazy load script. it caused the retina.js plugin to be called again when loading new content 😀 i sawk.
My dirty solution was to add the following script when loading new content:
//serve retina images. Works with the WP 2x retina plugin
$('#main-games .article-header img').each(function(){
var imageSource = $(this).attr('src');
if (imageSource.indexOf("@2x") >= 0) {
//already is a retina image
} else {
//its not a retina image
new RetinaImage(this);
}
});
memcache, varnish and cloudflare
Memcache => No HTML Rewrite, Cloudflare => No Server-Side. Only Client-Side left ^^
the issue with the double @2x was due to a lazy load script
Ah yes, that’s often the case, and that’s where the Server-Side works very well in fact.
My dirty solution was to add the following script when loading new content
Your solution is not dirty: it’s the right one 🙂
