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.

Prismic provides components for Next.js, Nuxt, and SvelteKit to display links to media.

import { PrismicNextLink } from "@prismicio/next";

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

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 Content 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.

import { PrismicNextLink } from "@prismicio/next";

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

Use variants to style links

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

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

Check if a link to media field has a value

Use isFilled.linkToMedia() from @prismicio/client 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.
}

API response

Here is what a link to media field looks like from the Content 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"
  }
}