-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
117 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# `alt` must be an empty string | ||
|
||
`<PrismicImage>` allows the `alt` HTML attribute to be configured using two props: `alt` and `fallbackAlt`. | ||
|
||
Both `alt` and `fallbackAlt` can only be used to [declare an image as decorative][mdn-alt-decorative-image] by pasing an empty string. You may not pass arbitrary alternative text to the `alt` prop. | ||
|
||
```html | ||
<!-- Will render `alt` using the Image field's `alt` property. --> | ||
<PrismicImage :field="doc.data.imageField" /> | ||
|
||
<!-- Will always render `alt=""`. --> | ||
<PrismicImage :field="doc.data.imageField" alt="" /> | ||
|
||
<!-- Will render `alt=""` only if the Image field's alt property is empty. --> | ||
<PrismicImage :field="doc.data.imageField" fallbackAlt="" /> | ||
``` | ||
|
||
All images should have an alt value. `<PrismicImage>` will automatically use the Image field's `alt` property written in the Prismic Editor. If the Image field's `alt` property is empty, the `alt` HTML attribute will not be included _unless_ one of `alt` or `fallbackAlt` is used. | ||
|
||
For more details on decorative images, [see the MDN article on the `<img>` HTML element's `alt` attribute][mdn-alt-decorative-image]. | ||
|
||
## Deciding between `alt=""` and `fallbackAlt=""` | ||
|
||
`alt=""` will always mark the image as decorative, ignoring the provied Image field's `alt` property. Use this when the image is always used for decorative or presentational purposes. | ||
|
||
`fallbackAlt=""` will only mark the image as decorative if the provided Image field's `alt` property is empty. Use this when you want to mark the image as decorative _unless_ alternative text is provided in the Prismic Editor. **Generally speaking, this is discouraged**; prefer marking the image as decorative intentionally. | ||
|
||
[mdn-alt-decorative-image]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
# Missing Link properties | ||
|
||
`<PrismicLink>` requires specific properties in the provided field or document to render properly. This requirement extends to [Link][link-fields], [Link to Media][link-fields], and [Content Relationship][link-fields] fields. | ||
|
||
If the required properties are missing, `<PrismicLink>` will not render the link. | ||
|
||
**Note**: When using Prismic's [Rest API][rest-api] (the default when using `@prismicio/client`), the required fields are automatically included. When using Prismic's [GraphQL API][graphql-api], you must include these fields in your query. | ||
|
||
## Required Properties | ||
|
||
### With the `field` prop | ||
|
||
The following properties are requried when using the `field` prop with a Link, Link to Media, or Content Relationship field: | ||
|
||
- `link_type` (or `_linkType` when using Prismic's [GraphQL API][graphql-api]) | ||
- `id` | ||
- `url` | ||
- `uid` (only if your website uses a [Link Resolver][link-resolver] that uses a document's UID field) | ||
|
||
The following properties are not required, but are recommended: | ||
|
||
- `target` | ||
|
||
**Example**: | ||
|
||
```html | ||
<PrismicLink :field="doc.data.linkField">Click me</PrismicLink> | ||
``` | ||
|
||
### With the `document` prop | ||
|
||
The following properties are requried when using the `document` prop with a Prismic document: | ||
|
||
- `id` | ||
- `url` | ||
- `uid` (only if your website uses a [Link Resolver][link-resolver] that uses a document's UID field) | ||
|
||
**Example**: | ||
|
||
```html | ||
<PrismicLink :document="doc">Click me</PrismicLink> | ||
``` | ||
|
||
## GraphQL Example | ||
|
||
When using Prismic's [GraphQL API][graphql-api], Link fields must be queried with at least the following properties: | ||
|
||
```diff | ||
{ | ||
page(uid: "home", lang: "en-us") { | ||
linkField { | ||
+ _linkType | ||
+ id | ||
+ url | ||
+ uid # only required if your website uses a Link Resolver that uses a document's UID field. | ||
+ target # not required, but recommended for automatic `target` handling | ||
} | ||
} | ||
} | ||
``` | ||
|
||
[link-fields]: https://prismic.io/docs/content-relationship | ||
[link-resolver]: https://prismic.io/docs/route-resolver#link-resolver | ||
[rest-api]: https://prismic.io/docs/rest-api-technical-reference | ||
[graphql-api]: https://prismic.io/docs/graphql-technical-reference |
24 changes: 24 additions & 0 deletions
24
messages/prismictext-works-only-with-rich-text-and-title-fields.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# `<PrismicText>` works only with Rich Text and Title fields | ||
|
||
`<PrismicText>` works only with [Rich Text and Title fields][rich-text-title-field]. It renders the field's value as plain text (i.e. with no formatting, paragraphs, or headings). | ||
|
||
```html | ||
<!-- Will render a plain text version of the Rich Text field's value. --> | ||
<PrismicText :field="doc.data.richTextField" /> | ||
``` | ||
|
||
Other text-based field types, such as [Key Text][key-text-field] and [Select][select-field], cannot be rendered using `<PrismicText>`. | ||
|
||
Since Key Text and Select field values are already plain text, you can render them inline without a special component. | ||
|
||
```html | ||
<!-- Will render the Key Text field's value. --> | ||
<span>{doc.data.keyTextField}</span> | ||
|
||
<!-- Will render the Select field's value. --> | ||
<span>{doc.data.selectField}</span> | ||
``` | ||
|
||
[rich-text-title-field]: https://prismic.io/docs/rich-text | ||
[key-text-field]: https://prismic.io/docs/field#key-text | ||
[select-field]: https://prismic.io/docs/field#select |