Artist Portfolios

​

Overview

​

Portfolio Structure

​

User-Based Organization

• Artists - Build their individual portfolios
• Admin/Assistants - Can upload to any artist’s portfolio
• Images linked to sessions - Automatically associated with clients and transactions

​

Sidebar Navigation

• Profile avatar (44px circular image)
• Full name or username
• Role badge (Artist, Admin, Assistant)
• Active/Inactive status
• Image count
• Colored dot indicator (matches artist color)
• Colored top border (matches artist color)

​

Adding Images

​

Image Metadata

​

Portfolio Item Fields

id: Integer (primary key)
user_id: Integer (Foreign Key → User)
artist_id: Integer (Foreign Key → Artist)  
client_id: Integer (Foreign Key → Client)
session_id: Integer (Foreign Key → TattooSession)
transaction_id: Integer (Foreign Key → Transaction)

path: String - File system path
thumb_path: String - Thumbnail path (optional)
caption: Text - Image description

style: String - Tattoo style tag
body_area: String - Body location
color_mode: String - "color" or "bn" (black & white)
fresh_or_healed: String - "fresh" or "healed"

is_public: Boolean - Show in public gallery
is_cover: Boolean - Use as cover image

created_at: DateTime - Upload timestamp

​

Automatic Relationships

• artist_id - From session artist
• client_id - From session client
• session_id - Direct session link

• Who did the tattoo (artist)
• Who received it (client)
• When it was done (session)
• How much they paid (transaction)

​

Gallery Views

​

Grid Layout

• Cards arrange automatically in rows
• 220px wide cards with 260px height images
• 12px horizontal and vertical spacing
• Smooth hover effects

​

Portfolio Cards

• Image - Scaled to 260px height maintaining aspect ratio
• Date - Creation date in YYYY-MM-DD format
• Shadow effect - Subtle depth with 14px blur radius
• Hover state - Border highlights from rgba(255,255,255,0.08) to 0.18

​

Filtering and Sorting

​

Available Filters

• Dynamically populated from uploaded images
• Shows only styles present in current portfolio
• “All Styles” to show everything

• Zones where tattoos are located
• Auto-populated from image metadata
• “All Zones” option

• All
• Color tattoos only
• Black & white only

• All
• Fresh tattoos (just completed)
• Healed tattoos (after healing period)

• Most Recent (default) - Newest first
• Oldest First - Chronological order

​

Filter Behavior

• Filters apply instantly without page reload
• Multiple filters combine with AND logic
• “Clear Filters” button resets all to defaults
• Filter values update when switching between artists

​

Image Detail View

​

Detail Dialog Contents

• Full-size view (scaled to 640px width max)
• Maintains aspect ratio
• High-quality rendering with antialiasing

• Date: Upload date
• Artist: Artist name with link
• Session: Session ID, status, and price
• Client: Client name with link
• Transaction: Transaction ID, amount, and payment method
• Notes: Caption or description

• Frameless design with rounded corners
• Draggable - Click and drag to reposition
• Opens at cursor position
• Dark theme (#1f242b background)
• Close button to dismiss

​

Client Gallery Integration

​

Client Portfolio Tab

• Filtered by client_id
• Up to 200 images (configurable)
• Same card and detail view as main portfolio
• Sorted by most recent first

• Show client their previous work
• Reference old tattoos for new designs
• Track client’s collection over time
• Before/after comparisons

​

Storage and Organization

​

File System Layout

data/uploads/portfolios/
  ├── 1/              # User ID 1
  │   ├── image1.jpg
  │   ├── image2.png
  │   └── image3.webp
  ├── 2/              # User ID 2
  │   └── ...
  └── 3/              # User ID 3
      └── ...

​

File Naming

• Original filenames preserved when possible
• Automatic incremental suffix for duplicates: image_1.jpg, image_2.jpg
• No overwrites - existing files never replaced

​

Legacy Migration

• Old: assets/uploads/portfolios/
• New: data/uploads/portfolios/
• Copies files on first access
• Preserves directory structure

​

Permissions

​

Best Practices

​

Advanced Features

​

Cover Images

• Shows first in galleries
• Used for artist profile displays
• Only one cover per artist
• Setting new cover unsets previous

​

Public/Private Toggle

• Visible in public-facing galleries
• Shareable on social media
• Searchable by clients

• Only visible to studio staff
• Hidden from public portfolio
• Still accessible via client records
• Useful for reference photos

​

Session Linking Benefits

1. Complete work history - See all photos from a session
2. Financial tracking - Connect images to revenue
3. Client journey - Visual timeline per client
4. Artist analytics - Track productivity and style focus
5. Portfolio stats - Revenue per image, popular styles

​

Related Features

• Client Management - Client gallery integration
• Appointment Scheduling - Link images to sessions
• Financial Tracking - Track image-to-revenue conversion

​

Technical Details

​

Database Schema

CREATE TABLE portfolio_items (
  id INTEGER PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  artist_id INTEGER REFERENCES artists(id),
  client_id INTEGER REFERENCES clients(id),
  session_id INTEGER REFERENCES sessions(id),
  transaction_id INTEGER REFERENCES transactions(id),
  path TEXT NOT NULL,
  thumb_path TEXT,
  caption TEXT,
  style TEXT,
  body_area TEXT,
  color_mode TEXT,
  fresh_or_healed TEXT,
  is_public BOOLEAN DEFAULT TRUE,
  is_cover BOOLEAN DEFAULT FALSE,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

​

Image Processing

• No automatic resizing - Original images preserved
• Lazy loading - Images load as you scroll
• Thumbnail generation - Optional future enhancement
• Format conversion - None applied (preserve original)

​

Performance Optimization

• Batch loading - 60-200 images per load
• Offset pagination - For large portfolios
• In-memory filtering - Instant UI updates
• Lazy rendering - Cards created on-demand

​

Troubleshooting