W-028 · WIDGET

Image Embed

An image-embed widget is a single hosted image rendered as a standalone iframe — useful for portfolio shots, blog hero photos, or product images on pages where direct image hosting is awkward (Notion comments, certain Obsidian configurations, restricted CMS environments). WidgetCraft's Image Embed widget renders any URL-accessible image with optional caption and alt text in a 16:10 card.

NotionObsidianAny website
https://mizu.so/w/image-embed?theme=light&accent=%23F06449&src=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1506905925346-21bda4d32df4%3Fw%3D800&caption=the+lake+at+six&fit=cover
Customize in Builder

Image Embed is one of WidgetCraft's content primitives — a clean, single-image card configurable via URL. Drop in any direct image URL (Cloudinary, Imgur, S3, Unsplash, your own host) and the widget renders it at 16:10 aspect ratio with cover or contain fit modes. Optional caption renders italic beneath the image; optional alt text supports screen readers (defaults to caption when not set). The 'cover' fit crops the image to fill the card; 'contain' letterboxes it. Use this widget when you want an image styled with the same chrome (border, radius, shadow) as your other widgets, or when your host environment doesn't render bare image URLs reliably.

FAQ

Questions, answered.

What image URLs work?

Any URL the browser can fetch directly — JPEG, PNG, WebP, GIF, SVG. Use a CDN-hosted image for best performance. Hotlinking from sites that block hotlinking (Pinterest, Instagram) won't work; upload to a CDN like Cloudinary or Imgur first.

What's the difference between Cover and Contain fit?

Cover (default) crops the image to fill the entire card, possibly cutting edges. Contain letterboxes the image so the whole picture is visible with empty bars around it. Use Cover for hero photos where filling the frame matters; use Contain when you don't want to crop (logos, screenshots, full diagrams).

Why use this instead of pasting an image directly?

Three reasons: (1) Notion and some other tools render embeds with iframe chrome you can style consistently with the rest of your widgets. (2) The widget's caption + alt-text fields give you accessibility metadata. (3) Image-embed cards line up visually with other WidgetCraft widgets in a stack.

Is the alt text required?

It's strongly recommended for accessibility. If you don't set alt text, the widget falls back to the caption text, then to an empty string. For production embeds always provide a meaningful alt text describing what the image shows.

Can I link the image somewhere?

Not directly — Image Embed renders the image, not a click target. To make an image clickable, wrap it in a link in your host page (Notion's '/embed' block doesn't proxy clicks, but a markdown link in your page can wrap the embed). For a true clickable image, use a CTA Button instead with the image-styled accent.

Is this widget free?

Yes. WidgetCraft widgets are free to embed and customize. The image hosting cost is yours (we just render the URL you provide).

Related widgets

W-009 · creator
GitHub
Four variants in one widget — single repo (detailed or compact), or trending repos by stars (top-N list or single hero). Time window + language filter for the trending variants.
W-012 · creator
YouTube Subs
Official subscriber count, total views, and video count.
W-024 · creator
Bio
Photo + name + tagline + optional role/location. The hero block of any showcase, link-tree, or portfolio Mizu.
Customize colors, fonts, and layout in the builder — preview live, copy the embed URL, paste anywhere.
Open in BuilderView all widgets