Building a Photo Gallery with Solodev


Graphics have taken on an increasingly central role to online content and the need for interactive and beautifully designed photo galleries has never been more prevalent.

Building a Photo Gallery with Solodev

Solodev Required

This tutorial covers building a photo gallery module in Solodev using shortcodes. Sign Up for a 14 Day Free Trial today to follow along with this tutorial!

Note: To learn more about creating a photo gallery module in Solodev, check out our in-depth technical documentation.

Graphics have taken on an increasingly central role to online content and the need for interactive and beautifully designed photo galleries has never been more prevalent. In this article we will show you how to build a photo gallery for your website using Solodev Shortcodes.

Step 1 - Create your Photo Gallery Module

Open the folder to which you want to add your client module. Hover over the Add button and select Calendar.

Calendar Selection

Note: You can add a module to any location within the Solodev system; however, we recommend creating a dedicated "modules" folder inside the "web files" directory in order to keep all of your modules organized and easy to find.

For enterprise users, we suggest creating your modules inside your "Data Center" directory.


Step 2 - Upload your Photo Gallery Form

The code below will add the appropriate fields to your photo gallery module. First you will need to save this code to your computer as a simple text document with .tpl at the end of the file name such as "photo-gallery-form.tpl".

Step 3

Click on Upload Form and select the file you just saved.

Upload Form

Step 4

Open the Website Properties Tab and check the Enable Photo Gallery checkbox. Then click Submit.

Enable Photo Gallery


Adding a Detail Template

Now that we have created a photo calendar, we need a place to display it. We need to do that by creating a detail template, adding it to an STML page, and modifying our Photo Gallery module.


Step 5 - Copy and paste the code below into a new file called detail.tpl inside your module folder

Step 6 - Add an index.stml page to place your detail

We need to create an STML to include our detail. On the www folder, create a folder for the Photo Gallery and click Add->STML from the Actions Menu. Name your file detail.stml and choose a template from the template dropdown. Click Save to submit the changes.

Add Index.stml page

Step 7 - Add your detail template to index.stml

Click on a Dynamic Div and click on your detail.tpl file from the left nav to add it to the stml. Click Publish.

Add detail template to index.stml

Step 8 - Update your Photo Gallery Calendar to reference the new detail.stml page

We need to update the gallery calendar so that it can reference the detail.stml page created in the above step. Navigate to your calendar and click on the modify button. The "Update Calendar" screen will appear and open up the Website Properties tab. Enter the "STML Template (Detail Template)" field with the actual detail.stml file you just created and enter the "Asset Category Map Anchor (Folder Anchor)" with the parent folder of that detail.stml. Click the "Submit" button when those fields are populated.

Update Photo Gallery Calendar

Step 9 - Add your entries

Now that you have created your module and the detail page for it to display your photos, it is time to add your photos to the module. Go to your Photo Gallery Calendar and from the Actions Menu select Add Entry.

Add Entries

Step 10 - Fill out your form fields

Add a Title and fill the rest of the fields, i.e. Introduction, Gallery Image, Gallery Image Description. Click "Save" when done.

Fill out form fields

Step 11 - Add images to your photo gallery

Saving your entry is going to enable the Gallery images and Comments tabs. To add images to your gallery, click on the Gallery Images accordion tab and start uploading your images. You can upload as many images as you want at the same time. After uploading them, the page is going to refresh. You can go back to the Gallery Images tab and add a Description and Rank your photos, as well as previewing or deleting them and uploading more images. Click Save.

Add images to Photo Gallery

After adding a few entries, this is how the calendar grid should look like.

Calendar Grid

NOTE: The URL for each entry is dependent upon (1) the name of the entry and (2) the "Asset Category Map Anchor" defined in Step 8. For example, the entries above would have the URL of "yourwebsite.com/photo-gallery/travel.stml", "yourwebsite.com/photo-gallery/environment.stml", "yourwebsite.com/photo-gallery/design.stml", and "yourwebsite.com/photo-gallery/architecture.stml".

Step 12 - Add the CSS below to your website's main stylesheet

If you followed the steps above correctly, your photo gallery should appear as it does below.

Gallery

Congratulations! You've successfully built your first module in Solodev! To learn more about building modules in Solodev, check out our in-depth documentation!

Learn More

Author

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.