payload icon indicating copy to clipboard operation
payload copied to clipboard

How to preserve animation with gif crop

Open matteo-naif opened this issue 1 year ago • 1 comments

Link to reproduction

Describe the Bug

When I upload an animated gif in media collection the crops created lose the animation.

I have to add specific options in crop definition to handle it?

To Reproduce

  1. Define collection media
const Media: CollectionConfig = {
	slug: "media",
	fields: [
		{
			name: "title",
			type: "text",
			localized: true,
			required: true,
		}
	],
	upload: {
		staticDir: path.resolve(__dirname, "../../media"),
		imageSizes: [
			{
				name: "squareSmall",
				width: 480,
				height: 480,
				position: "centre",
				withoutEnlargement: false
			},
		],
		adminThumbnail: ({ doc }: { doc: any }) => {
			const url = doc.sizes.squareSmall.url || doc.url;
			return url;
		},
		mimeTypes: ["image/*", "application/pdf"],

	}
};
  1. Upload an animated gif from admin UI (https://upload.wikimedia.org/wikipedia/commons/a/a0/Cartoon_steamer_duck_walking_animation.gif)
  2. The crop lose the animation

Payload Version

2.12.1

Adapters and Plugins

	"@payloadcms/bundler-webpack": "1.0.6", 		"@payloadcms/db-mongodb": "1.4.4", 		"@payloadcms/plugin-cloud-storage": "1.1.2", 		"@payloadcms/plugin-form-builder": "1.2.1", 		"@payloadcms/plugin-nested-docs": "1.0.12", 		"@payloadcms/plugin-seo": "2.3.0", 		"@payloadcms/richtext-lexical": "0.8.0", 		"@payloadcms/richtext-slate": "1.5.0",

matteo-naif avatar Apr 30 '24 15:04 matteo-naif

Reported this here with some workarounds: https://github.com/payloadcms/payload/issues/2181#issuecomment-1997933850

cbratschi avatar Apr 30 '24 21:04 cbratschi

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.

github-actions[bot] avatar Sep 07 '24 03:09 github-actions[bot]