Jump to content

Image Animated GIF


horst
 Share

Recommended Posts

  • 5 months later...

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!

Link to comment
Share on other sites

@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)

  • Like 2
Link to comment
Share on other sites

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:

animation_resize.gif

 


code example with MarkupSrcSet and ImageAnimatedGif installed:

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

Result:

animation_srcset.gif

Link to comment
Share on other sites

  • 1 month later...

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!
 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

@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.

  • Like 2
Link to comment
Share on other sites

@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:

animation_with_white_bg.gif.cf8b7d4e667e3386b0c92489bd7f1c8d.gif

 

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.

anim-gif-comparision.gif.536820fd266e96ed1debec4d2eddd2fc.gif

Edited by horst
added sum up
  • Like 2
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

@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

595bf930a49f8_capture_148.thumb.png.a4c4b0f3d7d39992d58993caf7633610.png

 

Link to comment
Share on other sites

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.

screencapture_01.png.5f7e2004863d5cd921859c7a147458a5.png

screencapture_02.png.fe74975083c685e89385640e7e71c0f8.png

Edited by horst
  • Like 6
Link to comment
Share on other sites

  • 1 year later...
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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?)

Link to comment
Share on other sites

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.");
	}
});

maxfilesize.gif.384e57fcc41ac500ff02d7936805e19e.gif

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...