Documentation Index Fetch the complete documentation index at: https://docs.fanfare.io/llms.txt
Use this file to discover all available pages before exploring further.
Partial Availability You can reference external media URLs in landing pages. Direct upload and media management will be available when the landing page editor launches.
Type Formats Use Cases Images JPG, PNG, WebP, SVG, GIF Hero backgrounds, galleries, features Video YouTube, Vimeo, MP4 Hero backgrounds, embedded videos Icons SVG, icon libraries Feature sections, accents
Images Image Requirements Property Recommendation Format WebP (preferred), JPG, PNG Max File Size 2MB Resolution 2x for retina (e.g., 2400px for 1200px display) Color Profile sRGB
Image Sizing by Use Use Case Recommended Size Aspect Ratio Hero background 1920x1080px 16:9 Hero (mobile) 750x1334px 9:16 Feature icons 128x128px 1:1 Gallery images 800x800px 1:1 or 4:3 Testimonial avatars 80x80px 1:1 Product images 1200x1200px 1:1
Responsive Images The landing page system automatically serves appropriate image sizes:
<!-- Generated responsive image --> < picture > < source srcset = "image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w" sizes = "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" type = "image/webp" /> < img src = "image-800.jpg" alt = "Description" loading = "lazy" /> </ picture >
Image Optimization Images are automatically optimized:
Optimization Description Compression Quality-aware lossy compression Format conversion Convert to WebP where supported Resizing Generate multiple sizes Lazy loading Load when in viewport
Video Platform Supported Features YouTube Yes Embed, privacy-enhanced mode Vimeo Yes Embed, player customization Custom hosted Coming soon Direct MP4/WebM
YouTube Embeds { type : "video" , source : "youtube" , videoId : "dQw4w9WgXcQ" , // or full URL url : "https://www.youtube.com/watch?v=dQw4w9WgXcQ" }
Vimeo Embeds { type : "video" , source : "vimeo" , videoId : "123456789" , // or full URL url : "https://vimeo.com/123456789" }
Video Settings Setting Options Default Autoplay true, false false Muted true, false false (true if autoplay) Loop true, false false Controls true, false true Start time seconds 0
Autoplaying video with sound is blocked by browsers. Set muted: true if using autoplay.
Background Video For hero sections with video backgrounds:
{ section : "hero" , media : { type : "video" , source : "youtube" , videoId : "..." , background : true , autoplay : true , muted : true , loop : true , controls : false }, overlay : { color : "rgba(0, 0, 0, 0.5)" // Dark overlay for text readability } }
Icons Built-in Icon Library The editor includes access to common icon sets:
Library Icons Style Heroicons 300+ Outline, solid Lucide 1000+ Outline Simple Icons 2000+ Brand logos
Icon Usage { section : "features" , features : [ { icon: "heroicons:sparkles" , title: "AI-Powered" , description: "..." }, { icon: "lucide:rocket" , title: "Fast" , description: "..." } ] }
Custom SVG Icons Upload custom SVG icons:
{ icon : { type : "custom" , svg : "<svg>...</svg>" , // or URL url : "https://example.com/icon.svg" } }
Currently Supported Method Status External URLs Supported YouTube/Vimeo Supported Direct upload Coming soon
Using External URLs Reference images hosted elsewhere:
{ section : "hero" , media : { type : "image" , url : "https://your-cdn.com/hero-image.jpg" , alt : "Product hero image" } }
Recommended CDN options:
Cloudflare Images
Cloudinary
Imgix
Your own CDN
Upload Management (Coming Soon) Future capabilities:
Drag-and-drop upload in editor
Organization media library
Automatic optimization
AI-powered alt text suggestions
Alt Text and Accessibility Writing Good Alt Text Image Type Alt Text Approach Decorative Empty alt (alt="") Informative Describe content Functional Describe action Complex Brief summary + detailed description
Examples // Decorative background { url : "..." , alt : "" } // Informative product image { url : "..." , alt : "Limited edition blue running shoes with white sole" } // Functional CTA image { url : "..." , alt : "Play video about queue system" }
Good alt text is concise (under 125 characters) and describes what’s important in the image context.
Measuring Impact Metric Target Largest Contentful Paint (LCP) < 2.5s Total image weight < 1MB Above-fold load < 1s
Current Workarounds Image Optimization Services Use external services to optimize images:
# Cloudinary transformation https://res.cloudinary.com/demo/image/upload/w_800,f_auto,q_auto/sample.jpg # Imgix transformation https://example.imgix.net/image.jpg?w=800&auto=format,compress
Video Thumbnails Create custom video thumbnails:
{ section : "video" , source : "youtube" , videoId : "..." , thumbnail : { url : "https://your-cdn.com/custom-thumbnail.jpg" , alt : "Video preview" } }
Next Steps
Content Blocks Use media in sections
Preview Test media display
