Managing Templates
The Pictify dashboard provides a visual editor for creating and managing templates. This guide covers the template workflow from creation to rendering.
Template Editor
Accessing the Editor
- Go to Templates in the sidebar
- Click Create Template or select an existing template
- The visual editor opens with the canvas and toolbar
Editor Layout
| Area | Description |
|---|
| Canvas | Visual preview of your template |
| Toolbar | Add elements, adjust settings |
| Properties Panel | Configure selected element |
| Variables Panel | Define and manage variables |
| Layers Panel | Reorder and group elements |
Creating a Template
Step 1: Set Canvas Size
Choose a preset or enter custom dimensions:
| Preset | Dimensions | Use Case |
|---|
| OG Image | 1200 × 630 | Social sharing (Facebook, LinkedIn) |
| Twitter Card | 1200 × 600 | Twitter posts |
| Instagram Post | 1080 × 1080 | Instagram feed |
| Instagram Story | 1080 × 1920 | Instagram/Facebook stories |
| YouTube Thumbnail | 1280 × 720 | Video thumbnails |
| Custom | Any | Your specific needs |
Step 2: Add Elements
Click the + button to add elements:
- Text - Headlines, body text, captions
- Image - Logos, photos, icons
- Shape - Rectangles, circles, custom shapes
- Container - Group elements together
Step 3: Style Elements
Select an element to edit its properties:
Text Properties:
- Font family, size, weight
- Color and opacity
- Alignment and line height
- Letter spacing
Image Properties:
- Source URL or upload
- Fit mode (cover, contain, fill)
- Border radius
- Filters and effects
Shape Properties:
- Fill color or gradient
- Border width and color
- Shadow effects
- Opacity
Step 4: Add Variables
Variables make your template dynamic. Click Variables to add:
- Click Add Variable
- Enter a name (e.g.,
title, author)
- Set the type (string, number, boolean, image)
- Optionally set a default value
Use variables in text with double braces:
{{title}}
{{author.name}}
{{currency(price, 'USD')}}
Step 5: Save Template
- Click Save
- Enter a name and description
- Click Create Template
Your template is now available via API.
Template Settings
General Settings
| Setting | Description |
|---|
| Name | Template identifier in the dashboard |
| Description | Notes about the template’s purpose |
| Tags | Categorize templates (e.g., “social”, “email”) |
Render Settings
| Setting | Description |
|---|
| Default Format | PNG, JPEG, or WebP |
| Quality | Compression level (1-100) |
| Device Scale | Retina support (1x, 2x, 3x) |
Access Settings
| Setting | Description |
|---|
| Visibility | Public URL or API-only |
| Allowed Origins | CORS origins for public URL |
Working with Variables
Variable Types
| Type | Description | Example |
|---|
| String | Text content | "Hello World" |
| Number | Numeric values | 42, 3.14 |
| Boolean | True/false | true, false |
| Image | Image URL | "https://..." |
| Array | List of items | ["a", "b", "c"] |
| Object | Nested data | {name: "..."} |
Using Variables in Text
Hello, {{name}}!
You have {{count}} new messages.
Total: {{currency(price, 'USD')}}
Conditional Elements
Make elements appear based on conditions:
- Select an element
- In Properties, find Conditional
- Enter a condition:
isPremium or count > 0
The element only renders when the condition is true.
Default Values
Set fallback values for variables:
- Click the variable in the Variables panel
- Enter a Default Value
- This value is used when the variable isn’t provided
Organizing Templates
Folders
Create folders to organize templates:
- Click New Folder in the Templates view
- Name your folder
- Drag templates into folders
Add tags for filtering:
- Open template settings
- Add tags in the Tags field
- Filter by tags in the Templates list
Search
Use the search bar to find templates by:
- Name
- Description
- Tags
- Variable names
Duplicating Templates
Create a copy to modify:
- Click the … menu on a template
- Select Duplicate
- Edit the copy as needed
Deleting Templates
Deleting a template is permanent. Existing images won’t be affected, but you won’t be able to render new ones.
- Click the … menu on a template
- Select Delete
- Confirm deletion
Version History
View and restore previous versions:
- Open a template
- Click History in the toolbar
- Browse previous versions
- Click Restore to revert
Previewing Templates
In-Editor Preview
- Click Preview in the toolbar
- Enter sample variable values
- See the rendered result
Test Renders
Generate a test image:
- Click Test Render
- Fill in variables
- Click Generate
- View or download the result
Test renders don’t count against your quota.
Exporting Templates
Export as JSON
Export template configuration:
- Click … menu
- Select Export
- Download the JSON file
Import Template
Import from JSON:
- Click Import in the Templates view
- Select your JSON file
- Review and save
Keyboard Shortcuts
| Shortcut | Action |
|---|
Cmd/Ctrl + S | Save template |
Cmd/Ctrl + Z | Undo |
Cmd/Ctrl + Shift + Z | Redo |
Cmd/Ctrl + D | Duplicate element |
Delete | Delete selected |
Cmd/Ctrl + G | Group elements |
Arrow keys | Nudge element |
Shift + Arrow | Nudge 10px |
Best Practices
Design Tips
- Use a grid - Enable snap-to-grid for alignment
- Set up styles - Create reusable colors and fonts
- Group related elements - Keep layers organized
- Test at different sizes - Preview on various devices
Variable Naming
✅ title, authorName, publishDate
❌ t, var1, x
- Optimize images - Use appropriate sizes
- Limit fonts - Load only needed weights
- Simplify gradients - Complex gradients slow rendering
- Test render time - Keep under 5 seconds
