Skip to content
Landing Pages

Edit an image gallery module

Last updated: August 30, 2021

Applies to:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Legacy Marketing Hub Basic

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
add-image-to-image-gallery
  • To edit an existing slide, hover over it and click the pencil icon edit. 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 delete.
  • To reorder slides, click a slide, then drag and drop it into place.

reorder-image-gallery-slides

  • 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.
  • 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.

image-gallery-settings-loop-slides

  • 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

image-gallery-navigation-buttons