CMS-Pages-Editor

Add images to an image gallery module

Last updated: December 3, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Legacy Marketing Hub Basic
HubSpot CMS

Use an image gallery module to showcase images on your site. Learn how to add slides to an Image Slider module and customize your style settings.

  • In your HubSpot account, navigate to your blog, landing pages, or website pages.
  • Hover over the page or post with the image slider module that you want to update, then click Edit.
  • Click directly on the image slider module in the content editor or click the module icon in the left sidebar and select the Image Gallery module from your module list. 
  • In the left pane, click + Add to insert a new slide into your image gallery.
    • Click Select image to select an image from your computer or your file manager.
    • Click to toggle the Show caption switch on to display a caption below this image. Then, use the rich text editor to enter your caption.
    • To link the image to a webpage, add a Link URL.
    • After you've made your selections, click Back to Image Gallery.
  • Hover over a slide and click the pencil icon edit tto add a slide image and edit its caption and URL:
    • Click Replace to replace an image from your computer or your file manager.
    • Click Remove to remove the image.
    • Click to toggle the Show caption switch on to display a caption below this image. Then, use the rich text editor to enter your caption.
    • Enter any Alt text that you want to include.
    • To link the image to a webpage, add a Link URL.
    • After you've made your selections, click Back to Image Gallery.

edit-slide

  • To delete a slide from your image gallery module, hover over an existing slide and click the trash icon delete.
  • To reorder your slides in your image gallery module, click on a slide and drag and drop it into place.

reorder%20slides

After you've added your images for your image gallery, you can customize your module options in the left sidebar editor:
  1. Display mode: choose which type of slider you'd like to appear on the page. You can choose a standard slider; a slider with thumbnail images for your visitors to navigate between; or a lightbox gallery, which allows users to click on a thumbnail to open a lightbox and navigate between the full size version of your slides. 
  2. Loop slidesclick to toggle on to automatically repeat your slides.
  3. Auto advance: click to toggle on if you want your slides to automatically scroll on your page.
  4. Time in seconds between auto-scrolling: use the arrow keys to indicate the number of seconds in between slides.
  5. Show navigation buttonsclick to toggle on to add indicators to the bottom of the slider to show visitors how many slides there are and which one they're currently viewing. 
  6. Variable height: use the dropdown menu to select whether you'd like your slider to remain as tall as the tallest slide, or resize automatically with each image.
  7. Slide transitions: choose which visual effect (Slide or Fade) you'd like to see when transitioning between slides.
  8. Caption Position: if you choose to show captions on your slides, choose whether you'd like these captions to be superimposed on top of your images or displayed beneath the images. 

image-gallery

  • Click the Styles tab at the top of the module editor to access your settings for your image gallery module:
    • Customize the Font family, Font sizeText colorText alignmentLine height, and Styles for your image gallery captions.
    • Set the padding and margins around your image gallery images and thumbnails. Click the Uniform checkbox to set the same amount of spacing around each image.
    • Specify the background color and styling of the image gallery module itself. Click Apply to see your changes reflected on the module in the editor.

image-gallery-styles

  • After you've added your images and style settings, click Save and go to module list
  • Click Publish or Update to take your changes live. 

Was this article helpful?

If you still need help you can get answers from the , or to contact support.