Documentation

Blocks and templates

When you publish a site, tiny.garden pulls every block from your Are.na channel, normalizes it into one of five types, and your chosen template decides how that data is laid out on the page. Block order follows your channel on Are.na.

Templates are Handlebars partials; this page describes the behavior users see in the browser.

From Are.na to block types

Are.na blockSite typeWhat the template reads
Imageimagetitle, description, image sizes (display for most layouts, original where noted)
Texttexttitle, description, content (HTML from Are.na)
Linklinklink.url, link.title, link.description, link.thumbnail (often from preview image)
Media, Embedmediaembed.html (iframe or embed markup), title, description — both Are.na Media and Embed blocks become this type
Attachmentattachmentattachment.url, file_name, display_name, alt_text, attachment.kind, attachment.extension, attachment.preview_url, attachment.has_visual_preview

Every block also carries metadata such as id, position, created_at, and a link back to Are.na. Templates use these fields only when they need them (for example, dates on Timeline, or comment count on Feature Requests).

Attachment blocks also expose normalized display metadata so templates can show cleaner labels: attachment.display_name (title/description first, then file name) and attachment.alt_text.

Attachments now include file-type metadata for richer rendering: attachment.kind, attachment.extension, attachment.preview_url, and attachment.has_visual_preview. This enables templates to render GIF/image, video, and PDF previews while falling back gracefully for model files (such as STL/OBJ) and other non-previewable formats.

By template

  • Blog

    One article-style card per block, with headings and lead copy where the template supports it.

    • Image: display size, title, description.
    • Text: optional title, HTML body, optional description below.
    • Link: optional thumbnail, link title and description inside one clickable card.
    • Media: embed, optional title and description.
    • Attachment: supports richer previews by file type (image/GIF, video, PDF); model and unknown files fall back to label + download.

  • Portfolio

    Sparse, gallery-oriented layout; favors large imagery.

    • Image: original-resolution URL, caption from block title only.
    • Text: HTML body only (no separate title line in the partial).
    • Link: thumbnail, title, and description in a horizontal card.
    • Media: embed only.
    • Attachment: preview image/video/PDF when possible, title/description-aware label fallback.

  • Feed

    Tight tiles; block title appears as a shared caption when set.

    • Image: display size.
    • Text: HTML body.
    • Link: optional thumbnail and link title; block title (if any) is shown as caption for every block type at the bottom of the tile.
    • Media: embed.
    • Attachment: preview + title/description-aware label (fallback to file name), with file-type awareness.

  • Gallery

    Masonry-style column grid of thumbnails; each block opens in a full-screen dialog with image (or embed) and description, similar to a museum wall label.

    • Image: display in the grid; large (or display) image in the dialog; block title and description; date and Are.na link.
    • Text: compact “Text” tile; dialog shows title, optional description, and full HTML body.
    • Link: thumbnail or title fallback in the grid; dialog shows image, link title, descriptions, and an “Open link” action.
    • Media: scaled embed in the grid; full embed plus title, description, and source link in the dialog.
    • Attachment: preview image/video/PDF or display label in the grid; dialog includes download and file-type fallback behavior.
    • Uses the native HTML dialog element and loads copy from each block’s template fragment (no extra network request).

  • Slideshow

    Each block is one full slide.

    • Image: original URL, caption from block title.
    • Text: centered HTML.
    • Link: uses block preview image (image.display) when available, not always the same as link.thumbnail; caption links out with link title.
    • Media: full-slide embed.
    • Attachment: preview + download control, including video and PDF when available.

  • Blank

    Minimal markup — useful as a starting point for custom CSS.

    • Image: display size.
    • Text: raw HTML.
    • Link: plain anchor with link title.
    • Media: raw embed HTML.
    • Attachment: optional preview + title/description-aware file link; model/archive files show safe fallback.

  • Timeline

    Vertical timeline with clean UTC date/time labels on each entry.

    • Same broad pattern as Blog: image / text / link card / media / attachment, with dates rendered as YYYY-MM-DD HH:mm (24-hour UTC) at the top of each entry.
    • Link: card with thumbnail, link title, and link description.

  • Document

    Long-form reading; figures link to the full-size image.

    • Text: optional title, then HTML body.
    • Image: optional title, figure linking to image.original, figcaption from block description.
    • Link: optional block title, then card with thumbnail, link title, description, and visible URL.
    • Media: optional title, embed.
    • Attachment: optional title, preview image/video/PDF, download row.

  • Homepage

    Landing page: hero, link list, then supporting blocks.

    • All Link blocks render in the hero as a simple text list (link title or URL). They are not repeated in the section below.
    • The first Image block is used as the full-viewport hero background (via original URL when available) and is hidden from the content list below.
    • Below the fold, the block partial covers image, text, media, and attachment only (same shapes as other templates, without link).

  • Shop

    Product-style sections: big imagery, description copy, CTAs.

    • Image: original URL and optional caption from title.
    • Text: product-style HTML body.
    • Link: prominent button using link title or “View Link”, optional description as subtext.
    • Media: embed.
    • Attachment: preview + download, with media/PDF rendering when source allows embedding.

  • Campaign

    Marketing sections with strong titles and descriptions.

    • Image: display with data attribute for full original; title and description.
    • Text: title and HTML body.
    • Link: card with thumbnail, link title, link description.
    • Media: title, embed.
    • Attachment: preview + download, with richer previews for video/PDF/image attachments.

  • Presentation

    Slide deck: one block per slide.

    • Image: original in a figure, optional figcaption from title.
    • Text: HTML on a slide.
    • Link: card with image.display, link title, and URL line.
    • Media: centered embed.
    • Attachment: constrained preview for image/video/PDF + large download control.

  • Feature Requests

    Each block is a card linking to the block on Are.na; comment count is shown as votes.

    • Image: title, description, and thumbnail image.
    • Text: title plus HTML body, or description if there is no body.
    • Link: prefers block title/description, falls back to link title/description; the card does not surface the URL (whole card goes to Are.na).
    • Media: only title and description — embed HTML is not rendered in this template.
    • Attachment: preview when available, title/description-aware label, description.

  • Library (proposed)

    Finder-like knowledge browser for document-heavy channels, with stable reading and predictable metadata.

    • Two-pane layout: left for sections/filters, right for document preview and metadata.
    • Prioritizes text, link, and attachment blocks; image/media blocks become supplementary references.
    • Attachment labels should prefer title/description before falling back to file name.
    • Dates should stay clean and sortable in UTC using YYYY-MM-DD and optional HH:mm (24-hour).
    • Designed for research teams, archives, policy/legal docs, and internal knowledge bases.

Home · About