Render As with .contentType

Overview#

The .contentType parameter lets you change how a parameterized element is rendered at runtime — without modifying the template itself. For example, you can render a text element as an image, or an image element as plain text.

This is useful when a template layout has an element in the right position and size, but you need it to display a different type of content for a specific render.

How It Works#

When you add .contentType to a parameterized element, Orshot changes the rendering mode for that element:

• Text → Image — The element's value is treated as an image URL and rendered as an image in the text element's bounding box
• Image → Text — The element's value is treated as text content and rendered as text in the image element's bounding box

The element keeps its original position, dimensions, and applicable styles — only the rendering behavior changes.

Syntax#

parameterID.contentType

For multi-page templates:

pageN@parameterID.contentType

Supported Values#

Text to Image#

Basic Usage#

Render a text element as an image by setting .contentType to "image" and passing an image URL as the element's value:

{
  "modifications": {
    "title": "https://example.com/logo.png",
    "title.contentType": "image"
  }
}

The title text element now displays the provided image instead of text.

With Style Parameters#

You can combine .contentType with style properties that apply to images:

{
  "modifications": {
    "title": "https://example.com/photo.jpg",
    "title.contentType": "image",
    "title.objectFit": "cover",
    "title.borderRadius": "12px"
  }
}

Multi-Page Example#

{
  "modifications": {
    "page1@badge": "https://example.com/badge-gold.png",
    "page1@badge.contentType": "image",
    "page2@badge": "https://example.com/badge-silver.png",
    "page2@badge.contentType": "image"
  }
}

Image to Text#

Basic Usage#

Render an image element as text by setting .contentType to "text" and passing text content as the element's value:

{
  "modifications": {
    "avatar": "Coming Soon",
    "avatar.contentType": "text"
  }
}

The avatar image element now displays "Coming Soon" as text instead of an image.

With Style Parameters#

You can apply text style properties when rendering an image element as text:

{
  "modifications": {
    "photo": "No Image Available",
    "photo.contentType": "text",
    "photo.fontSize": "24px",
    "photo.color": "#999999",
    "photo.textAlign": "center"
  }
}

Combining with Other Parameters#

With AI Generation#

Use .contentType together with .prompt for AI-generated content in a different format:

{
  "modifications": {
    "textSlot.contentType": "image",
    "textSlot.prompt": "A minimalist logo for a coffee shop, flat design"
  }
}

With Links (PDF)#

{
  "modifications": {
    "label": "https://example.com/icon.svg",
    "label.contentType": "image",
    "label.href": "https://example.com"
  },
  "response": {
    "format": "pdf"
  }
}

Validation Rules#

Orshot validates .contentType values and will skip invalid entries:

1. Supported values only — Must be "image" or "text" (case-insensitive)
2. Different from element type — Setting .contentType to the same type as the element (e.g., "image" on an image element) is ignored since it has no effect
3. Text and image elements only — .contentType is not supported on shape or video elements

If validation fails, the element renders normally with its original type.

Real-World Examples#

Dynamic Badge or Text#

A template with a text element for a label — sometimes show an icon image instead:

{
  "modifications": {
    "badge": "https://cdn.example.com/verified-badge.png",
    "badge.contentType": "image",
    "badge.objectFit": "contain"
  }
}

Or keep it as text:

{
  "modifications": {
    "badge": "VERIFIED"
  }
}

Placeholder for Missing Images#

An image element that shows text when no image is available:

{
  "modifications": {
    "product_image": "Image not available",
    "product_image.contentType": "text",
    "product_image.fontSize": "18px",
    "product_image.color": "#aaaaaa",
    "product_image.textAlign": "center"
  }
}

Social Media Cards#

Use a single template layout where a text element can optionally display a user's avatar:

{
  "modifications": {
    "user_label": "https://example.com/avatars/user123.jpg",
    "user_label.contentType": "image",
    "user_label.borderRadius": "50%",
    "user_label.objectFit": "cover",
    "username": "@johndoe"
  }
}

API Integration Examples#

REST API#

curl -X POST https://api.orshot.com/v1/studio/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "your-template-id",
    "modifications": {
      "slot": "https://example.com/image.png",
      "slot.contentType": "image",
      "slot.objectFit": "contain"
    },
    "response": {
      "format": "png",
      "type": "url"
    }
  }'

Dynamic URL#

https://api.orshot.com/v1/studio/dynamic-url/my-template?
slot=https%3A%2F%2Fexample.com%2Fimage.png&
slot.contentType=image&
slot.objectFit=contain

Limitations#

1. Element types — Only text and image elements support .contentType. Shape and video elements are not supported.
2. Same-type assignment — Setting .contentType to the element's own type is a no-op and will be ignored.
3. Style inheritance — When switching content types, only styles applicable to the target type will take effect. For example, fontSize won't affect an element rendered as an image.

Next Steps#

• Learn about AI Content Generation with .prompt
• Add Interactive Links with .href
• Explore Dynamic Parameters Introduction