Dynamic Feature Demonstration

Date2021.11.18

Dynamic features in Wofol!

Sometimes, you want something a little fancier. These components all continue to use the same simple and intuitive shortcodes markdown-wise, but behind the scenes use JavaScript "plugins" to work!

Music Player

Plays music!

  • Requirements: js/plugins/musicPlayer.js and css/plugins/musicPlayer.css loaded
  • Features:
    • Works in any page
    • Inline progress bar and full-size progress bar in popup
    • Supports volume adjustments, rewinding, and toggling repeat
    • Built-in visualizer! (Customizable colors and background -- see below)
    • Also works as a static component -- if you call it without the CSS/JS files, it'll render as a native inline audio player

Sample Tracks

A Tall Ship and In A World by Jason Shaw

(Intentionally low quality. Find the full, high-quality tracks on Audionautix! (Creative Commons))


Sunset Breeze by Lockyn

This track's recommended if you're trying out the visualizer!

(Also intentionally low quality (96kpbs), please support the artist directly (Youtube/Bandcamp) if you like it!)

Want to try your own track?


Example Markdown

{{ musicPlayer( src="/music/ATallShip.mp3", name="A Tall Ship" ) }} 
{{ musicPlayer( src="/music/InAWorld.mp3", name="In A World",bk="/bk/world.jpg", hue=240) }} 
{{ musicPlayer( src="/music/SunsetBreeze.mp3", name="Sunset Breeze", bk="/bk/sunset.jpg", hue=30) }} 

Generate quick, simple, and interactable galleries of images.

Samples

Aspect ratio is preserved in the first two images, 1:1 aspect ratio is used for the second two.

A custom width/height can also be specified.

Example Markdown

Note that if you specify width/height, the image will always be constrained by the lower of the two values.

{{ lightbox(path="example-1.jpg") }} <!-- No caption, keeping aspect ratio -->
{{ lightbox(path="example-1.jpg", caption="Hello World!", square=1) }} <!-- Caption + cropping to 1:1 -->
{{ lightbox(path="example-3.jpg", fullwidth=1, height=480) }} <!-- Use "fullwidth=1" to specify 100% width -->

Folders

Separate images/multimedia/anything else by categories ("folders").

  • Requirements: js/plugins/folders.js and css/plugins/folders.css
  • Features:
    • Works with any element, just add a class name to it! (i.e., <div class='(className)'> ... </div>)
    • Built in support with lightbox (no extra HTML needed, just add class="classname")
    • Supports icons via the icon:(iconName) abbreviation
  • Use Cases:
    • Separate desktop and mobile screenshots
    • Separate final product images and mockups/drafts
    • Categorize different types of images (see example below)

Sample

Five images have been put into three "folders", which you can interact with below.

dog, icon:pets Dogs cat, icon:local_cafe Cats fish, icon:water_drop Fish

Example Markdown

Each "folder" is separated by a line, and each line is formatted as (class name), (visible name)

{% folder() %}
dog, icon:pets Dogs
cat, icon:local_cafe Cats
fish, icon:water_drop Fish
{% end %}

{{ lightbox(path="dog-1.jpg", class="dog") }}
{{ lightbox(path="dog-2.jpg", class="dog") }}
...

Table of Contents

Always a useful tool for long pages.

  • Requirements: No additional plugins needed, but does require JavaScript to function.
  • Features:
    • Generated completely automatically, requires no additional code from you!
      (based on the headers in your markdown file, top two levels only by default)
    • Sticky popup that stays out of your way when not being used
    • Scroll offset is automaticallly calculated to account for sticky header

Sample

Look at the top right corner of your screen to see Table of Contents in action!