Feature Request of .gif / .gifv support for animated snippets native on the page.

[MayankTahil]

For Feature Requests

Desired Feature: Support for embedded animations in .gif and/or .gifv in pages. Right now when gifs are embedded, only a single frame shows visually, and upon clicking the file embedded into the page, a new tab opens that then animates in the browser. I'd like to request gif animation support native on the same page in line with content.

For Bug Reports

PHP Version: N/A

MySQL Version: N/A

Expected Behavior: N/A

Actual Behavior: N/A

[dssoft32]

Any update on the feature request ?

[alariva]

I falled back to a Giphy embed that works neat, however this is far from ideal, and editing pages become a bit "noisy" with the browser statusbar loading the embeds on the preview panel.

[Abijeet]

@ssddanbrown - I looked into this a little bit and it seems that Intervention/Image does not support gifs yet which is causing this issue. Read more about it here - Intervention/image#176

Is it OK if we check if an image file is a GIF and if so, return the path without any sort of scaling?

I'll have to change the code here -

BookStack/app/Services/ImageService.php

Lines 185 to 224 in c44c421

	public function getThumbnail(Image $image, $width = 220, $height = 220, $keepRatio = false)
	{
	$thumbDirName = '/' . ($keepRatio ? 'scaled-' : 'thumbs-') . $width . '-' . $height . '/';
	$imagePath = $this->getPath($image);
	$thumbFilePath = dirname($imagePath) . $thumbDirName . basename($imagePath);
	if ($this->cache->has('images-' . $image->id . '-' . $thumbFilePath) && $this->cache->get('images-' . $thumbFilePath)) {
	return $this->getPublicUrl($thumbFilePath);
	}
	$storage = $this->getStorage();
	if ($storage->exists($thumbFilePath)) {
	return $this->getPublicUrl($thumbFilePath);
	}
	try {
	$thumb = $this->imageTool->make($storage->get($imagePath));
	} catch (Exception $e) {
	if ($e instanceof \ErrorException || $e instanceof NotSupportedException) {
	throw new ImageUploadException(trans('errors.cannot_create_thumbs'));
	}
	throw $e;
	}
	if ($keepRatio) {
	$thumb->resize($width, null, function ($constraint) {
	$constraint->aspectRatio();
	$constraint->upsize();
	});
	} else {
	$thumb->fit($width, $height);
	}
	$thumbData = (string)$thumb->encode();
	$storage->put($thumbFilePath, $thumbData);
	$storage->setVisibility($thumbFilePath, 'public');
	$this->cache->put('images-' . $image->id . '-' . $thumbFilePath, $thumbFilePath, 60 * 72);
	return $this->getPublicUrl($thumbFilePath);
	}

I'm not sure about the thumbnail though, maybe we leave it as is for now? So basically thumbnails still don't animate.

[ssddanbrown]

@Abijeet Yeah, That sounds like the best approach 👍