Jump to content
horst

Image Animated GIF

Recommended Posts

On 19.8.2016 at 0:08 PM, diogo said:

@horst you saved my day with this module :)

same same...

Share this post


Link to post
Share on other sites

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!

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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!
 

Share this post


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

Share this post


Link to post
Share on other sites

@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

Share this post


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

Share this post


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

Share this post


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

 

Share this post


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

Share this post


Link to post
Share on other sites

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 🤪

Share this post


Link to post
Share on other sites
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?

Share this post


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

Share this post


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

Share this post


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

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
      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 ----
       
    • By horst
      Croppable Image 3
      for PW 3.0.20+
      Module Version 1.2.0
      Sponsored by http://dreikon.de/, many thanks Timo & Niko!
      You can get it in the modules directory!
      Please refer to the readme on github for instructions.
       
      - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - 
      There is a new Version in the pipe, that supports WebP too: 
       
      - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - 
       
       
      -------------------------------------------------------------------------
       
      Updating from prior versions:
       
      Updating from Croppable Image 3 with versions prior to 1.1.7, please do this as a one time step:
      In the PW Admin, go to side -> modules -> new, use "install via ClassName" and use CroppableImage3 for the Module Class Name. This will update your existing CroppableImage3 module sub directory, even if it is called a new install. After that, the module will be recogniced by the PW updater module, what makes it a lot easier on further updates.
      -------------------------------------------------------------------------
       
      For updating from the legacy Thumbnail / CropImage to CroppableImage3 read on here.
       
      -------------------------------------------------------------------------
       
×
×
  • Create New...