Skip to main content

tweet-blockquote-outside.tmpl

This template generates the HTML structure for displaying Twitter/X post content in popups and transclusions with a element wrapping the entire content.

Pathtemplate/include/tweet-blockquote-outside.tmpl
LanguageHTML5/Pandoc
Lines20

Read this when Use this page when tracing the HTML/Pandoc templates and include fragments that shape rendered gwern.net pages around tweet-blockquote-outside.tmpl.

Overview​

This template generates the HTML structure for displaying Twitter/X post content with a <blockquote> element wrapping the entire content. This variant is registered as the default template in content.js's tweet content transform, used when the tweet is presented as quoted material outside a pop-frame (e.g., transcluded into a page); the tweet-blockquote-not variant is the popFrameTemplate used inside popups/popovers.

The structure is nearly identical to tweet-blockquote-not.tmpl, but the outer wrapper is a <blockquote> instead of a <div>. This subtle difference affects both semantic meaning (for accessibility and SEO) and default browser styling. The template includes rich metadata for author attribution, timestamps, link targets, and archived URLs.

The "outside" designation indicates that the blockquote wraps the entire content container, including both the attribution line and the tweet body. Like the other template/include/*.tmpl fragments, it is bundled into transclude-templates-GENERATED.js by build/build_unified_assets.php and filled client-side by the JavaScript transclude template system (content.js fetches the tweet content in the browser via a Nitter mirror).

Template Variables​

  • contentTypeClass - CSS class for content type styling (e.g., content-transform-tweet)
  • authorLinkClass - CSS class for the author link element
  • authorLinkHref - URL to the author's Twitter/X profile
  • whichTab - Text describing tab behavior (e.g., "a new", "the same")
  • tabOrWindow - Text "tab" or "window"
  • linkTarget - HTML target attribute value (e.g., _blank, _self)
  • authorLinkIconMetadata - Data attributes for icon/avatar styling
  • authorPlusAvatar - Author name with avatar image
  • tweetLinkClass - CSS class for the tweet timestamp link
  • tweetLinkHref - URL to the specific tweet
  • archivedTweetURLDataAttribute - Data attribute containing archived tweet URL
  • tweetLinkIconMetadata - Data attributes for link icon styling
  • tweetDate - Formatted date/time of the tweet
  • tweetContent - The main body content of the tweet

Output Structure​

The template produces this structure:

<blockquote class="content-transform [type-class]">
    <p class="data-field tweet-links">
        <a class="[author-class]"
           title="Open <author-url> in [which] [tab/window]"
           href="[author-url]"
           target="[target]"
           [icon-metadata]
        >[author+avatar]</a> on <a
           class="[tweet-class]"
           title="Open <tweet-url> in [which] [tab/window]"
           href="[tweet-url]"
           [archived-url-data]
           [icon-metadata]
        >[date]</a>
    </p>
    <div class="data-field tweet-content">[tweet body]</div>
</blockquote>

The <blockquote> wrapper provides citation semantics. Inside, the structure mirrors the non-blockquote variant: attribution metadata in a <p> tag followed by tweet content in a <div>.

Template caveat: The tweet link title attribute uses a malformed placeholder (<<{tweetLinkHref>>), so the tweet URL is not interpolated as shown in the example.

See Also