Jump to content
horst

Image Animated GIF

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 21

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Jep. I got it. Thanks for helping me at this point. :)

I'll try to contact the original author but I appreciate it a lot if you'll try to do further research. 

Thanks.

Share this post


Link to post
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. :)

Share this post


Link to post
Share on other sites

I have pushed a dev version to github.
 
It does not support any form of cropping! but it does support size(), width(), height() and Pias contain() & cover(). :)

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hey. Super cool. Thank you very much. It works perfekt for me. I do not need cropping right now, so I am totally fine with it.

This support here makes PW even better. Great Work!

Share this post


Link to post
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:

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I am using this module but my GIF is coming up with severe quality loss... any ideas?

Share this post


Link to post
Share on other sites

I am using this module but my GIF is coming up with severe quality loss... any ideas?

Unfortunately no. Because I do not have a glass ball  :)

Share this post


Link to post
Share on other sites

Unfortunately no. Because I do not have a glass ball  :)

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

Share this post


Link to post
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. :)

Share this post


Link to post
Share on other sites

Tested: ImageAnimatedGif works well with PW 3.0+.

  • Like 6

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MoritzLost
      TrelloWire
      This is a module that allows you to automatically create Trello cards for ProcessWire pages and update them when the pages are updated. This allows you to setup connected workflows. Card properties and change handling behaviour can be customized through the extensive module configuration. Every action the module performs is hookable, so you can modify when and how cards are created as much as you need to. The module also contains an API-component that makes it easy to make requests to the Trello API and build your own connected ProcessWire-Trello workflows.
      Features
      All the things the module can do for you without any custom code: Create a new card on Trello whenever a page is added or published (you can select applicable templates). Configure the target board, target list, name and description for new cards. Add default labels and checklists to the card. Update the card whenever the page is updated (optional). When the status of the card changes (published / unpublished, hidden / unhidden, trashed / restored or deleted), move the card to a different list or archive or delete it (configurable). You can extend this through hooks in many ways: Modifiy when and how cards are created. Modify the card properties (Target board & list, title, description, et c.) before they are sent to Trello. Create your own workflows by utilizing an API helper class with many convenient utility methods to access the Trello API directly. Feedback & Future Plans
      Let me know what you think! In particular:
      If you find any bugs report them here or on Github, I'll try to fix them. This module was born out of a use-case for a client project where we manage new form submissions through Trello. I'm not sure how many use-cases there are for this module. If you do use it, tell me about it! The Trello API is pretty extensive, I'll try to add some more helper methods to the TrelloWireApi class (let me know if you need anything in particular). I'll think about how the module can support different workflows that include Twig – talk to me if you have a use-case! Next steps could be a dashboard to manage pages that are connected to a Trello card, or a new section in the settings tab to manage the Trello connection. But it depends on whether there is any interest in this 🙂 Links
      Repository on Github Complete module documentation (getting started, configuration & API documentation) [Module directory pending approval] Module configuration

    • By MoritzLost
      Process Cache Control
      This module provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Clear the ProCache page render cache (if your site is using ProCache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Plans for improvements
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory CHANGELOG in the repository Screenshots


    • By Macrura
      PrevNextTabs Module
      Github: https://github.com/outflux3/PrevNextTabs
      Processwire helper modules for adding page navigation within the editor.
      Overview
      This is a very simple module that adds Previous and Next links inline with the tabs on the page editor. Hovering over the tab shows the title of the previous or next page (using the admin's built in jqueryUI tooltips.)
      Usage
      This module is typically used during development where you or your editors need to traverse through pages for the purpose of proofing, flagging and/or commenting. Rather than returning to the page tree or lister, they can navigate with these links.
      Warnings
      If you are using PW version 2.6.1 or later, the system will prevent you from leaving the page if you have unsaved edits.
      For earlier versions, to avoid accidentally losing changes made to a page that might occur if a user accidentally clicks on one of these, make sure to have the Form Save Reminder module installed.
      http://modules.processwire.com/modules/prev-next-tabs/
    • By Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
×
×
  • Create New...