image crop and resize wishes

[Jozsef 79]

Thank you for your quick responses, that's definitely something I can start with.

@LostKobrakai:

Thank you for the starting point, i'll check it out although my PHP level is only enough for theming.

@horst:

pia is promising, I was not aware of this module but will check it out now. Looks like it can spare quite a few lines in the template.

Calculating the double size is fine, however it should only retinafy if the image is large enough. If upscale is disabled it is not always possible.

I'll think about these and will post back if managed to come up with a solution.

Thanks for the helpful advice again.

[horst 5,430]

@horst:

pia is promising, I was not aware of this module but will check it out now. Looks like it can spare quite a few lines in the template.

Calculating the double size is fine, however it should only retinafy if the image is large enough. If upscale is disabled it is not always possible.

I'll think about these and will post back if managed to come up with a solution.

@jjozs: If you think you can go with Pia, I can implement this feature, but I wanted to clarify how it should be best done.

With my above suggestion Pia will not create any image, you create the images with what ever method you like before Pia comes into play. Normally with images there is not returned any HTML output from PW. Only the images get rendered and the returned pageimage object holds the necessary properties (url, width, height, etc).

But with a module we can also achieve to create and return some html output.

So Pia will only inspect and return what is given by the pageimage on wich you call ->retinafy. If it has the right dimensions in regards of upscaling or not isn't noticed by Pia.

How I understand it, you want to create and serve one image for all devices including retinas. You create the images in doublesizes as normally but with less quality == high compression. To achieve this you can set the sitewide default options for the imagesizer right in Pias config page.

And if you have concernes that the images do not match a minimum length, there is are settings in images fields for minWidth and minHeight. If you provide values there, no image that do not match these criterias can be uploaded!

Edited January 8, 2015 by horst

[horst 5,430]

I have updated Pia with this retinafy: https://github.com/horst-n/PageimageAssistant/commit/d31d743533133b130131d8c5b042bd510bf68bb2

[ryan 19,216]

I think "retina" is just Apple's marketing name for what is actually HiDPI? Maybe it would be good to have a $pia->hidpi() as an alias too?

[Pete 3,715]

Indeed. Apple doesn't make displays with built-in eyeballs no matter what the marketing guys say.

Yet

[horst 5,430]

Yeah, but when reading the article that @jjozsi links to it seems that apple has done much more than only buying and using HiDPI displays.

They have implemented a technique / layer that inspects browser content and displays images in normal dimensions on the screen but scale up texts to 200%. This way you are only able to see images that sharp and also can read the text without needing glasses.

I'm not a apple fan, the only apple devices we have are iphones. All Tablets, PCs, Monitors, MP3-players, etc are not from apple.

[Jozsef 79]

@horst, thank you for the update, I'll try to implement PIM in the coming days in my current project.

I used retina because everyone just "gets it" and this problem actually came with the retina display as HiDPI wasn't widespread before.

I think iOS is not that different from other mobile devices with HiDPI screens in regards that it just uses 2x2 smaller pixels in place of every 1px we define in markup/css. That's why we have to provide 4x more pixels in the image and manually override this upscaling mechanism in the OS. The same reason why it's practical to proportionally downscale font size on mobile screens.

This technique is also extremely simple compared to other javascript solutions or using the (not valid) <picture> tag.

BTW you have to switch off "max-width: 100%" in web inspector on the images in the article as the author's blog theme took over the original article. The pair of images side by side should be the same dimension.

Edit: I wish all my wishes would come through this quick.