MostlyRender

Modelli come parametri

Un modello MostlyRender è una tela (larghezza × altezza, sfondo) più uno stack di livelli con nome. L’idea chiave:

Il nome del livello è il parametro API. Per modificare ciò che un livello mostra al momento del rendering, invia modifications con chiave del nome del livello.

# Modifications

Dato un modello con un livello di testo denominato title, un livello immagine denominato photo e un livello QR denominato link:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • Una stringa su un livello di testo imposta il suo testo.
  • Una stringa su un livello immagine imposta il suo src.
  • Una stringa su un livello QR imposta il valore codificato.
  • Un oggetto viene unito nel livello, in modo da poter eseguire anche l’override dello stile:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

I livelli che non menzioni mantengono i loro valori predefiniti. I nomi di livelli sconosciuti vengono ignorati.

# Lo sfondo della tela è un parametro anche esso

Lo sfondo della tela non è un livello, quindi ha un nome di parametro riservato: background (minuscolo). Invialo in modifications per scambiare lo sfondo al momento del rendering — le stesse forme solide / gradiente / immagine che l’editor produce:

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

// an image (URL must be a public http(s) URL — data-URIs are rejected by the SSRF guard)
{ "modifications": { "background": { "type": "image", "src": "https://cdn.example.com/hero.png", "fit": "cover" } } }

# {{placeholders}} all’interno di uno sfondo

Invece di sostituire l’intero sfondo, un modello può inserire i segnaposto e tu li riempi per il rendering. Nel pannello Background dell’editor, imposta un valore contenente {{param}}; quindi passa quel parametro in modifications:

jsonc
// template background (set in the editor): {{brandColor}}
// or an image:  url("{{heroUrl}}") center/cover
{ "modifications": { "brandColor": "#ff5a00", "heroUrl": "https://cdn.example.com/u/42.png" } }

I valori predefiniti per i segnaposti possono trovarsi in vars del modello; una modifica dello stesso nome sostituisce il valore predefinito. I segnaposti di sfondo vengono sostituiti raw (atterrano in CSS, non in HTML), quindi la stringa di query di un URL (?w=1&h=2) viene conservata letteralmente.

# Elenco dei modelli

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 id come template in una chiamata di rendering. Gestisci i modelli (crea, modifica, elimina) nell’editor dell’app.