[RefereeParticipant]

Hi,

Could you please clarify how to use Retina images in Cornernerstone?

I use WP Retina 2x plugin for automation of preparation of images uploaded into my media library but it looks like Cornerstone doesn’t allow to define height and width of images when you select them from the media library.

For instance let’s say we deal with the homepage of Integrity 1 template. We have 600×600 px circular images for regular screen size and 300×300 px for mobile version of the page. That meant that if we talk about Retina support we actually need to have pictures with 2x size (1200×1200 and 600×600). When we select pictures from the media library in Cornerstone its [x_mage] shotcode uses actual size of the uploaded image. So if we uploaded 600×600 px image it will use that resolution of the image (but it will not direct us to Retina copy of 1200×1200 px file). But we need to be able to link 1200×1200 image and define its as 600×600 px for Retina displays and 600×600 px version shall be used for regular displays.

As you know WP Retina 2x plugin allows to generate regular and Retina sized images upon media upload (so that appropriate slugs added to the original file name on generation of different image sizes and stored in appropriate folder). But Cornerstone doesn’t take that into account when we select image from the media library. Maybe this is a question of X Theme support for WP Retina Plugin rather then X Theme support of WP Retina plugin. It is no matter which direction the implication goes but there shall be the right way to use regular/retina image sizes in Cornerstone.

[RadModerator]

Hi there,

Thanks for posting in.

You’re right about image sizing for retina, doubled images. But, there is no such thing as regular retina image sizes.

Does WP Retina plugin will upscale your image including its quality? Even if you upload a 600×600, it will stay at 600×600 and below. WordPress media library is only limited to the resolution that is lower than the resolution of uploaded image.

Which means, if you wish to have a double of 600×600, then you still have to upload a 1200×1200 version of it manually. And let media library crop it to generate 600×600. Then why would you crop when your target size is doubled? Again, it’s useless 🙂

Instead, just upload 1200×1200 image (or smaller if it’s just a logo) manually without using any Retina plugin. Cornerstone and X theme uses layout size for determining image sizes, and they are commonly resulted to 1200, 900, 600 and so on which are retina friendly images. Perhaps, you should try Force regenerate thumbnails plugin if you’re not getting correct image sizes?

And again, you will have to upload the biggest image as you can. Don’t expect a 600×600 becomes bigger when you just uploaded a 600×600.

Thanks for understanding.

[RefereeParticipant]

I mean that if I upload 600×600 px image to media library Cornerstone uses it as is and not downscale it (crop or redefine its dimensions) to 300×300 px anyhow. If I understand Retina principle correctly I just need to upload 600 x 600 px image to the library to be used for 300 x 300 px image spot and all the rest shall happen automatically. No matter which screen I have on a device the image shall not take the size on the screen bigger than 300 x 300 px because this is all about the image quality and not resolution itself. I have checked WP Retina 2x plugin and I have all necessary resolutions in the library for the images I want to use for both regular and retina screen sizes. But when I open up the page on Retina device it looks crappy due to again it just takes 600×600 px resolution with regular pixels density instead of 300×300 but with doubled density of pixels.

[RadModerator]

Hi there,

Again 🙂 X theme uses to layout for computing image sizes. It could be from 600 to 1600px depending on your layout max width. It will only use 300px if you layout full width max is 300px too. Which means, your 300px could be registered by other plugin.

It’s best if you can show us this process through video recording, we could be looking on different direction 🙂

And please provide your url and admin login credentials in private reply.

Thanks!

[Author]

Posts