ZP_picturefill plugin

ClicClac

Hello,

Does a theme use this plugin ?

acrylian

No, I don't think and for sure none of the official ones (except zpMobile none is responsive yet anyway). Generally we try to list the plugin support for all themes on the themes sections btw.

ClicClac

Do you have some example using the plugin or more detailed explain ?

I wish to replace the printDefaultSizedImage() function and display instead a 'Retina' picture on my retina MacBook.

I'm trying:
`

$img = getHDCustomSizedImageMaxSpace(NULL, $hd=true, 610, 408,$thumb=false,$effects = null);

printResponsiveImage($img[0], $img[1], NULL,NULL,NULL,NULL,NULL,NULL,NULL);

`

See here.

My theme setting:
-Full image image: 800x600
-Default image image: 610x408

For testing, I've uploaded in 'Retina' album a 1600x1200 picture

acrylian

Too complicated: Just replace `printDefaultSizedImage()` with `printHDDefaultSizedImage()`.
It handles using the right image for the right device itself. That means the right size for the screensize and HD if you are on a HD device. SImple rule: No HD devide, no HD image. That is the purpose of picturefill.

I am sorry I am lacking a retina device to actually test this functionality myself. It is a rather plain implementation of picturefill. I appreciate testing though. Seems you are the first trying it at all.

ClicClac

Thanks acrylian ! Seems working but not perfect.

Normal:
Load /zenphoto/cache/divers/2014-04-17_CascadesDuHerisson_6209-800x533_595_watermark.jpg

Retina:
Load /zenphoto/cache/retina/2014-04-17_cascadesduherisson_6209_595_watermark.jpg
The picture displayed in the browser (zenphoto or directly) does not appear as sharp as that displayed in MacOSX.

Also some NOTICE and WARNING.

acrylian

How sharp the image appears has to do with the resizing done via the server. The retina image being quite huge is set to a low quality compression of 35 of 100. That follows this observation: http://filamentgroup.com/lab/rwd_img_compression/

I see a difference but it is not that huge to me though. At least no one will really notice as the comparision will be missing. I might add an option to set that lower compression though.

Please open a ticket about the warnings and notice on the zp_picturefill repo.

ClicClac

I've tried the new version. Doesn't work !
Some typo errors. Lines 61, 63, 66, 144/145, 162

acrylian

The image must exist in a size so it can be disbaled doubled. So if you have a 800x600px image the retina one would be doubled 1600x1200px. Zenphoto does not upscale images that do not have that size originally.

Sorry, "doesn't work" is not really a helpful bug report. Please see: http://www.zenphoto.org/news/general-contributor-guidelines#reporting-bugs

Also, please it is really more helpful to open a ticket for things this and provide some details what the typo is on the zp_picturefill repositories. Here on the forum things get too easily lost if I don't get to it it right away (which I mostly don't).

ClicClac

The plugin doesn't activate. I've open a ticket (not familiar for me)

ClicClac

Like you said, I'm just using the printHDDefaultSizedImage() function.

But I don't understand the $hd variable (in getHDDefaultSizedImage() ), it is never defined.

acrylian

Thanks for the ticket. That is better. I will take a look, I don't exclude that there are issues of course.

ClicClac

I need to add the height and width attributes to the <img srcset /> tag (line 142).

`$html .= '';`

How can I get the settings theme value for height and width default size ?

Finally, ZP display retina photo :-)

Now I need Retina thumb...

acrylian

Great it is working generally now ;-)

Given that you probably have a responsive layout if you have retina support I am not sure the width/height is really needed. I know it is a recommendation for static layout for the browser to see what comes.

It is not really that easy to add this as the function only gets the image urls passed. This would require a new array parameter to several sub function to pass the w/h values for all three sizes.

Best you open another ticket :-)

ClicClac

Hello acrylian.
I post this message after you've closed issue #6

--
Maybe a typo line 545

$croph = getOption('thumb_crop_height', $croph, false);
should be
$croph = setOption('thumb_crop_height', $croph, false);

Also, there isn't a 'HD printAlbumThumbImage' function for index.php (gallery.php).
I made one based from printAlbumThumbImage() with a little of getHDImageThumb() and some getResponsiveImage() ;-)
--

Maybe should I open a new ticket ?

acrylian

Yes, that is a typo.

Regarding the albumthumb there is indeed an specific function missing. The idea was actually to use the object model to get the image and pass the object to the imagethumb function. But a proper function seems to make more sense. So yes please open a ticket probably best with a pull request of your change (I probably do it the same way).

acrylian

I had some time so I added the missing function following the official theme function. TAke a look and open tickets right away if you find something.

ClicClac

Seems perfect :-))

Many thanks, acrylian !!

acrylian

Thanks for the feedback!

xaphod

Hi Acrylian
First, thanks for making this plugin! Retina support is a must-have for me...

Currently (Nov. 16 2014), your zp_picturefill.php has a parse error: please look at line 358, it needs to be deleted (extra / spurious } )

After I fix this, activate the plugin successfully, and edit my theme to use printHDDefaultSizedImage, I see the following error:
Fatal error: Call to a member function getSizedImage() on a non-object in .../zp_picturefill.php on line 515 (keep in mind this line number is after I deleted line 358)

In my theme, i'm calling your plugin like this:
printHDDefaultSizedImage(getImageTitle());
... I presume this is wrong.

Can you please help?
thanks!
tim

acrylian

Thanks. The typo should be fixed now.

And yes, you are calling it wrong ;-) Just call `printHDDefaultSizedImage()` if you are in image context like on `image.php`(it knows the title already) or within the `next_image()` loop. Otherwise the first parameter must be an image object.

xaphod

Thanks for the prompt reply!
By just calling printHDDefaultSizedImage() I'm making progress -- I see the HTML below served by ZP. BUT, the image looks exactly the same. The source of the image is definitely high enough resolution. Should I set any other settings in ZP, or did I mess up somewhere else ?

`







`

acrylian

Ah, sorry you have to set the 2nd parameter to `true`. So `printHDDefaultSizedImage(null, true)`. For some reason I don't remember the HD image is false by default.The parameter makes no real sense actually… Will review that for the next version. That by the way will not use `` for the simple SD/HD image ones but the lighter ´<img srcset>`.

xaphod

That worked, thanks! Now my album & image pages are showing nice retina-friendly images.
... now how do I hack slideshow2 to do this too?

acrylian

You will actually have to code your own plugin version. Look at the Cycle class and its method `getSlide`. There you have to replace the image calls with the picturefill ones (best with a check so it does not break if the plugin is off).

Or you use the workaround of providing bigger image sizes with more compression while scaling them down.

That often is enough for example if you have a responsive theme where images are scaled smaller anyway on breakpoints.