Screenshots

​

Overview

​

Key Concepts

​

Visual Translation Mapping

• Upload UI images: Capture screens from your application
• Place containers: Mark translatable areas on the interface
• Assign keys: Connect translation keys to visual elements
• Edit content: Update translations directly in visual context
• Collaborate: Share visual context with team members

​

Screenshot Structure

• Image file: The actual screenshot (PNG, JPG, JPEG)
• Containers: Colored boxes marking translatable areas
• Key mappings: Links between containers and translation keys
• Metadata: Name, description, upload date, dimensions

​

Working Modes

​

Edit Mode

• Place containers on UI elements
• Resize and position containers precisely
• Customize container colors for organization
• Add descriptions for context
• Delete or modify containers

1. Switch to Edit Mode
2. Click “Add Container”
3. Click on the screenshot to place containers
4. Drag edges to resize containers
5. Add descriptions for clarity

​

Translate Mode

• Select namespace, version, and language
• Assign translation keys to containers
• Edit translation values inline
• Save changes back to language files

1. Select translation context (namespace/version/language)
2. Click containers to select them
3. Assign translation keys from the language file
4. Edit values directly in the interface
5. Save changes to update translations

​

Screenshot Management

​

Uploading Screenshots

1. Navigate to the Screenshots tab in your project
2. Click Add Screenshot
3. Select an image file (PNG, JPG, JPEG up to 10MB)
4. Enter a descriptive name
5. Add an optional description
6. Click Upload

​

Screenshot Grid

• Thumbnail preview: Visual preview of each screenshot
• Name and description: Identifying information
• Metadata: Dimensions, file size, upload date
• Quick actions: Edit, Translate, Delete buttons

​

Container System

​

Creating Containers

​

In Edit Mode:

1. Select container color from color picker
2. Click Add Container
3. Click on the screenshot where you want to place the container
4. Container appears with default size
5. Drag handles to resize as needed

​

Container Properties:

• Position: X, Y coordinates (percentage-based)
• Size: Width and height (percentage-based)
• Color: Background color for visual organization
• Description: Optional context for team members

​

Container Interaction

​

Resizing Containers

• Drag corner handles to resize proportionally
• Drag edge handles to resize width or height only
• Minimum size constraints prevent overly small containers
• Maximum size constraints prevent containers exceeding image bounds
• Click and drag container body to reposition

​

Container Colors

/* Common color schemes */
Blue (#3b82f6)    - Headers and titles
Green (#10b981)   - Success messages and buttons
Red (#ef4444)     - Error messages and warnings
Purple (#8b5cf6)  - Navigation and links
Yellow (#f59e0b)  - Input fields and forms
Gray (#6b7280)    - Secondary content

​

Container Descriptions

Examples:
"Main page heading - should be concise and impactful"
"Error message for invalid email format"
"Call-to-action button - keep under 20 characters"
"Navigation menu item for user profile section"

​

Translation Workflow

​

Setting Up Translation Context

1. Select Namespace: Choose the namespace containing your translations
2. Select Version: Pick the version you’re working with
3. Select Language: Choose the target language for translation
4. Lock Context: System locks selections to prevent accidents

​

Assigning Translation Keys

​

Key Assignment Process:

1. Click on a container to select it
2. Click Assign Key button
3. Search available translation keys
4. Select the appropriate key from the list
5. Key is automatically mapped to the container

​

Key Search and Selection:

• Search functionality: Find keys by name or content
• Type indicators: Visual badges show data types
• Key preview: See current values before assignment

​

Value Editing

​

Inline Editing:

1. Click on a mapped container
2. View assigned keys in the sidebar
3. Click on a key’s value to edit
4. Make changes inline
5. Changes are tracked as “pending”
6. Save all changes when ready

​

Change Management:

• Pending changes: Yellow highlighting indicates unsaved edits
• Change counter: Shows number of modified values

​

Advanced Features

​

Multi-Language Support

1. Set up containers in Edit Mode
2. Switch to Translate Mode for first language
3. Assign keys and edit values
4. Change language selection
5. Same containers, different language values

​

Performance Optimization

​

Image Optimization

• File size: Compress images without losing clarity
• Dimensions: Use appropriate resolution for display
• Format: Choose optimal format (PNG for UI, JPEG for photos)

​

Container Efficiency

• Minimize containers: Don’t over-map every element
• Strategic placement: Focus on translatable content only

​

Troubleshooting

​

Next Steps