component

TuxCaptionedMedia

Single image (or video frame) embedded inline in body content with a structured caption + credit. Four aspect ratios, three alignment treatments. For galleries, use TuxPhotoGrid; for video embeds, drop an <iframe> into the #media slot — the wrapper handles aspect ratio.

canonical

16:9 · full width

Figure 3The 412-mile continuously-instrumented freight corridor under construction during the Q3 2025 deployment window.TTI Photography · 2025
<TuxCaptionedMedia
  alt="Connected vehicle test track at Rellis Campus"
  eyebrow="Figure 3"
  caption="The 412-mile continuously-instrumented freight corridor under construction during the Q3 2025 deployment window."
  credit="TTI Photography · 2025"
/>

aspect ratios

16:9 / 4:3 / 1:1 / 3:4

Pick the ratio that matches the source. 16:9 for video frames and landscape photography, 4:3 for editorial portraits of buildings or crews, 1:1 for product shots and close-ups, 3:4 for environmental portraits.

16:9 — video frames, landscape photography
4:3 — editorial photography, the institutional default
1:1 — product shots, close-ups, social-shareable
3:4 — environmental portraits, faculty photos

align="right" · pull-right pattern

In flowing prose

Pass align="right" to float the figure to the right column with text wrapping around it. Drops back to full-width below 48rem viewports.

On siteField crew during the 2024 reconstruction window.J. Hassan · 2024

Roadway departure crashes account for more than half of rural fatalities, and the persistent geographic distribution of these events points to enduring infrastructure conditions rather than transient driver behavior. TTI's twelve-county before/after study began in 2020, with reconstruction work staggered across three field seasons.

Each treated intersection received high-friction surface treatment, retroreflective markings, and a chevron alignment package; control intersections received only routine maintenance. Compliance gains held steady through the 36-month follow-up window.

Three of the twelve treated sites also showed measurable reductions in late-night crashes — a secondary outcome that the team is investigating in a follow-on dissertation project.

video embed

#media slot

The #media slot replaces the image with whatever you pass — <iframe>, <video>, SVG, custom canvas. The aspect ratio + caption rhythm stay consistent.

<iframe src="https://www.youtube.com/embed/...">
DemoPlaceholder video frame — drop in a YouTube/Vimeo iframe via the #media slot.TTI MovementLab

props

Props reference

  • src + alt — image URL + alt text. If src is omitted, renders a labeled gradient placeholder.
  • eyebrow, caption, credit — structured caption parts.
  • aspect — "16/9" | "4/3" | "1/1" | "3/4". Defaults to "16/9".
  • align — "full" | "wide" | "right". Defaults to "full".
  • tone — placeholder gradient tone. Defaults to "maroon".
  • #media slot — replace the image with arbitrary media (iframe, video, SVG).