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.
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.
- 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.”
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:
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!