Image

The image widget allows you to easily add an image (and its alt text) to your markdown without dropping to HTML.

Options

The following options are supported by this widget.

file

Specify the relative path of the image file.

ex: "/assets/images/foo.png"

id

(OPTIONAL) Specify the DOM element ID.

ex: "MyImageFoo"

alt

(OPTIONAL) Specify the alt text for the image, used by screen readers.

ex: "An image of the infamous 'Foo'."

collapsible

(OPTIONAL) Specify whether this image should be toggled between hidden and shown.

one of: true | false

config

(OPTIONAL) A copy of the config hash. See the snippet that follows. This option reduces the number of times the site configuration values are queried, speding up the process of building the site.

    {% include read-config.liquid %}
    {% include image.widget config=config file="fooBar.png" %}}

{% include 'image.widget' config=site.config file:'fooBar.png' %}

Usage

There are several ways to incorporate this widget into your pages.

Inline

If you have more than one countdown target datetime, you can specify each directly on the widget.

{% include image.widget file="fooBar.png" %}

{% include 'image.widget' file:'fooBar.png' %}

Page Metadata

If you want to have multiple countdown widgets on the same page, you can set the target datetime in the page's metadata.

---
launchDate: 2024-01-09T05:00:00.000Z
---
{% include countdown.widget %}

---
launchDate: 2024-01-09T05:00:00.000Z
---
{% include 'countdown.widget' %}

Site Config

If the countdown widget is used across the site in multiple places, you can store the target datetime in the site config.

In the 'config.yml' file:

launchDate: "2024-01-09T05:00:00.000Z"

In the 'my-page.md' file:

{% include countdown.widget %}

In the 'config.yml' file:

launchDate: "2024-01-09T05:00:00.000Z"

In the 'my-page.md' file:

{% include 'countdown.widget' %}

Last modified: 25 May 2024