# Image Text Fuser
## Try it in the Widget Center
Click this [url](https://app.myshell.ai/robot-workshop/widget/1812381775823757312) to try this widget and copy the Pro Config template.
## Usage
The widget configuration is specified in JSON format within the `config` field:
```json
{
"template_path": "https://image.myshell.ai/image/chat/embed_obj/7758545/202407151553/shell-identity-03.jpg",
"font": "Oswald-Regular.ttf",
"boxes": [
{
"text": "some text here",
"position": [760, 140],
"size": [390, 230],
"font_size": 56,
"font": "Caveat-Regular.ttf"
},
{
"text": "somte other text here",
"position": [815, 470],
"size": [415, 200],
"font_size": 72,
"font": "KronaOne-Regular.ttf"
}
]
}
```
**Parameters**
1. **template\_path**: URL of the base image template.
2. **font**: Default font for text (e.g., "Oswald-Regular.ttf").
3. **emoji\_source**: Source for emoji images. This attribute determines the source of emoji images used in the generated content. Each source provides a different style or set of emoji images. Can be one of the following (default to TwitterEmojiSource):
```json
HTTPBasedSource, DiscordEmojiSourceMixin, EmojiCDNSource,
TwitterEmojiSource, AppleEmojiSource, GoogleEmojiSource,
MicrosoftEmojiSource, FacebookEmojiSource, MessengerEmojiSource,
EmojidexEmojiSource, JoyPixelsEmojiSource, SamsungEmojiSource,
WhatsAppEmojiSource, MozillaEmojiSource, OpenmojiEmojiSource,
TwemojiEmojiSource, FacebookMessengerEmojiSource, Twemoji, Openmoji
```
3. **boxes**: An array of text and image box configurations.
**Text Box Configuration**
Each text box in the `boxes` array can have the following properties:
* **text**: Content to be displayed.
* **position**: `[x, y]` coordinates for the top-left corner of the text box.
* **size**: `[width, height]` of the text box.
* **font\_size**: Size of the font in pixels.
* **font**: Specific font for this text box (overrides the default font).
* **outline\_color**: Specific the outline color of the text.
* **color**: Color of the text. Can be specified as a hex code (e.g., "`#FF0000`")
* **underline**: Whether to add underline for the text (`true/false`).
* **text\_align**: Horizontal alignment of the text within the text box. Options include `"left", "center", or "right"`.
* **vertical\_align**: Vertical alignment of the text within the text box. Options include `"top", "center", or "bottom"`.
* **z\_index**: Determines the stacking order of elements. Higher values are drawn on top of elements with lower values.
* **emoji\_position\_offset**: A float value used to adjust the vertical position of emojis. The actual offset is calculated by multiplying `emoji_position_offset` with the line height. Positive values move emojis down, while negative values move them up. For example, 0.2 will move emojis down by 20% of the line height, while -0.1 will move emojis up by 10% of the line height.
**Image Box Configuration**
Each image box in the `boxes` array can have the following properties:
* **image**: URL or path of the image to be added.
* **position**: \[x, y] coordinates for the top-left corner of the image.
* **size**: \[width, height] to which the image should be resized.
* **rotation**: The rotation angle of the image.
**Usage**
1. The widget uses the specified template image as a base.
2. It then overlays text onto this image according to the `boxes` configuration.
3. Text content can be dynamically populated using variables (e.g., `{{random_text}}`, `{{context.user_name}}`).
**Input Parameters**
Name
Type
Description
Default
Required
config
string
The configuration of the image text fuser
true
**Output Parameters**
| Name | Type | Description | File Type |
| ---- | -------- | --------------------------- | --------- |
| url | `string` | The url of the output image | |
**Output Example**
{% tabs %}
{% tab title="success" %}
{% code fullWidth="false" %}
```json
{
"url": "https://object-storage-16oh.lepton.ai/ws-k8d7q1rw/wojak/output/3acf63b5f6f148208ab4d02b0482d72d.png"
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Notes
* The supported fonts now: `Oswald-Bold.ttf, Oswald-Regular.ttf, KronaOne-Regular.ttf, Caveat-Regular.ttf`
* Ensure that all specified fonts are available in the system where the widget is running.
* The `{{random_text}}` and `{{context.user_name}}` placeholders should be replaced with actual values before processing.
* Adjust text and image box sizes and positions as needed.
* When configuring this widget in a pro config, the entire `config` object needs to be written as a single line with proper escape characters. For example:
```json
{
"name": "any_module_example_task",
"module_type": "AnyWidgetModule",
"module_config": {
"widget_id": "1812381775823757312",
"config": "{\"template_path\": \"https://image.myshell.ai/image/chat/embed_obj/7758545/202407151553/shell-identity-03.jpg\", \"font\": \"Oswald-Regular.ttf\", \"boxes\": [{\"text\": \"some text here\", \"position\": [760,140], \"size\": [390,230], \"font_size\": 56, \"font\": \"Caveat-Regular.ttf\"}, {\"text\": \"some other text here\", \"position\": [815,470], \"size\": [415,200], \"font_size\":72, \"font\": \"KronaOne-Regular.ttf\"}]}",
"output_name": "output_image"
}
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.myshell.ai/create/pro-config-mode/api-reference/widgets/72-image-text-fuser.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.