Juncture lets you add zoomable, interactive images to your Markdown posts using a simple include. You do not need to write HTML, CSS, or JavaScript.

The Simplest Example

This creates an image that when clicked will open a dialog with an image at full resolution with zoom and pan features enabled.

1
2
3

{% include embed/image.html
    src="wc:Monument_Valley,_Utah,_USA.jpg"
%}

Click on the image to open the dialog.

Example with a Custom Caption

In this example a custom caption is defined

1
2
3
4

{% include embed/image.html
    src="wc:Monument_Valley,_Utah,_USA.jpg"
    caption="A Custom Caption"
%}
Note that when using Wikimedia Commons images, a generated attribution statement is applied to custom captions when needed.

IIIF Examples

In addition to displaying regular images, the image viewer can also display a IIIF image. The IIIF image is referenced using a manifest URL.

1
2
3

{% include embed/image.html
    manifest="https://iiif.harvardartmuseums.org/manifests/object/299843"
%}

By default, the first image in a manifest is displayed. If multiple images are defined in a manifest others can be referenced using the seq attribute. In this example the 2nd image in the manifest is displayed.

1
2
3
4

{% include embed/image.html
    manifest="https://iiif.harvardartmuseums.org/manifests/object/299843"
    seq="2"
%}

Action Link Example

When an image includes an id attribute it may be referenced in an action link. An action link is a standard Markdown link where the URL is formatted with information needed trigger an action on the referenced item when clicked. In tbe example below that zoomto action is triggered on the image with the image id.

1
2
3
4

{% include embed/image.html
    id="img1"
    src="wc:Monument_Valley,_Utah,_USA.jpg"
%}

Note the addition of the id attribute with the value img1.

1

[zoomto example](img1/zoomto/pct:45.45,39.44,13.25,18.56)

in this action link the first segment of the URL contains the id of the image to target in the action. The second segment (zoomto) is the action to perform. The third segment is action argument, in this case the image region to zoom into. Click the link below to trigger the action.

zoomto example

Note that in this example the label for the zoomed region is taken from the link text.

Action Link Example With Custom Label

1
2
3
4

{% include embed/image.html
    id="img2"
    src="wc:Monument_Valley,_Utah,_USA.jpg"
%}

Note the addition of the id attribute with the value img1.

1

[zoomto example](img2/zoomto/pct:45.45,39.44,13.25,18.56){: label="Custom Label"}

in this action link the first segment of the URL contains the id of the image to target in the action. The second segment (zoomto) is the action to perform. The third segment is action argument, in this case the image region to zoom into. Click the link below to trigger the action.

zoomto example

Note that in this example the label for the zoomed region is taken from the custom attributes appended to the link.

Required Attribute

You must provide either a src or manifest attribute to the image tag.

src

The for the image src attribute.

You can use:

A local image

1

src="/assets/posts/my-post/photo.jpg"

A full web URL

1

src="https://example.org/image.jpg"

A Wikimedia shortcut

1

src="wc:File_Name.jpg"

manifest

The for the image manifest attribute a full URL to an IIIF manifest must b provided.

For example,

1
2
3

{% include embed/image.html
    manifest="https://iiif.harvardartmuseums.org/manifests/object/299843"
%}

Optional Attributes

These improve presentation but are not required.

caption

Text displayed below the image.

1

caption="Monument Valley, UT"

Keep captions short and descriptive.

cover="true"

Makes the image fill its space more dramatically, similar to a cover photo.

1

cover="true"

This works well for wide landscape images.

aspect

Controls the image shape.

1

aspect="1200/630"

You usually don’t need to change this unless you want a taller or more square presentation.

region

Starts the viewer zoomed into a specific area.

1

region="pct:10,20,30,40"

Most users won’t type this manually. You can use the viewer’s selection tool to generate region values.

rotate

Rotates the image.

1

rotate="90"

Linking to a Specific Part of an Image

To create interactive zoom links, your image must have an id.

Example image:

1

<!-- src_final: https://res.cloudinary.com/dmceci9t1/image/fetch/w_1200,c_limit/https://www.spartina.io/assets/posts/monument-valley/Monument_Valley.jpg -->

Then in your text:

1
2

Notice the dramatic formations like 
[West Mitten Butte](image/zoomto/pct:10,20,30,40).

When a reader clicks that link:

  • The image zooms to that region
  • The selected area is highlighted

This allows you to guide the reader’s attention while telling a visual story.

Complete Example

1

<!-- src_final: https://res.cloudinary.com/dmceci9t1/image/fetch/w_1200,c_limit/https://www.spartina.io/assets/posts/monument-valley/Monument_Valley.jpg -->

If you are not using zoom links, you can remove the id entirely.

Tips for Visual Essays

  • Use zoomable images when detail matters.
  • Place images near the text that discusses them.
  • Add an id only when you plan to use interactive links.
  • Use zoom links sparingly to guide attention.
  • Keep captions concise.

When to Use This Viewer

Use the Juncture image viewer when:

  • The image contains fine detail
  • You want readers to explore
  • You want to direct attention to specific areas
  • You’re creating an interactive visual essay

For simple decorative images, a standard Markdown image may be sufficient.