Art (art)
Defines the map of options for Platen’s art markup. The existing value is a map that includes whether or not to enable the image render hook and its style definition.
You can add new keys or replace the values for existing ones. You don’t need to keep the full list of all properties in your own configuration file. Only specify the values you want to add or replace.
JSON Schema
Definition
{
"$id": "https://platen.io/modules/platen/config/site/markup/art/schema.json",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"description": "Defines the options for Platen's art markup\n\nhttps://platen.io/modules/platen/config/site/markup/art/",
"properties": {
"aliases": {
"description": "Defines additional prefixes for the image render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/art/#aliases",
"oneOf": [
{
"items": {
"type": "string"
},
"type": "array"
},
{
"type": "string"
}
],
"title": "Aliases"
},
"enabled": {
"default": true,
"description": "Choose whether art image link rendering is available for the site.\n\nhttps://platen.io/modules/platen/config/site/markup/art/#enabled",
"title": "Enable the markup",
"type": "boolean"
},
"partials": {
"description": "Define a map of partials for Platen to inject as needed.\n\nhttps://platen.io/modules/platen/config/site/markup/art/#partials",
"properties": {
"renderers": {
"description": "Registers one or more partials that act as render hooks.\n\nhttps://platen.io/modules/platen/config/site/markup/art/#renderers",
"properties": {
"image": {
"default": "platen/markup/art/image",
"description": "Adds a partial to call when processing the image render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/art/#image",
"title": "Image Render Hook Partial",
"type": "string"
}
},
"title": "Renderer Partials",
"type": "object"
}
},
"title": "Markup Partials",
"type": "object"
},
"style": {
"default": "art",
"description": "Defines the art markup's simple style module\n\nhttps://platen.io/modules/platen/config/site/markup/art/#style",
"title": "Markup Simple Style Module",
"type": "string"
}
},
"title": "Art",
"type": "object"
}Enable the markup (enabled)
Choose whether the site renders image links with the art: prefix in their alt text as art
or normal images. If this setting is set to true, any images added with the prefix are
rendered in figures with an optional caption and content warning. If this setting is
false, the images are rendered as normal.
Aliases (aliases)
Define one or more prefixes to use in addition to the default prefix (art) for art image
links.
You can specify a string or an array of strings. If the value is an array, each item in the
array is added as an alias. Do not add a : suffix.
Markup Simple Style Module (style)
Defines default styling for figures created by the art render hook for images.
When you add [an image with the art: prefix, the following SCSS is applied:
figure.platen-art {
width: 100%
img {
object-fit: contain;
width: 100%;
}
figcaption {
margin-top: 1rem;
text-align: center;
font-size: smaller;
}
&.half {
width: 50%;
}
&.third {
width: 33%
}
&.quarter {
width: 25%
}
&.platen-content-warning {
img {
z-index: 10;
filter: blur(30px);
}
figcaption {
visibility: hidden;
}
input.platen-content-warning {
visibility: hidden;
}
input.platen-content-warning + label {
position: absolute;
z-index: 1;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 1px ;
text-align: center;
&::before {
content: "Content Warning:";
display: block;
font-weight: bolder;
font-size: larger;
margin-bottom: 1em;
margin-top: 1em;
}
}
input[type="checkbox"]:checked + label {
opacity: 0;
}
input[type="checkbox"]:checked + label + img {
filter: blur(0);
}
input[type="checkbox"]:checked + label + img + figcaption {
visibility: visible;
}
}
}The markup creates a <figure> element with an <img> element containing the artwork.
If the markup specifies a caption, it’s added in a figcaption element beneath the
image. By default, the <figure> element has the platen-art class.
Defaults #
width: 100%
img {
object-fit: contain;
width: 100%;
}
figcaption {
margin-top: 1rem;
text-align: center;
font-size: smaller;
}By default, the figure’s width is set to take up the entirety of its available space.
Similarly, the image is always set to take up the full width of the figure itself and uses
the object-fit property to keep the object’s aspect ratio while fitting into the
available space.
If the figure includes a caption, the caption is added with a top margin of
$padding-large with the text centered beneath the image and the font size decreased
on step.
Sizing Classes #
&.half {
width: 50%;
}
&.third {
width: 33%
}
&.quarter {
width: 25%
}When an author adds the half, third, or quarter class to the figure with the markup’s
class attribute, the figure’s width is set to the appropriate percent. Used in combination
with the float-left or float-right [sref:basic utility classes], authors can include
their artwork beside the rest of their content without having to use the columns
codeblock for the same effect.
Content Warning #
img {
z-index: 10;
filter: blur(30px);
}
figcaption {
visibility: hidden;
}
input.platen-content-warning {
visibility: hidden;
}
input.platen-content-warning + label {
position: absolute;
z-index: 1;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 1px ;
text-align: center;
&::before {
content: "Content Warning:";
display: block;
font-weight: bolder;
font-size: larger;
margin-bottom: 1em;
margin-top: 1em;
}
}
input[type="checkbox"]:checked + label {
opacity: 0;
}
input[type="checkbox"]:checked + label + img {
filter: blur(0);
}
input[type="checkbox"]:checked + label + img + figcaption {
visibility: visible;
}When the markup is used with the content_warning attribute, it adds
the platen-content-warning class to the figure and inserts a checkbox input and label
before the image element.
The styling blurs the image and super-imposes the content warning label over it, stretching the label to fill the entire figure. This allows a site visitor to click anywhere in the figure to unblur the image and hide the content warning instead, clicking again to reverse the process.
Overriding #
You can overwrite this definition for your own site or theme by creating the file
styles/markup/_art.scss in your assets folder, which defaults to assets in your
project root.
You can also create a new style module in the styles/markup folder and set this value to
that module’s name. If you do, omit the leading _ and trailing .scss. For example, the
name for the style module assets/styles/markup/_foo.scss is foo.
Note that if you override the style module or this setting,you entirely overwrite the default from the theme.
For more information on authoring SCSS, see the learning guide.
Markup Partials (partials)
Define a map of partials for Platen to inject as needed. These partials are only
injected when enabled is set to true.
Renderer Partials (renderers)
Defines a map of partials to use as Markdown render hooks. Like all partials, these are
only processed when enabled is set to true.
Supported renderer partials include:
codeblock, processed for fenced code blocks with a language IDheading, processed for headingsimage, processed for image linkslink, processed for non-image links
In all cases, all renderer partials for enabled features and markup options are checked one after the other unless they return a render string. Only the first applicable partial that returns a render string is processed and rendered.
Image Render Hook Partial (image)
Adds support for rendering images as artwork in Platen. This render hook is only
called if the alt text for the image (i.e. ) has the
art: prefix. If the image does have the prefix, it’s processed for adding the
image in a <figure> element with an optional caption and content warning.
For more information about how to use this render partial, see the reference documentation for this render hook.
For more information about defining codeblock render hook partials, see Defining a Codeblock Render Hook Partial in the Theme Guide.