Jump to content

Image Animated GIF


horst
 Share

Recommended Posts

Image Animated GIF  v 2.0.2
 
Module for PW 2.5 stable or newer, but is obsolete for PW Versions greater then 3.0.89 (... read more ...)
 
This module helps with resizing and cropping of animated GIFs when using the GD-Library.
The GD-Library does not support this.


This module is completely based upon the fantastic work of

   László Zsidi (http://www.gifs.hu/, builts the initial classes)

   xurei (https://github.com/xurei/GIFDecoder_optimized, enhanced the classes)


I have ported it to a PW module and it works with core imagefields, together with Pia and with CropImagefields that uses the new naming scheme since PW 2.5.
 

------------------------------------------------------------------------------------------------------------------------------------------

read more in this post about the rewrite from version 1.0.0 to version 2.0.0

------------------------------------------------------------------------------------------------------------------------------------------

You can find it in the modules directory: https://modules.processwire.com/modules/image-animated-gif/

and on Github: https://github.com/horst-n/ImageAnimatedGif

------

A preview can be found here

animated_gif.285x214.gif

Edited by horst
updated info for version 2.0.2
  • Like 22
Link to comment
Share on other sites

  • 3 weeks later...

So, if you feel a bit retro one day and want to upload some animated GIFs to a PW site, first download and install this module. ;)

Was just reminded of this module as I stumbled upon the Wild Beasts x Mattis Dovier GIF-novel. Also read an interview where the artist (at least I think it was him..) declared that GIF is making a come-back, or something.

Can't really disagree after seeing the GIF-novel :)

  • Like 2
Link to comment
Share on other sites

@teppo, I've got to agree that animated gifs may be making a comeback. We wanted an (intentionally cheesy) animated banner for a site of ours and decided not to use Flash due to lack of support on mobile, so we went with a gif. (When our designer finishes it...)

Now to see whether they can be made responsive...

  • Like 1
Link to comment
Share on other sites

Awesome, horst. I want this in PW core! Dealing with the issue of resizing animated gifs was each time a pain in the ass. Actually I have a project coming up with an image grid that contains several animated gifs. So I will definitely give it a try.

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

There is no special php code. The module, once it is installed, hooks into PWs core Pageimage / ImageSizer and automatically should detect and handle animated GIFs. It should work with the normal API calls, like $image->width(320).

So, your example variation looks a bit weird. :)

Can you give some more infos about PW Version, PHP Version, other image related installed modules, please?

Edited by horst
Link to comment
Share on other sites

Hi, I have figured out that the LIBs I have ported to a PW module somehow interprets your background color as a transparent color index, OR as not changed imageparts that could be removed from the next slide(s).

So, as it is definetly wrong, I'm not able to support the original LIBs. Maybe you can try to contact the original author? If not, I will put this on my ToDo.

For now I only can tell you a not very conveniant workaround. I have found out that, if the backgrounds of the slides have some noise, it works as expected. But it increases the final filesize significantly (400%)!

BTW: welcome to PW :)

Edited by horst
Link to comment
Share on other sites

I am using PW 2.5.3 with PHP Version 5.3.29 and I'm handling it just how you explained it:

$image->width(320)

I just tried the same with your example gif and it works fine. Obviously there is something wrong with my files.

These are images with pretty high resolution. Are there any limitations due to this?

Here are two example gifs in original dimensions.

http://wp11019870.server-he.de/cms/site/assets/files/1097/animation2.gif

http://wp11019870.server-he.de/cms/site/assets/files/1164/kjosk_heuteineinemtag_06-1.gif

Thanks!

Link to comment
Share on other sites

Have you read my second post, just above your last?

It doesn't depend on your images, it depends on the original LIBs that I have ported to PW. I will try to research a bit about that, but have not much time at the moment.

Link to comment
Share on other sites

I have found the original developer, but he isn't able to maintain / support his LIBs atm. I also have found one Lib here that has a new method that can help in this regard. But unfortunately I do not know how to stuff all resized frames together without black areas or other artefacts. However, the positioning thing I already could solve. :)

Link to comment
Share on other sites

UPDATE: Now the dev branch also supports centered crop!

Only thing missing is cropping with tools like Thumbnails etc (cropExtra) and other API crop calls then centered are currently not tested. :)

Edited by horst
removed link to none existent dev branch
  • Like 2
Link to comment
Share on other sites

Nice to hear that it works perfect for you,

but, ähm,

  • a) I haven't built it just for your current case,
  • b) we need to have support for cropping, definetly,
  • c) but I have pushed the intermediate work to that dev branch to support you with your current case!  ;):lol:
Link to comment
Share on other sites

There is currently a dev branch available where I started a complete rewrite of the Module.
 
This is needed because the 1.0.0 Version only handles animated GIFs with photos right, but fails with some sort of graphics:
 
animated-gif-crop3-wrong.gif  animated-gif-crop1-wrong.gif  animated-gif-crop2-wrong.gif

 
After a short and successful research (5 minutes in a support forum thread of László Zsidis GIFdecoder class) I found an enhanced class of GIFdecoder.
With it, I was able to position the frames correct, but has many trouble with background colors and transparency (example).

More can be read here at Github, where I asked xurei, the author of the GIFDecoder_optimized class for help. And with an upload of the corresponding GIFEncoder_optimized class, I was able to submit the manipulated frames with respect for transparency, what the old encoder couldn't handle. Sometimes you get lucky! So, a big big thanks to xurei from all future PW users that need support for animated GIFs with GD-lib. :D
 
The results of the current dev branch, version 1.0.2 looks much better now:

animated-gif-crop3.gif  animated-gif-crop1.gif  animated-gif-crop2.gif
 

Only thing currently missing is cropping with tools like Thumbnails etc (cropExtra). This is on the ToDo.

Edited by horst
removed link to none existent dev branch
  • Like 5
Link to comment
Share on other sites

The module is now fully functional again and its version number is set to 2.0.0, because it was a full rewrite.

 
Finally it supports all sorts of crops again:

 
animated-gif-zweinull-cropextra.gif  cropExtra what is needed by CroppingTools



animated-gif-zweinull-north.gif  north

                            -

animated-gif-zweinull-south.gif  south

animated-gif-zweinull-west.gif   animated-gif-zweinull-east.gif

           west           |         east

And by x/y params and centered of course too.

I updated the first post here in the thread, where yo can find the links to Github and the modules directory.

  • Like 5
Link to comment
Share on other sites

I wasn't sure if this was a default quality setting on the module, that was all!

Aha, but in your first post you was talking about "severe quality loss" of images, without showing an example.

What have you expected as (serious) answer?

(please keep in mind that I know that GIF does not have an option for quality setting. There is no chance for me to think of something in regard to quality-setting.)

------

GIF does not have any quality- setting / option by design of the image format.

PNG also does not have this. PNG has an option for compression, but this does not affect the visual quality.

JPEG is the only image format that has a setting for visual quality.

------

So, when ever talking about visual and also (by its nature) individually different interpreted aspects of images, it is best to  show an example. :)

Link to comment
Share on other sites

  • 9 months later...
  • 6 months later...

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