Image Template Variables

Image template variables are created automatically when you upload an image through the Image Manager. Each image you upload becomes accessible by its name with several properties.

Image Properties

Variable	Description
images.imageName.width	The original width of the image in pixels.
images.imageName.height	The original height of the image in pixels.
images.imageName.url	The URL where this image can be accessed or downloaded.

Note: imageName in the table above represents the unique name you gave the image when uploading it. For example, if you uploaded an image named "cardBack", you would access it as images.cardBack.width.

Accessing Image Properties

Image variables are available throughout Component.Studio in any template field. You can use them in layer properties, dataset cells, variables, and more.

Example 1: Set Layer Width Based on Image

If you have an image named "hero", you can set a layer's width to match:

{{ images.hero.width }}

If the image is 800 pixels wide, this outputs: 800

Example 2: Calculate Aspect Ratio

Calculate and display the aspect ratio of an image:

{{ images.logo.width / images.logo.height }}

For a 1920x1080 image, this outputs: 1.777...

Example 3: Scale Width While Maintaining Aspect Ratio

Set a fixed width and calculate the proportional height:

Width property: 500

Height property: {{ 500 * (images.background.height / images.background.width) }}

This maintains the image's aspect ratio at any width.

Example 4: Center an Image Layer

Use image dimensions to perfectly center a layer:

Left property: {{ (design.width - images.icon.width) / 2 }}

Top property: {{ (design.height - images.icon.height) / 2 }}

Or more simply, use the built-in functions:

Left property: {{ centerMeX() }}

Top property: {{ centerMeY() }}

Example 5: Conditional Layout Based on Image Orientation

Use different layouts for portrait vs landscape images:

{% if images.photo.width > images.photo.height %}Landscape{% else %}Portrait{% endif %}

Image Names and References

When you upload an image, the name you provide becomes its variable name. Image names:

Must be unique within your game
Can contain letters, numbers, and underscores
Are case-sensitive (e.g., images.CardBack is different from images.cardback)
Should be descriptive to make templates easier to read

Using Image URLs

The url property provides the full URL to the image. This is useful for:

Setting the source of Image layers: {{ images.hero.url }}
Using images in texture fills: {{ images.pattern.url }}
Debugging: Display the URL to verify which image is being used

Common Mistake: Don't confuse image dimensions with layer dimensions. The images.photo.width property tells you the original image's width, not the width of a layer using that image. Layer dimensions are set separately and may be scaled differently from the original image.

Combining with Other Variables

Image variables can be combined with game variables, dataset variables, and row data for powerful dynamic layouts:

Example: Responsive Layout

{{ min(images.artwork.width, design.width - 20) }}

This ensures the image fits within the design with 10px margin on each side, using whichever is smaller: the image's actual width or the available space.

Best Practices

Use descriptive names - "cardBackRed" is better than "img1"
Organize with prefixes - Use naming patterns like "icon_", "bg_", or "texture_" for related images