gennyflow

gennyFlow [v6.1.0]

======= gennyFlow is a client-side javascript tool that downloads HTML elements as images.

Practically speaking, when used with Webflow, you can create powerful automated image generation tools using your Webflow data, and no code, just attributes!

While this was made to be used with Webflow and its CMS, it is compatible with any js-enabled web environment.

You can see a live example at gennyFlow.byBrian.io.

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("[gf=trigger]")?.addEventListener("click", () => {
    const options = { /* your options here */ };
    gennyFlow(options);
  });
});

Below this is

Required elements

gennyFlow elements are controlled using custom attributes, which you'll be familiar with if you've used Finsweet Attributes.

• Wrapper element
  • gf="wrapper"
  • Contains all elements that need to be captured and downloaded
• Capture element(s)
  • gf="capture"
  • An element to be captured and downloaded
  • Must be nested inside of the wrapper element.
• Slug element
  • gf="slug" (ok this isn't really required)
  • Must be nested inside capture element
  • Sets file name for (1) capture element
  • Does not need to have CSS visibility (can be set to display:none)
  • Should not include file extension ("my-image" not "my-image.jpg")
  • Will default to image-1, image-2, etc.
• Trigger element
  • gf="trigger"
  • When this element is clicked, it runs gennyFlow, downloading all capture elements.

Options

There are many ways to set these options, and you can use them in any combination, as long as you understand the order of precedence.

Order of precedence

1. Capture element Example: An element has both "gf=capture" and "gf-scale=2" The item would export with a scale of 2 no matter what higher-level settings were set.

   Note: only on capture elements, you can specify multiple scales separated by commas. Example: This would export this element 3 times: @1x @2x @3x

   <div gf="capture" gf-scale="1,2,3">

2. User input Example: An html input with attribute "gf=scale-input"

   <input gf="scale-input" value="2">

3. Wrapper Example: The wrapper element with gf="wrapper" also has "gf-scale=2" This scale is applied to all captures inside of the wrapper unless overruled by 1 or 2.

4. Defaults

	Attribute (and defaults)	Accepted values	User inputs
File Format	gf-format="png"	'jpg' 'png' 'webp'	gf="format-input"
Quality (jpg/webp)	gf-quality="1"	0.0 to 1.0	gf="quality-input"
Scale	gf-scale="1"	any number	gf="scale-input"
Zip Folder Name	gf-zip-name="images"	'any string'	gf="zip-name-input"
Include Date, Zip Name	gf-include-date-zip="false"	true false
Include Scale, Zip Name	gf-include-scale-zip="false"	true false
Include Date, Img Name	gf-include-date-img="false"	true false
Include Scale, Img Name	gf-include-scale-img="false"	true false
Disable SVG Fix	gf-disable-svg-fix="true"	true false
Don't capture element	gf="ignore"	"ignore"

Example, Webflow setup

Cloneable here

Example, HTML

gennyFlow also works outside of Webflow! Here is how it would look on a simple page.

<button type="button" gf="trigger">Download images</button>

<div gf="wrapper">

    <div gf="capture">
        <div gf="slug">Example image 1</div>
    </div>
    <div gf="capture">
        <div gf="slug">Example image 2</div>
    </div>

</div>

<script src="gennyflow.js"></script>
<script>
// gennyFlow by Brian Tucker
// {@link https://www.gennyflow.com}
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("[gf=trigger]")?.addEventListener("click", () => {
    const options = { /* your options here */ };
    gennyFlow(options);
  });
});
</script>

Built using

• html-to-img
• jszip
• downloadjs

CORS Proxy

If your capture elements have externally hosted images or css inside them, you will likely hit a CORS error.

To bypass this, I recommend using a CORS proxy. You can find my fork of a Cloudflare Worker CORS proxy here.