Module Image Animated GIF

[mr-fan]

On 19.8.2016 at 0:08 PM, diogo said:

@horst you saved my day with this module

same same...

[jploch]

For a website Iam working on, I tried to use this module with animated gif's.
I know that PW doesn't support resizing animated gif's out of the box, so I also installed the "Image Animated Gif Module".

Now the gif's are animated but have strange artifacts and colors.
When I resize them with PW like "$image->width(320)" they are fine.

Is there anyone having the same problem?
Would be awesome to use this module for all my images!

THX!

[horst]

@jploch: a question from me to clarify:

• You have installed ImageAnimatedGif module and
• it produces correct resized and animated variations with calls to pageimage methods (widt, height, size),
• but it doesn't produce the same result when you use it with MarkupSrcSet?

The ImageAnimatedGif hooks into before pageimage resize, and MarkupSrcSet simply calls pageimage size, so I'm wondering what could be the difference here?

What is the result of MarkupSrcSet? Images are scaled down and animated, but with artefacts? Can you provide an example? (a variation from direct call to pageimage and one result from MarkupSrcSet)

[jploch]

12 hours ago, horst said:

@jploch: a question from me to clarify:

• You have installed ImageAnimatedGif module and
• it produces correct resized and animated variations with calls to pageimage methods (widt, height, size),
• but it doesn't produce the same result when you use it with MarkupSrcSet?

The ImageAnimatedGif hooks into before pageimage resize, and MarkupSrcSet simply calls pageimage size, so I'm wondering what could be the difference here?

What is the result of MarkupSrcSet? Images are scaled down and animated, but with artefacts? Can you provide an example? (a variation from direct call to pageimage and one result from MarkupSrcSet)

Thanks for your quick reply!

Here is my code example (shortened) without MarkupSrcSet and with ImageAnimatedGif installed:

 $image->width(300);
echo ="<img src='{$image->url}'>";

Result:

 

code example with MarkupSrcSet and ImageAnimatedGif installed:

$srcset = $image->srcset('thumbnail', 'inline-block', array('quality' => 70));
echo ="<img $srcset>";

Result:

[adrian]

Hey @horst - now that Chrome (https://9to5google.com/2017/04/27/chrome-59-animated-png/) (and others) are supporting aPNGs have you looked into what is needed to support this in PW?

[jploch]

any news on using this with animated gif's?

I have an image field with various files (gif, png, jpg)
Is there a way to just target gif files and resize them with PW (like $image->width(300);)
and use MarkupSrcSet for the rest of the images?

Any help would be appreciated!
 

[horst]

I want to port the animated gif module to the new image rendering engine module type. With this it will automatically handle the animated gifs correct. Maybe I can do it this week / weekend.

[horst]

@jploch I have tested this and created a new Rendering Engine, but for me, every created variation has the same (wrong) result as your example. It is something in that image that doesn't work right with the lib. I think it is a false transparency for every slide in the animation. Are there other images that behave the same?

In your "working example" that result in correct variation, I belive it is the original image or simply copy of it. You use ->width(300) and the original is 300px. For me, every downscaled variation doesn't work correct.

[horst]

@jploch The crux is with the transparency of the background. The original image is recognized as a transparent, animated GIF. But the stored transparency color index validates to 0,0,0 (black !)

I have opened your image in photoshop and added 1 layer filled with white to the base of the other 60 layers. The animated resulting GIF is same size as yours with transparency but works with the anim module:

 

To sum up:

• the anim gif module doesn't work in any case with this sort of images.
• The culprit is the transparency background.
• If you are able to add a filled background layer to those images, it will work good with resizing. (test the image above)
• If you also need the transparent background, you cannot use any sort of variation creation. Workaround could be to determine in template file if it is a GIF (or only if it is an animated GIF) and then use markup with a special css class for displaying those in different sizes, according to media query max-width, for example.

Edited July 3, 2017 by horst
added sum up

[jploch]

@horst  Thanks for explaining the problem!

unfortunately I have to use GIF's with transparency.

• Quote

  If you also need the transparent background, you cannot use any sort of variation creation. Workaround could be to determine in template file if it is a GIF (or only if it is an animated GIF) and then use markup with a special css class for displaying those in different sizes, according to media query max-width, for example.

  I think that would be the way to go. How would I target GIF's in my template file? Can you give an example?
  Thanks again for your support!

[horst]

@jploch checking the image type:

$image = $page->images->first();

$imageSizer = new ImageSizer($image->filename);
$imageInfo = $imageSizer->getImageInfo(false);

This will return strings like:

jpg

gif
gif-trans
gif-anim
gif-trans-anim

png24
png24-trans
png24-alpha
png8
png8-trans

In your case, when gif-trans-anim is detected, you want to switch to css-workaround.

 

Spoiler

 

[horst]

Since today, 31-01-2018, we have support for this in the PW Core. Therefore I updated this module to version 2.0.2

This version handles the detection of the core support and dismiss its installation then. If the core module is available but not installed, it get installed instead of this third party module.

If you have this third party module already installed since a previous PW version and upgrade your wire folder, this module will detect the core module and install it. Its own hook isn't registered then and you get a notification about the changes.

Edited January 31, 2018 by horst

[cst989]

When I enabled this, a page with a rather oversized gif ran out of memory saving, and then proceeded to return a 500 on the front and back-end ?

[horst]

2 hours ago, cst989 said:

When I enabled this, a page with a rather oversized gif ran out of memory saving, and then proceeded to return a 500 on the front and back-end ?

a) Please tell a bit more accurate about what you have installed / enabled. (PW version, which gif extension and version.

b) How big is the original anim-gif in filesize?

c) How much memory usage is available for PHP?

[cst989]

Sorry I should've been clearer. I used the latest version, ie part of Processwire (3.0.1xx)

The gifs etc were very big, memory limit was 128M I think. I can't tell you the exact size because I told the person editing the page to make them (much) smaller and reupload. Of course, I can increase the memory and decrease the filesize but the problem was more about  being unable to get back into the page without uninstalling the module

[horst]

1 minute ago, cst989 said:

but the problem was more about  being unable to get back into the page without uninstalling the module

Instead of that, you can delete the imagefile. Then the frontend page and the admin page will load again.

To prevent this in the future, you may configure a setting for max filesize in those imagefields for uploads. (NOTE: not max dimensions, but max filesize and set it do be handled on clientside, not serverside)

I think there is a module available for this max-filesize-setting, but can't remember it's name. (ping: @Robin S do you have created one with this feature?)

[Robin S]

18 minutes ago, horst said:

ping: @Robin S do you have created one with this feature?

No, but I posted a hook for using the hidden JS max filesize validation for File fields:

I'm not sure if this validation is used for Image fields.

Another hook that could be used to check the filesize after an image is uploaded:

$wire->addHookBefore('InputfieldImage::fileAdded', function(HookEvent $event) {
	/* @var Pageimage $image */
	$image = $event->arguments(0);
	$max_filesize = 150000;
	if($image->filesize > $max_filesize) {
		throw new WireException("Image $image->basename is $image->filesize bytes which exceeds the maximum of $max_filesize bytes.");
	}
});