Basics

Image tags in Rhyme provide a simple and intuitive way to reference images in your app using a percent-based syntax. Instead of dealing with complex file paths or URLs, you can use friendly image tags like %logo, %icon-user, or %background-hero directly in your Rhyme code.

How Image Tags Work

Image tags follow a simple pattern: % followed by an image name. For example:

• %logo - References an image named “logo”
• %icon-user - References a user icon image
• %background-hero - References a hero background image
• %photo-team - References a team photo

The Rhyme lexer automatically recognizes these image tags during parsing and converts them into the appropriate image references. This happens at compile time, making image handling efficient and consistent.

Image Tag Naming Conventions

Image tags typically follow kebab-case naming conventions for consistency:

• Use descriptive names that indicate the image purpose
• Separate words with hyphens: %main-banner, %user-avatar
• Consider grouping related images with prefixes: %icon-home, %icon-settings, %icon-profile

Usage in Actions

Image tags can be used in various Rhyme actions that support image content:

.image %logo
.background %hero-banner
.button "Click me" %icon-arrow

The specific usage depends on the action - some actions may use the image as the primary content, while others might use it as decoration or background.

Working with Images

Uploading Images

Before you can use an image tag, you need to upload the image to your app. This is typically done through:

• The Rhappsody Studio interface
• Image upload actions in your app
• API calls to add images to your app

Image Organization

It’s good practice to organize your images logically:

// Product images
%product-laptop
%product-phone
%product-tablet

// UI elements
%bg-hero
%bg-pattern
%icon-cart
%icon-user

// Branding
%logo-main
%logo-white
%logo-small

Image Management Benefits

Image tags provide several advantages:

Consistency

Use the same tag throughout your app to reference the same image:

// In header
.image %logo-main

// In footer
.image %logo-main

// In about page
.image %logo-main

Maintainability

Change the actual image file in one place and it updates everywhere the tag is used

Readability

%company-logo is much clearer than a file path or URL

Flexibility

The underlying image source can be changed without updating your Rhyme code

Best Practices

1. Plan Your Image Structure

Before starting development:

• List all images you’ll need
• Create a consistent naming scheme
• Group related images with prefixes

2. Use Descriptive Names

Good examples:

• %hero-home-page
• %icon-shopping-cart
• %bg-pattern-dots

Avoid generic names like:

• %image1
• %pic
• %temp

3. Optimize Your Images

Before uploading:

• Use appropriate formats (JPEG for photos, PNG for graphics with transparency)
• Compress images to reduce file size
• Consider different sizes for different uses

4. Document Your Images

Keep a reference of what images you’re using:

// Image Reference
// %logo-main - Main company logo (500x200)
// %logo-small - Small logo for mobile (150x60)
// %hero-home - Homepage hero image (1920x800)
// %icon-set - Icon sprite sheet (200x200)

Common Patterns

Responsive Images

Use different images for different screen sizes:

// Desktop version
.image %hero-desktop
  
// Mobile version  
.image %hero-mobile

Image Placeholders

Use a consistent placeholder while images load:

%placeholder-user
%placeholder-product
%placeholder-banner

Themed Images

Support light/dark mode with themed images:

%logo-light
%logo-dark
%icon-sun-light
%icon-moon-dark

The image tag system makes it easy to create visually rich apps while keeping your Rhyme code clean and maintainable. No more hunting for image URLs or worrying about broken paths - just use the tag and go!