Blog Post Featured Image
Display a featured image on a blog post.
Note: This module is only able to be used on the Blog Post template.
Content
- Pulls in featured image by default but a custom image can be used
Styles
- Have module overlap the section above or below it
- Include a load in animation (fade in, up, right, down, or left)
- Toggle image cropping
- If cropping, select the aspect ratio to use
How to Use This Module
The Blog Post Featured Image module serves as the primary visual element for your blog content, helping readers immediately connect with your article topic. Unlike standard image modules, this component is specifically designed to work seamlessly with HubSpot’s blog post template and automatically inherits the featured image you’ve set in your blog post settings.
When you drag this module onto your blog post template in the HubSpot page editor, it will automatically display the featured image you uploaded when creating or editing your blog post. However, you retain full flexibility to override this default behavior by selecting a custom image directly within the module settings, which is particularly useful when you want different images for your blog listing versus the individual post view.
Best practices for this module include positioning it near the top of your blog post template to create immediate visual impact. The overlap functionality works exceptionally well when placed after a header section, allowing the featured image to extend into the header space for a more dynamic, magazine-style layout that’s popular in modern web design.
The cropping options are especially valuable for maintaining consistent visual hierarchy across your blog. Since blog featured images often come in various dimensions, enabling cropping with a standardized aspect ratio ensures your blog maintains a professional appearance regardless of the original image proportions uploaded by content editors.
Consider using the load-in animations strategically based on your blog’s tone—subtle fade-in effects work well for professional content, while directional slides can add energy to lifestyle or creative blogs. The animation will trigger as readers scroll to the image, creating engaging micro-interactions that improve the overall reading experience.