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, optional preview via image.display when Are.na provides one

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).

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: preview image if present, download row, optional description.

  • 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 if present, file name link.

  • 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 + file name link.

  • 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.

  • 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 + file link.

  • Timeline

    Vertical timeline with created_at on each entry.

    • Same broad pattern as Blog: image / text / link card / media / attachment, with dates 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, 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.

  • 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.

  • 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 + 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, title or file name, description.

Home · About