How Retina Images Are Generated

The way the retina works in the Total theme is any theme function will automatically generate the @2x image for you if the image you uploaded to start with is large enough to generate the @2x version as well as it’s not displayed in full size.

For example…If you go to Theme Panel > Image sizes you can see by default there isn’t any cropping defined. If you set your blog entries to crop at 500×500 then the theme will crop that image when it’s displayed as well as try and create a 500×[email protected] version and if it is able to generate it, it will be added to the source code (see screenshots below) so it can be used by the retina.js javascript file loaded by the theme. Any image that can not generate a retina version will be given a data=”no-retina” attribute to prevent the script from trying to locate the file and returning a 404 error.


Click image below to view full-size:


For functions outside the scope of the theme, such as the Visual Composer “Single Image” module, the theme can’t auto generate the retina version because that specific module is a Visual Composer default module, so you would have to upload your own @2x version (all VC modules under the “Total” tab support retina by default though as long as a custom cropping value is defined).

Remember: If NO cropping is defined for a specific image it will render at full size and thus a retina version won’t be created automatically. So when you are using any Total Visual Composer module (such as the Portfolio Grid) if you do not specify a specific cropping for this module then it will just display the full image, a cropping must be defined so a resized and a retina image can be created.