Fields

Link to Media

This article explains what the link to media field is and how to configure it.

A screenshot of a link to media field in the Page Builder.

A link to media field in the Page Builder.

The link to media field allows content writers to select media from a repository’s media library. All media formats are supported, including images, videos, MP3s, GIFs, PDFs, and more.

Learn more about image management

  • Open Slice Machine

    In your Prismic project, start Slice Machine to begin editing content models.

    npx start-slicemachine --open
  • In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a link to media field.

    The label determines the label shown to content writers in the Page Builder. Use an easily understood name.

    The API ID determines the property name in the Document API. Use a short, snake-cased name.

  • (Optional) Allow display text

    Links may need a text label, such as “Download file” or “View full size.” Content writers can provide a label when display text is allowed.

    Open the field settings and check the Allow display text setting.

  • (Optional) Allow variants

    Links may need a specific visual style, like “Primary” or “Secondary” styling. Content writers can select from a list of styles you set when variants are enabled.

    Open the field settings and enable variants under the Variants settings. Add as many variant options as needed.

Prismic provides link components for Next.js, Nuxt, and SvelteKit.

<PrismicNextLink field={slice.primary.my_link_to_media_field} />

See the <PrismicNextLink> documentation to learn more.

Tips

API response

Here is what a link to media field looks like from the Document API:

{
  "example_link_to_media": {
    "link_type": "Media",
    "id": "ZfA3AYUHT9oC73Ba",
    "name": "mona-lisa",
    "kind": "image",
    "url": "https://images.prismic.io/example-prismic-repo/mona-lisa?auto=compress,format",
    "size": "50",
    "height": "500",
    "width": "800"
  }
}

When display text or variants are allowed, their values are set on the text and variant properties.

{
  "example_link_to_media": {
    "link_type": "Media",
    "id": "ZfA3AYUHT9oC73Ba",
    "name": "mona-lisa",
    "kind": "image",
    "url": "https://images.prismic.io/example-prismic-repo/mona-lisa?auto=compress,format",
    "size": "50",
    "height": "500",
    "width": "800",
    "text": "Click here to see image",
    "variant": "Primary"
  }
}
Was this page helpful?