Media & Asset Handling
How ZyVOP handles cover images, relative asset resolution, and cross-platform image hosting.
Publishing to external targets requires that all image assets be publicly accessible over HTTPS so destination servers can download or hotlink them.
Relative Asset Resolution
If you store Markdown posts alongside local screenshots and diagrams in your Git repository:
my-blog/
├── posts/
│ ├── distributed-tracing.md
│ └── assets/
│ └── trace-waterfall.pngExternal platforms (DEV.to, Hashnode, Medium) cannot access ./assets/trace-waterfall.png. ZyVOP solves this through Base URL Resolution:
How It Works
- Specify
base_urlin your frontmatter, pass--base-urlvia CLI, or let ZyVOP infer it fromcanonical_url. - The CLI or API converts all relative image references to absolute URLs:
- Input:
./assets/trace-waterfall.png - Output:
https://myblog.dev/posts/assets/trace-waterfall.png
- Input:
---
title: "Distributed Tracing"
canonical_url: "https://myblog.dev/posts/distributed-tracing"
base_url: "https://myblog.dev/posts"
---Cover Images
Your cover image is used as the article header across platforms and populates social Open Graph previews.
cover_image: "https://myblog.dev/images/microservices-banner.png"Best Practices for Cover Images
- Dimensions:
1200 x 630pixels (standard 16:9 ratio for Open Graph cards & LinkedIn). - Format: PNG, JPG, or WebP.
- File Size: Keep under 5MB to ensure fast loading on mobile networks.
- Hosting: Must be hosted on a public HTTPS server (e.g. GitHub raw, S3, Cloudinary, or your personal blog domain).
Platform Image Upload Limits
| Platform | Image Size Limit | Supported Formats |
|---|---|---|
| DEV.to | Max 25MB per image | PNG, JPG, WebP, GIF |
| Hashnode | Max 20MB per image | PNG, JPG, WebP, GIF |
| Medium | Max 25MB per image | PNG, JPG, WebP, GIF |
| Bluesky | Max 1MB (link thumbnail) | PNG, JPG, WebP |
| WordPress | Configured by server (typically 2MB - 64MB) | All standard formats |
GitHub Gist Embeds
ZyVOP automatically detects and renders GitHub Gist embeds in your articles. Gists are displayed as interactive code viewers with syntax highlighting and file-tab navigation.
Supported Formats
The editor's Smart Paste feature auto-detects Gist references in all common formats:
| Format | Example |
|---|---|
| Standalone URL | https://gist.github.com/username/abc123 |
| Raw URL | https://gist.githubusercontent.com/username/abc123/raw/file.js |
| Script embed | <script src="https://gist.github.com/username/abc123.js"></script> |
| Hashnode shortcode | %[https://gist.github.com/username/abc123] |
| Jekyll/Liquid tag | {% gist username/abc123 %} |
When you paste any of these into the editor, ZyVOP converts it into a semantic embed that renders as a full code viewer with:
- Syntax highlighting per language
- File navigation for multi-file Gists
- Loading states and error handling
- Direct link to the original Gist on GitHub