Images

The :image directive is an alternate image syntax with extra options over the plain ![]() Markdown form. It is a text directive. All images must live in the workshop's /static (or /assets) folder - external images are blocked by security restrictions.

Properties: src (string, image path), title (string, HTML title), width (number, px; capped at 100% of the container), height (number, px), disableZoom (boolean, default false).

Rendered:

Source:

1
:image[A placeholder illustration]{src="/static/images/placeholder.svg"}

Rendered:

Source:

1
2
3
:image[Placeholder at 100px]{src="/static/images/placeholder.svg" title="100px wide" width=100}
:image[Placeholder at 200px]{src="/static/images/placeholder.svg" title="200px wide" width=200}
:image[Placeholder at 300px]{src="/static/images/placeholder.svg" title="300px wide" width=300}

Rendered:

Source:

1
:image[A placeholder illustration]{src="/static/images/placeholder.svg" width=400 height=226}

By default images can be clicked to zoom. Set disableZoom=true to turn that off.

Rendered:

Source:

1
:image[A placeholder illustration]{src="/static/images/placeholder.svg" disableZoom=true}

Wrapping an image in a Markdown link (or the :link directive) automatically disables zoom.

Rendered:

Source:

1
[:image[Placeholder that links out]{src="/static/images/placeholder.svg" width=200}](https://catalog.workshops.aws/)

Both :image and the plain ![]() Markdown form accept plain relative paths to assets under /static or /assets. Workshop Studio expands them into full, signed URLs for the current environment.

Source:

1
2
:image[Alt text]{src="/static/image.png"}
![Alt text](/assets/image.png)

For contexts that do not expand relative paths (such as code block content), use the :assetUrl directive.