# Render As with .contentType

> Render a text element as an image or an image element as text using the .contentType parameter

- **URL**: https://orshot.com/docs/dynamic-parameters/content-type

---

## 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

| Value     | Description                    | Applicable To  |
| --------- | ------------------------------ | -------------- |
| `"image"` | Render the element as an image | Text elements  |
| `"text"`  | Render the element as text     | Image elements |

## 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:```json
{
  "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:```json
{
  "modifications": {
    "title": "https://example.com/photo.jpg",
    "title.contentType": "image",
    "title.objectFit": "cover",
    "title.borderRadius": "12px"
  }
}
```### Multi-Page Example```json
{
  "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:```json
{
  "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:```json
{
  "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:```json
{
  "modifications": {
    "textSlot.contentType": "image",
    "textSlot.prompt": "A minimalist logo for a coffee shop, flat design"
  }
}
```### With Links (PDF)```json
{
  "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:```json
{
  "modifications": {
    "badge": "https://cdn.example.com/verified-badge.png",
    "badge.contentType": "image",
    "badge.objectFit": "contain"
  }
}
```Or keep it as text:```json
{
  "modifications": {
    "badge": "VERIFIED"
  }
}
```### Placeholder for Missing Images

An image element that shows text when no image is available:```json
{
  "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:```json
{
  "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```bash
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```markdown
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](https://orshot.com/docs/dynamic-parameters/prompt)
- Add [Interactive Links with .href](https://orshot.com/docs/dynamic-parameters/link)
- Explore [Dynamic Parameters Introduction](https://orshot.com/docs/dynamic-parameters)