# SW Blog Post Hero — AI Agent Documentation **Module path:** `smithworks-2025/sw-modules/SW Blog Post Hero.module` **Last updated:** 2026-02-18 --- ## 1. Overview SW Blog Post Hero is the hero/banner section on **blog post** pages. It shows the post’s **featured image** (or an override image), **title**, and optional **post meta** (tags, author line with date/time). It replaces the standard HubSpot Header Image and Page Title on the blog single post template. **Where it’s used:** Only on **blog post** templates (e.g. SW Blog Single Post). It is not used on blog listing or website pages. --- ## 2. Featured Image: Required and Recommended Size - **Featured image is required** for blog posts in HubSpot when using this module with the post’s image (i.e. when “Override banner image” is off). The module uses the blog post’s **Featured image** from the post settings. If the post has no featured image, the banner area may be empty or fall back to theme behavior. - **Ideal image size for optimized display:** **1280px × 640px**. This aspect ratio (2:1) gives the most consistent results for: - This module (blog post hero/banner) - Blog listing pages (e.g. SW Blog Cards) - Shared posts on social media (Open Graph / Twitter cards) Recommend that users set the blog post’s **Featured image** to 1280×640 (or equivalent 2:1) for best appearance across blog posts, listing cards, and social sharing. --- ## 3. Per-Post Settings vs. Default Settings - **When settings are changed on a specific blog post**, only that post is affected. Editing the SW Blog Post Hero on one post does not change any other post. - **To change the default settings that apply to all blog posts** (or to posts that have not had their hero edited), edit the **blog post template**, not individual posts: 1. In **Design Manager**, open the blog post template (e.g. **SW Blog Single Post**). 2. Click the **SW Blog Post Hero** module in the template preview. 3. In the module panel, set the desired values (title options, post meta toggles, banner spacing, height, image overrides, etc.). 4. Save the template. Those values are the **template default**. They apply to every blog post that does not have its own override. Changing the module’s default field values in code (e.g. `fields.json`) only affects new instances; for blog posts, the **template default** is what determines the default for all posts. --- ## 4. Configuration Reference The module has **Content** and **Style** tabs. Group and field names match the HubSpot editor. ### Content Tab - **Custom ID** / **Custom Classes** — Optional. - **Title** — Override title (on/off). When on: Heading, Size, Display Size, Align, Color, Custom Color, Text wrap (balance/auto/initial). When off, the blog post page title is used with theme defaults. - **Post meta** (blog post only) — Show tags, Link tags, Show author line, Show author date, Show author time. These control the line below the title (e.g. “Posted in: Tag1, Tag2” and “Posted by: Author on Date at Time”). - **Banner image** — Override banner image (on/off). When off, the post’s **Featured image** is used. When on: XL Banner Image; optional Override Desktop/Tablet/Mobile with per-breakpoint images. ### Style Tab - **Module Settings** — Spacing (margin/padding), module height (XL + Desktop/Tablet/Mobile overrides; **defaults to Default** for new instances), vertical alignment. Max width is hardcoded at 1800px (not user-editable). - **Module Background Settings** — Background Option (Theme Color, Custom Color, Gradient only; no Image/Video for this module). Default: Custom Color. Use to set background color for the banner/title block area. - **Banner spacing** — Spacing CSS, Override border radius, Border radius (px). **Banner height:** XL min/max (px); Override Desktop/Tablet/Mobile banner height with per-breakpoint min/max. Max 0 = no max (uses 60vh). Image crops from bottom when taller than max; min height leaves space when image is shorter. - **Content Colors** — Text Color and Link Colors for the title block (when Show post meta is on). Defaults: Theme defaults. Use when background is Custom Color or when theme cascade does not apply. - **Post Meta (Title Block)** — Spacing, Background Color, Override Border Radius, Border Radius (px), Border Color, Border Width. Controls the title block overlay styling (background, border) when Show post meta is on. --- ## 5. Common Tasks (“How Do I…”) - **Use the post’s featured image** → Style (or Content) → ensure **Override banner image** = OFF. Set the post’s **Featured image** in the blog post settings (1280×640 recommended). - **Use a different image for one post** → Edit that post → SW Blog Post Hero → **Override banner image** = ON → set XL Banner Image (and optional Desktop/Tablet/Mobile overrides). - **Show or hide tags/author line** → Content → **Post meta**: Show tags, Link tags, Show author line, Show author date, Show author time. - **Change the title (or size/color) for one post** → Edit that post → Content → **Title** → **Override title** = ON, then set Heading and/or Size, Display Size, Align, Color. - **Change default settings for all posts** → Design Manager → open **SW Blog Single Post** template → click SW Blog Post Hero → set values in the module panel → Save template. - **Change banner height or border radius** → Style → **Banner spacing**: Border radius override and Banner height (XL and optional Desktop/Tablet/Mobile overrides). - **Change module spacing** → Style → **Module Settings** → Spacing. - **Change title block background or border** → Style → **Post Meta (Title Block)** (when Show post meta is on): Background Color, Override Border Radius, Border Color, Border Width. - **Change title block text/link colors** → Style → **Content Colors** (when Show post meta is on): Text Color, Link Colors. --- ## 6. When to Use Custom CSS Use custom CSS when the change cannot be done via Content or Style fields (e.g. custom typography, overlay effects, or breakpoint behavior). Add overrides in the theme’s custom CSS (e.g. `custom-styles.css`). Use the CSS classes in the Appendix below. --- ## 7. Appendix: CSS Classes and Selectors | Element | Class(es) | Notes | |--------|-----------|--------| | Module wrapper | `.sw-blog-post-hero` | Plus `custom_classes` if set; `id` = Custom ID if set. | | Inner container | `.sw-blog-post-hero__inner` | Position relative, z-index 1. | | Banner (image container) | `.sw-blog-post-hero__banner` | Border radius from theme or Override border radius. | | Banner image | `.sw-blog-post-hero__banner-img` (or `picture`) | Min/max height from Banner spacing. | | Title | From theme heading classes | Size/display/align from Title group. | | Post meta | In content area below title | Tags and author line. | **Breakpoints:** Desktop ≥992px; Tablet 768–991px; Mobile ≤767px. Banner height can be overridden per breakpoint in Style → Banner spacing. --- ## 8. Document Version **Module:** SW Blog Post Hero (smithworks-2025). **Doc last updated:** 2026-02-18. **2026-02-18:** Content Colors; Post Meta (Title Block) styling; meta overlay z-index; Module Background Settings default. **2026-02-16:** Module height defaults to Default for new instances. **2026-02-12:** Max width hardcoded 1800px (not user-editable). **2026-02-10:** Initial AI documentation. Featured image required and 1280×640 recommendation; per-post vs template default settings; configuration reference; common tasks; CSS appendix.