statiqdev / Statiq.Framework

A flexible and extensible static content generation framework for .NET.
https://statiq.dev/framework
MIT License
421 stars 74 forks source link

Feature Request: Stoppable Gifs #243

Open SilentSin opened 2 years ago

SilentSin commented 2 years ago

I managed to implement stoppable gifs in my site (still on Wyam) and realised I could likely achieve a better workflow if I integrate it into Wyam's build process (which would be pointless if I upgrade to Statiq soon anyway).

What I've Got

  1. Save the first frame of each gif as a png with the same name.
  2. Have a javascript file referenced in my _Footer.cshtml with a function to swap an <img> source between png and gif:
function pngif(item) {
  var src = item.getAttribute("src");
  var name = src.slice(0, -3);
  if (src[src.length - 1] == "g")
    name += "gif";
  else
    name += "png";
  item.setAttribute("src", name);
}
  1. Use that function for the onclick event in the <img>:
<img onclick="pngif(this);" src="Test.png" >

What I'd Like

Statiq's Modules sound like a good way to implement something like this, though I haven't looked into what they actually do in detail. Here's what I'm thinking:

onclick="pngif(this);" is a bit longer than I'd like, so it would be nice if I could use something like class="pngif" or even just <img pngif on its own (as long as that's still valid syntax if this module were missing) and have the module automatically:

If the answer to my question about the current state of Statiq relative to Wyam is that I should switch over now/soon, then I'd be happy to try my hand at implementing such a module and contribute it to your repo.

Also, the license page has a missing [:

image