Placeholder Images for CMS Development
Generate placeholder images for CMS theme development in WordPress, Shopify, Strapi, and other platforms. Match featured image sizes, gallery dimensions, and custom fields.
Detailed Explanation
Placeholder Images for CMS Development
Content Management System (CMS) themes and templates require placeholder images that match the exact sizes defined in the CMS configuration. Using correctly sized placeholders during development reveals layout issues before real content is added.
WordPress Image Sizes
WordPress auto-generates multiple sizes from each uploaded image:
| Size Name | Default Dimensions | Usage |
|---|---|---|
| Thumbnail | 150×150 (cropped) | Archive grids, widgets |
| Medium | 300×300 (max) | In-content images |
| Medium Large | 768×auto | Responsive content |
| Large | 1024×1024 (max) | Full-content images |
| Full | Original size | Lightbox, hero |
| Featured Image | Theme-dependent | Post headers, cards |
Custom themes often register additional sizes:
add_image_size('hero', 1920, 600, true);
add_image_size('card-thumb', 400, 300, true);
add_image_size('sidebar-thumb', 280, 200, true);
Shopify Image Sizes
Shopify themes use responsive images with specific recommended sizes:
| Image Type | Recommended Size | Notes |
|---|---|---|
| Product image | 2048×2048 | Square, auto-cropped |
| Collection image | 1024×1024 | Square thumbnail |
| Slideshow/Banner | 1920×1080 | Full-width |
| Blog post image | 1024×1024 | Featured image |
| Logo | 450×200 (max) | Header logo |
Headless CMS (Strapi, Contentful, Sanity)
Headless CMS platforms typically support on-the-fly image transformations:
/uploads/image.jpg?width=800&height=600&fit=cover
Generate placeholders at the most common transformation sizes used in your front-end.
Development Workflow
- Identify all image sizes in your CMS theme configuration
- Generate a placeholder for each size with a descriptive label
- Import placeholders into the CMS as media items
- Assign to content types (featured images, gallery items, etc.)
- Test all templates at each size to verify the layout handles images correctly
- Check responsive behavior to ensure images scale properly on different devices
Common Issues Caught by Placeholders
- Images stretching or squishing due to incorrect aspect ratio assumptions
- Hard-coded width/height values that break on different image sizes
- Missing
object-fitCSS causing image distortion - Gallery layouts breaking when images have inconsistent aspect ratios
- Lazy loading placeholders (LQIP) not matching the final image dimensions
Use Case
Theme developers for WordPress, Shopify, and other CMS platforms use correctly sized placeholder images to populate demo content during theme development. This ensures the theme handles all registered image sizes correctly before real content is uploaded by end users.