Link to Media

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.

Add a link to media field to a content model

• Open Slice Machine

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

  npx start-slicemachine --open

• Add a link to media field

  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.

Display links to media

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

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

Tips

• Use display text as labels

  The link to media’s text label can be managed in Prismic when display text is enabled. Prismic’s link components automatically display the text.

• Use variants to style links

  Link variants can determine how links are styled. This example adds a CSS class based on the selected variant.

  Next.jsNuxtSvelteKit

  <PrismicNextLink
    field={slice.primary.related_media}
    className={clsx("button", {
      primary: slice.primary.related_media.variant === "Primary",
      secondary: slice.primary.related_media.variant === "Secondary",
    })}
  />

  This example uses clsx to conditionally apply class names.

• Use isFilled.linkToMedia() to check if a link to media field has a value

  import { isFilled } from "@prismicio/client";
  
  if (isFilled.linkToMedia(slice.primary.related_media)) {
    // Do something if `related_media` has a value.
  }

  Learn more about isFilled

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"
  }
}