MostlyRender

Plantillas como parámetros

Una plantilla de MostlyRender es un lienzo (ancho × alto, fondo) más una pila de capas nombradas. La idea clave:

El nombre de la capa es el parámetro de la API. Para cambiar lo que muestra una capa en el momento de renderizado, envía modifications con claves que correspondan al nombre de la capa.

# Modifications

Dada una plantilla con una capa de texto llamada title, una capa de imagen llamada photo, y una capa QR llamada link:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • Una cadena en una capa de texto establece su texto.
  • Una cadena en una capa de imagen establece su src.
  • Una cadena en una capa QR establece el valor codificado.
  • Un objeto se fusiona en la capa, para que también puedas anular estilos:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

Las capas que no menciones mantienen sus valores predeterminados diseñados. Los nombres de capa desconocidos se ignoran.

# El fondo del lienzo es un parámetro también

El fondo del lienzo no es una capa, así que tiene un nombre de parámetro reservado: background (minúsculas). Envíalo en modifications para cambiar el fondo en el momento del renderizado — las mismas formas de color sólido / degradado / imagen que produce el editor:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Q3 results",
    "background": "#0b1020"
  }
}
jsonc
// un degradado
{ "modifications": { "background": { "type": "gradient", "value": "linear-gradient(135deg,#23204a,#5b5bd6)" } } }

// una imagen (la URL debe ser una URL http(s) pública — las data-URIs se rechazarán por la protección SSRF)
{ "modifications": { "background": { "type": "image", "src": "https://cdn.example.com/hero.png", "fit": "cover" } } }

# {{placeholders}} dentro de un fondo

En lugar de reemplazar todo el fondo, una plantilla puede incorporar marcadores de posición y tú los completas por cada renderizado. En el panel Background del editor, establece un valor que contenga {{param}}; luego pasa ese parámetro en modifications:

jsonc
// fondo de plantilla (establecido en el editor): {{brandColor}}
// o una imagen: url("{{heroUrl}}") center/cover
{ "modifications": { "brandColor": "#ff5a00", "heroUrl": "https://cdn.example.com/u/42.png" } }

Los valores predeterminados para marcadores de posición pueden vivir en los vars de la plantilla; una modificación del mismo nombre anula el valor predeterminado. Los marcadores de posición de fondo se sustituyen sin procesar (llegan a CSS, no a HTML), así que la cadena de consulta de una URL (?w=1&h=2) se preserva textualmente.

# Listando plantillas

bash
curl https://api.mostlyrender.com/v1/templates \
  -H "Authorization: Bearer mr_live_…"
json
{
  "templates": [
    { "id": "tpl_abc", "name": "Launch card", "width": 1200, "height": 630, "engine": "layers" }
  ]
}

Usa el id como la template en una llamada de renderizado. Gestiona las plantillas (crear, editar, eliminar) en el editor de la aplicación.