Skip to the 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 Websites

Smartly Done Websites

Smartly Done Websites offers an affordable way for you to work with professionals, designers, programmers, and writers, to help you customize your new website to best suit your needs.

How does this work?

Is this a good fit for me?

Read our frequently asked questions to see if a Smartly Done website is a good fit for you!

We'd love to hear from you

Don't be shy!

Do you have questions?  We'd love to visit with you! Give us a call at (208) 497-0700 or fill out the form and we will contact you.  Hit us with your questions. We can give you a quick demo of our solution, or we can just visit so you can get a good feel for how you'd like working with us. We are a friendly, no-pressure bunch. Reach out!

The 'First name' field is required
The 'Last name' field is required
Please enter a valid Email address