Hi there,

VYSUAL does use retina.js, but the specific issue mentioned in this thread does not apply to VYSUAL.

Best,

Christopher

Hi Chris, is VYSUAL a theme you've used retina.js on? Do the above limitations apply to it? What does that mean in practical terms? And are you closer to your theme audit? ;)

Cheers, PA

Hi there,

I don't have a specific time frame for updates as I'm currently supporting 20+ themes while trying to work on new projects.

After my next theme release, I intend to do a theme audit for requests just like this.

Best,

Christopher

Hi, how's it going with this?

Hey there,

That's a good idea. I appreciate your understanding!

Best,

Chris

Overall it's a pretty minor issue and I am guessing you have 59328 more important things :-) The theme is superb, and is 99.9% perfect. The 'little touches' like high-res compliance just polish it off. Perhaps you could simply provide custom css for all those elements? I know it's simple for some people but it would help those with little CSS knowledge. Just the pins, button etc. Just a thought...

Hi there,

Noted! I wasn't aware of that when I updated the theme with the retina.js script, but it makes sense. I'll have to review this to see if there's a better solution.

Best,

Chris

Thanks. Might be best to change the high resolution compliance on theme forest then...

Hi there,

I think this may be a limitation of the retina.js script. It appears it only works on images within the HTML page via the <img> tag. Currently the buttons are being applied as background images via CSS.

Hope that helps explain things.

Best,

Chris

create2350(dot)com.au

Both the close box and pins have high res @2x alternatives.

Thank you.

Hi there,

Can you provide a link to the page(s) where the hi-res alternative images aren't being loaded? I'll take a look.

Best,

Chris

Thanks Dallies. Yes I have tried this and works on some elements but not others for some reason. Could quite possibly be me of course... mindful this isn't exactly best practice though and I would obviously prefer the @2x. Since that has already been coded, then I'd like to use that. Just not working for me hence if I could see it in operation it would be great. The theme says it had retina support when I purchased it but most of the elements in the demo are not high-res compliant. Just feel it would be helpful to everyone to have this resolved.

David, why not just upload the images at double size and then control the final presentation size in CSS? Example: upload 200px × 100px and then in CSS do: width: 100px !important; height: 50px !important;.

That way images look nice and sharp on all devices.

Is there anything wrong with this method? Have you tried this?

Hi Chris,

I have tried (and tried...) to make the @2x work. On my MacBook Retina I still get low res icons. Could you please forward me en example of where Navigator runs properly for high res displays? Then I can take a look with Firebug and determine what's going wrong.

Thank you,

David

You bet!

Thanks Chris - that's perfect. Appreciate your help.

Hi there,

The Navigator is using retina.js, which is a hi-res image swapper script. When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

When this theme was designed, this method didn't exist, so some elements don't have a hi-res alternative, but all new content is treated this way.

The way it works is the script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

For example, if you have an image on your page that looks like this:

<img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path:

"/images/my_image@2x.png"

So if you have hi-res images, just make sure you (1) put them in the SAME location as the image you want to replace, (2) name them the SAME, but with @2x in the file name.

Let me know if that helps.

Best,

Chris

Hi Chris,

I notice many of the PNG files (buttons etc.) are not 2x res. For example, map view sector, share button, window close / move buttons. Are there plans to make these high res? If not, and we create our own icons and custom CSS, can you please post a list of your recommended custom CSS? Thanks.