Itch Embeds

Itch (itch)

Defines the map of options for Platen’s itch embed markup. The existing value is a map that includes whether or not to enable the image render hook and its style definition.

When this markup is enabled, you can embed itch.io widgets into your site with an image link.

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/itch/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the options for Platen's itch embed markup\n\nhttps://platen.io/modules/platen/config/site/markup/itch/",
  "properties": {
    "aliases": {
      "description": "Defines additional prefixes for the image render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#aliases",
      "oneOf": [
        {
          "items": {
            "type": "string"
          },
          "type": "array"
        },
        {
          "type": "string"
        }
      ],
      "title": "Aliases"
    },
    "dark": {
      "default": false,
      "description": "Set itch embeds to render with the dark theme by default.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#dark",
      "title": "Default to Dark Theme",
      "type": "boolean"
    },
    "enabled": {
      "default": true,
      "description": "Whether to enable the markup option for the site\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#enabled",
      "title": "Enable the markup option",
      "type": "boolean"
    },
    "linkback": {
      "default": false,
      "description": "Set itch embeds to include a link to the project page on its cover image by default.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#linkback",
      "title": "Default to Include Linkback",
      "type": "boolean"
    },
    "partials": {
      "description": "Define a map of partials for Platen to inject as needed.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#partials",
      "properties": {
        "renderers": {
          "description": "Registers one or more partials that act as render hooks.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#renderers",
          "properties": {
            "image": {
              "default": "platen/markup/itch/image",
              "description": "Adds a partial to call when processing the image render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#image",
              "title": "Image Render Hook Partial",
              "type": "string"
            }
          },
          "title": "Renderer Partials",
          "type": "object"
        }
      },
      "title": "Markup Partials",
      "type": "object"
    },
    "square": {
      "default": false,
      "description": "Set itch embeds to render as squares with the project's cover image and purchase button by default.\n\nhttps://platen.io/modules/platen/config/site/markup/itch/#square",
      "title": "Default to Square Embed",
      "type": "boolean"
    }
  },
  "title": "Itch",
  "type": "object"
}

Enable the markup option (enabled)

Choose whether the site renders image links with the itch: prefix in their alt text as embedded itch widgets. If this setting is set to true, any image links added with the prefix are rendered as [sref:<iframe>] elements using the URL of the link as the widget’s ID.

If this setting is false, the image links are treated as normal.

Aliases (aliases)

Define one or more prefixes to use in addition to the default prefix (itch) for embedded itch widgets.

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.

Default to Dark Theme (dark)

Specifies whether the embed widgets should use itch’s default dark theme instead of the default light theme. This value is overridden if the dark attribute or preset property is set for the markup.

Default to Include Linkback (linkback)

Specifies whether the project’s cover image should be a clickable link to the project page on itch. When this value is false, the cover image isn’t a link. This value is overridden if the linkback attribute or preset property is set for the markup.

Default to Square Embed (square)

Specifies that the embed widget should display as a square instead of the long rectangle. In this display, only the cover is visible with the button for buying the project. This value is overridden if the square attribute or preset property is set for the markup.

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 ID
  • heading, processed for headings
  • image, processed for image links
  • link, 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 image links as embedded itch widgets in Platen. This render hook is only called if the alt text for the image (i.e. ![alt_text](source "title")) has the itch: prefix. If an image link does have the prefix, it’s processed for adding an embedded itch widget as an [sref:<iframe>] element, using the source as the widget’s ID.

For more information about how to use image links to render itch widgets, see the reference documentation.

This value defaults to platen/markup/itch/image. You can replace it with a different value and defining a new partial, or override the existing partial by creating the file layouts/partials/platen/markup/itch/image.html in your own site or module.

For more information about defining codeblock render hook partials, see Defining a Codeblock Render Hook Partial in the Theme Guide.

Edit this page