Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Stoppable Gifs #243

Open
SilentSin opened this issue Jul 9, 2022 · 0 comments
Open

Feature Request: Stoppable Gifs #243

SilentSin opened this issue Jul 9, 2022 · 0 comments

Comments

@SilentSin
Copy link

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:

  • Reference the javascript file in the header.
    • No need to reference the file on a page that doesn't use it. That seems like an optimization to me, but I'm not a web dev. Maybe it'd be more efficient to just include that function in a larger file that's already being loaded?
  • Assign the onclick function.
  • Generate the actual png and save it next to the gif. This is fairly quick, but it can be skipped if there's already a png file at the destination with a date modified later than the gif.
    • This might actually mean the png doesn't need to be in the input folder cluttering up my workspace, it can just go straight into the output folder. Or maybe in a separate pngif folder so it doesn't clutter up the input but also doesn't need to be regenerated if the gif hasn't changed.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant