Skip to main content

This tutorial will show you how to create a gallery component in Umbraco 8 and how to change the settings to become a slideshow. Umbraco 8 also allows you to use an entire media folder for galleries instead of adding each photo individually, which we will also highlight. 

Creating a Gallery

Step 1: On the page you want to add a gallery, click the down arrow and select the 3 dots by “Components,” and click “Gallery.”

Step 2: Name your gallery and adjust the settings. 

 

For slideshow gallery setting instructions, follow steps 3-4

For stagnant gallery setting instructions, follow step 5.

 

The content settings for the gallery folder will be the same for both types of galleries. 

 

Slideshow Gallery

 

Step 3: 

  • Choose how many photos you want to show at a time during the gallery slide show. For this example, we’ll use one. 
  • Choose the image style. 
  • Click yes to “Enable Carousel”
  • Click yes to “Show Arrows”
  • Set the auto-rotate speed. You may need to fiddle with this, but for this example, we’ll set it at 3.5 seconds. 
  • Click yes to “Box Pad” if you want your photos to fit the image style you selected earlier. 

(You can click yes to show dots if you want your visitors to visualize how many photos you have in your gallery show).

You can also set a background color if you want your gallery to pop against your page’s background. 

Step 4: Choose a component width and click yes to “Animate.”

Stagnant Gallery 

 

Step 5: Choose how many items you want per row and the image style. You can choose a background color to make your gallery pop against the color of the page here as well.

Creating a Gallery from a Media Folder

Step 1: Scroll down to the “Content” section and click “Add Content.” You can choose a gallery image, video, or folder.

For this example, we’ll show you how to use the gallery media folder. This works best if all the images you want to show in your gallery are already in one folder in the media tab.

Step 2: Select “Gallery Media Folder.” A sidebar will appear, instead of clicking one image, you can select an entire folder. Then press “select.”

After you press select, you’ll see the folder here:

Step 3: Press save and publish. Then preview the gallery on your site.  

Slideshow Gallery Final Product:

Stagnant Gallery Final Product:

About the author

Smartly Done

Tampa, Florida

1600 E 8th Ave
Suite A200
Tampa, FL 33605

813-476-6581
smartlydone.com

Idaho Falls, Idaho

545 W 19th St
Idaho Falls, ID 83402

208-497-0700
//mws.dev