# SW Text and Media — AI Agent Reference **Primary purpose: Stacked layout module with optional foreground video and optional headings.** Use when you want **media above** rich text in a **single column** (like **SW Image & Text**), but you may need **foreground video** (not only a module background), **optional State 3 headings** above the body copy, or **Media Border** styling for the foreground asset. **vs SW Image & Text:** **SW Text and Media** covers the same baseline (stacked image + text, module background, content colors, content area alignment). **SW Image & Text** remains valid for existing pages; for **new** bands, **prefer SW Text and Media** — **SW Image & Text** is expected to be **deprecated in a future theme cycle**. **Capability summary (AI):** “Stacked block: optional foreground image **or** video **or** neither; optional heading repeater; then rich text. Not for side-by-side columns.” **Looking for side-by-side image + content?** Use **SW Pillar Section**. --- **Module name:** SW Text and Media **Use this document when:** The user asks about the SW Text and Media HubSpot module — media mode, foreground video, headings repeater, content area, alignment, background, spacing, or how it differs from **SW Image & Text**. --- ## Instructions for the AI Agent - **Unless the user explicitly provides you with direct HubSpot CLI access, assume you have no access to HubSpot.** Answer **only** from this document (and any other docs the user has provided). - **Configuration:** When the user asks how to change something, tell them exactly **where to go** in the module (tab names, group names, field labels) and what to select or enter. Use the **exact** names given in the "Configuration Reference" below. - **Not configurable via the module:** If the request cannot be done with module fields, say so clearly. Then direct the user to **custom CSS** in their theme's **`custom-styles.css`** (typical for Sprocket Rocket–based themes). Use the "Appendix: CSS Classes and Selectors" when possible. - **Support and bugs:** **https://smithworks.marketing/contact** --- ## Support and Bug Reports - **Contact:** [smithworks.marketing/contact](https://smithworks.marketing/contact) --- ## HubSpot video and file uploads (plans and limits) Foreground **Video** mode and **module background video** may use **HubSpot Video**, **Video from files** (File Manager), and/or **external embed** (YouTube, Vimeo, etc.). - **HubSpot Video:** Often requires subscription features for hosted video; confirm hub type/tier if missing. - **Video from files:** File Manager limits (e.g. **~20 MB** per file on lighter hubs) — compress, reduce resolution, or use **External embed**. - **External embed:** Paste a supported URL; usually no hosted-video product required. Verify current HubSpot limits in HubSpot’s help center. ### External embed: autoplay, mute, and size (YouTube / Vimeo) - **Autoplay** and **Muted** (under **Foreground video** when **Media mode = Video**, or under **Style → Module Background Settings** when the module background is video) are applied to **external** YouTube/Vimeo embeds loaded by the module script—not only to file or HubSpot-hosted players. - **Embed width and height:** When you set both in the HubSpot embed field (resize handles in the editor), the module uses them to limit **max width** and **aspect ratio** on the live page. If the embed still looks full width, confirm both dimensions are set in the field. - **Module background** external video remains full-bleed behind content; **width/height** on that embed mainly help the player API; **Autoplay** / **Muted** still apply to playback behavior. ### Image mode: display width - The **Image** group’s **width** (per breakpoint image, XL preferred then fallbacks) is used to cap how wide the **foreground** picture may appear (`max-width`), while staying responsive on narrow viewports. --- ## 1. Purpose and When to Use **Intent:** Theme-aligned **stacked** section: **foreground media** (image, video, or hidden) **above** optional **headings** and **Content Area** rich text. Shares **Module Settings**, **Module Background Settings**, **Content Colors**, **Content Area Settings**, and **Media Border** patterns with **SW Image & Text**, with **additional** foreground video and **heading_items** repeater. **Choose SW Text and Media when:** - You want **stacked** layout (not two columns). - You may need **foreground video** (YouTube/Vimeo embed, HubSpot video, or file) with poster and playback toggles. - You may need **one or more headings** (State 3 repeater) above the paragraph block without using a full **SW Pillar Section**. **Still use SW Image & Text when:** - The page **already** uses it and a swap is unnecessary — no migration required for existing instances. **Use SW Pillar Section instead when:** - Content needs **side-by-side** columns, bullets, multiple CTAs in-section, or alternating left/right bands. --- ## 2. Module Structure (top to bottom) 1. **Module background** (optional) — color, gradient, image, or video from **Style → Module Background Settings**; **Content → Module Background Video** when background is video. 2. **Inner container** — max width from **Module Settings**. 3. **Foreground media** (depends on **Content → Media mode**): - **Image:** 4-tier responsive **Image** group (same pattern as **SW Image & Text**). - **Video:** Foreground player/embed from **Foreground video** settings. - **None:** Skip media; headings/text only. 4. **Headings** (optional) — from **Content → Headings** repeater (add rows in the editor; default is **no rows**). 5. **Content Area** — rich text; **Content style** for typography. --- ## 3. Configuration Reference Tabs: **Content** and **Style**. Names below match the HubSpot editor. ### 3.1 Content tab - **Custom ID** / **Custom Classes** — optional wrapper attributes. - **Media mode** — **Image**, **Video**, or **None**. Controls whether the **Image** group or **Foreground video** group is used. - **Image** (group) — visible when **Media mode = Image** — XL / Desktop / Tablet / Mobile images and alignments (override toggles per breakpoint). **Remove** XL image to show no image. Image **width** from the field (XL first, then fallbacks) caps max display width on the page. - **Foreground video** (group) — visible when **Media mode = Video** — video type (HubSpot / file / embed), source fields, **Poster image**, **Autoplay**, **Loop**, **Muted**, **Plays inline** (as exposed in the module). For **External embed** (YouTube/Vimeo), **Autoplay**/**Muted** affect the injected iframe; set **width** and **height** on the embed field to control on-page size. - **Headings** — State 3 repeater; add items for H1–H6-style heading rows. Empty by default. - **Content Area** — rich text; leave blank to hide the text block. - **Content style** — typography: Default, Large (balanced), Large (full-width), Small, Blockquote (same family as **SW Image & Text**). - **Module Background Video** — when **Style → Module Background Settings → Background Option = Video** — source and poster (overlay/playback toggles live under **Style** for module background). ### 3.2 Style tab - **Module Settings** — spacing, max width, module height modes, vertical alignment, breakpoint overrides (same family as other SW section modules). - **Module Background Settings** — background option; when **Video**, overlay/base/playback toggles here; source in **Content → Module Background Video**. - **Content Colors** — text and **Link Colors** for the text region. - **Media Border** — border on the **foreground** image or video frame; **Override Media Border Radius** + **Media Border Radius** (internal field ids may still use `image_*` — follow **labels** in the editor). - **Content Area Settings** — text alignment desktop + optional tablet/mobile overrides. - **Headings** — heading text wrap / display options tied to the heading repeater (see in-editor labels). --- ## 4. Common Tasks - **Switch from image to video above text** — **Content → Media mode = Video**; set **Foreground video** source; optional poster. - **Remove media (headings + text only)** — **Content → Media mode = None**. - **Add a title above the paragraph** — **Content → Headings → Add**; configure level/text per row. - **Match old Image & Text behavior** — **Media mode = Image**; leave **Headings** empty; set **Image** and **Content Area** like **SW Image & Text**. --- ## 5. Appendix: CSS Classes (representative) - Module root: **`sw-text-media`** (plus modifiers such as background image/video flags). - Foreground embed wrapper may include **`sw-text-media__foreground--oembed`** for external video embeds. Use **Custom Classes** on the module wrapper for scoped overrides. --- ## 6. Document version - **Module master version:** see **Master version number** in `module.html` / `module.css` / `module.js`. - **This .txt:** aligned with Finish Up **2026.04.06.10.34** and **SW-MASTER-CHANGELOG.md**.