Last updated: January 18, 2023
Available with any of the following subscriptions, except where noted:
All products and plans
|
Add an image gallery module to your content to display a rotation of different images. You can add links and captions to images in an image gallery.
Please note: an image gallery module cannot be added to a single blog post. Any image gallery modules added to a blog post template will appear on all blog posts.
Add or edit an image in an image gallery
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
- Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
- Hover over your content, then click Edit.
- In the content editor, click the image gallery module.
- In the sidebar editor, click + Add in the Slide section to add a new slide to the image gallery.
- In the Image section, click Upload to select an image from your computer or Browse images to select an image from the files tool.
-
- To display a caption below the image, click to toggle the Show caption switch on. In the rich text editor, enter the text of the caption.
- To add a link to the image, enter a URL in the Link URL section.
- To add more images, click Back to Image Gallery. To finish editing the image gallery module, click Apply changes.
- To edit an existing slide, hover over it and click the pencil icon Click Replace to select a new image or Remove to remove the image.
- To delete a slide, hover over an existing slide and click the trash icon
- To reorder slides, click a slide, then drag and drop it into place.
- Click Apply changes to see any changes in the content editor.
Customize image gallery settings
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
- Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
- Hover over your content, then click Edit. Edit.
- In the content editor, click the image gallery module.
- To change how visitors navigate between your slides, click the Display mode dropdown menu and select a mode:
- Standard slider: visitors will see one slide at a time and can click on left and right arrows to move between them.
- Thumbnail navigation: visitors can click on a thumbnail below the image gallery to display that slide in the gallery.
- Lightbox gallery: visitors can click on the thumbnail version of a slides to open a lightbox where they can navigate between the full versions of all slides.
- To automatically repeat the slides after all of them have appeared, select the Loop slides checkbox.
- To have the slides automatically progress, select the Auto advance checkbox.
- In the Time in seconds between auto-scrolling field, enter the number of seconds that each slide should display.
- To indicate the total number of slides and the number of the current slide, select the Show navigation buttons checkbox.
- To set the height of the image gallery, click the Variable height dropdown menu and select a setting:
- Variable height: the height of the image gallery will change depending on the height of the displayed slide.
- Fixed height: the height of the image gallery will always stay at the height of the tallest slide.
- To set the visual effect of the slide transitions, click the Slide transitions dropdown menu and select Slide or Fade.
- To set the position of captions relative to your slides, click the Caption position dropdown menu and select an option.
