Link to Media
This article explains what the link to media field is and how to configure it.
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
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} />;
See the <PrismicNextLink>
documentation to learn more.
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",
})}
/>
This example uses clsx
to conditionally apply class names.
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.
}
Learn more about isFilled
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"
}
}