Jekyll-Markdown: Embedding Animated Gifs


About capturing an animation as an Animated Gif and using in Markdown web context.

About

In my previous post, I noted that you can’t show Blazor Spinners (with animation) there as these pages are generated using Jekyll which uses Markdown; not ASP.NET Core. So the animations there are an Animated Gif captured from a running Blazor app. Lets see how I did that.

The Animated Gif

Spinners

Capturing an Animated Gif

I created a Blazor WASM app to demonstrated the 12 Spinner Blazor Components provided by Ed Charbeneau BlazorPro.SpinKit on GitHub as shown above. I wanted to blog about it because these Spinners are great! So I elected to create an Animated Gif through screen capture (rather than a short video capture). I did a search for suitable apps to do that and came up with a list of some at How To Capture Animated GIF Screenshots In Windows. Some will capture teh image to the cloud and provide a link to that. I elected to us the second one, ScreenToGIF as I was able to capture to an Animated Gif on my desktop. (Nb: No link to this on the list page) Also, I was able to elect to download it from the Microsoft Store.

ScreenToGif App
The ScreenToGifapp in Edit Mode

When you run the app, in runs as a transparent window which you position and resize over the part of the desktop you want to capture. You record then stop that which brings you into Edit mode as above. You can remove leading and training images (and others) as required before generating the Animated Gif.

Using an Animated Gif in Markdown.

You could use Markdown syntax to show the Gif such as:

[An amimated Gif](/media/SpinnersExamples.gif)

… but I needed to resize it, as it come up a bit too large. (I perhaps could have down that in ScreenToGif app.) Thankfully you can embedded normal HTML in Markdown (although editors complain). So above I used:

<image src="/media/SpinnersExamples.gif" alt="Spinners" width="450" />

.. to embed the Animated Gif as above on this page.

 TopicSubtopic
  Next: > Blazor
<  Prev:   Blazor How To
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: >  
<  Prev:   This blog site construction