Create a Photo Gallery Module

A photo gallery helps you display your photos in an organized way, separating them by categories. A photo gallery is a type of module that you can use when creating or modifying a calendar. The following steps will show you how to create a photo gallery module from scratch.

Screen_Shot_2017-06-19_at_9.02.59_AM.png


Adding a Photos Module

All modules should be built inside the managers folder under /web files/managers/ to make them easy to find and access. Each module should have its own folder within this directory. Click here for more information on how to add a folder.

Step 1

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

Screen_Shot_2017-06-19_at_8.53.57_AM.png


Step 2

Name your calendar and select "Photos" from the dropdown menu. This will auto-populate standard HTML fields for your photo gallery as well as turning on photo gallery attachments so you can begin adding photo galleries and photos right away.

Screen_Shot_2017-06-19_at_9.07.07_AM.png

Note: If you would like to customize your photo gallery module and designate your own HTML fields, select "custom" from the drop down menu. In order to create a custom photo gallery you will need to create a form using one of the three methods below and upload your form prior to clicking submit.
  • Table schema
  • Select a form previously created with the form builder
  • Upload an HTML form

Click here to learns more about creating a calendar and adding forms.


Adding a Photo Gallery

Now that you've created a photo gallery module, it's time to create your first photo gallery.

Step 1

Click 'Add Entry' as shown below.

Screen_Shot_2017-06-19_at_9.11.07_AM.png

The default 'photo gallery' HTML fields will appear as shown below so you can begin adding entries immediately.

Screen_Shot_2017-06-19_at_9.28.36_AM.png


Step 2

Name your photo gallery, provide a description of the photo gallery, and finally upload a photo for the gallery itself prior to clicking Save. Once you have clicked Save, scroll down in your entry and open the "Attachments/Gallery" panel. 

Screen_Shot_2017-06-19_at_9.31.46_AM.png


Step 3

Start uploading images to your gallery. You can upload as many images as you want at the same time. After uploading them, the page is going to refresh. 

Screen_Shot_2017-06-19_at_9.40.15_AM.png

You can go back to the Attachments/Gallery tab and add a Description and Rank your photos, as well as previewing or deleting them and uploading more images. Click Save.

In order for the description and rank to be saved you have to click on the Save link underneath each description and rank.

Note: Each entry you add to your Photo Gallery Module is a separate photo gallery although they will all appear on the same page of your website. The entry we added above created one photo gallery called "Travel", simply repeat this process to add more photo galleries to your website.

Adding a Repeater Template

Now that we have created a photo calendar, we need a place to display it. We need to do that by creating a repeater template and add it to an STML page.


Step 2.1

On the same folder you created the Photo Gallery Calendar, add a File. From the Actions Menu hover on Add and select File by clicking it.


Step 2.2

Name the file and add the .tpl extension at the end of the file name.

The file of the name should be written in lowercase and with no spaces. Add a dash (-) between words. For more information on adding a File, please go here.


Step 2.3

We need to write the code to make our entries show. Please refer to the Shortcodes section to find more information on this topic.

This next step needs some developing knowledge (HTML and CSS min.)

For a Photo Gallery is recommended to use the Modules Pager shortcodes due to the amount of entries we would end up having in this type of Module. Pager allows you to have filter dropdowns, search and pagination.


Step 2.4

Add the code below to your repeater file.

[repeater id="112" limit="0,4"]
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="resources-item" onclick="location.href='{{path}}'">
<div class="resources-category-image"><img alt="{{name}}" src="[get_asset_file_url id={{gallery_image}}]" /></div>

<div class="resources-description">
<p>Published: [print_date format="F d, Y" start_time="{{start_time}}"]</p>

<h4>{{event_title}}</h4>
</div>
</div>
</div>
[/repeater]
</div>
  • On [category_filter category_group_id="" all_value=" "] you need to add the category_group_id="" to the one corresponding to your category group. Each ID is unique.
  • On [js_pager data_source_id="" data_source="calendar" filter_parameters="page,rows,table_filter,date_filter,category_filter"] you need to add the data_source_id="" for the one corresponding to your Module ID.
  • Our code uses curly brackets to display the elements on the page. Refer to the form you uploaded to the Calendar to find the html fields corresponding.

You can find the ID of the calendar by clicking on Update Calendar as indicated on the picture below. Same with Categories.

Calendar ID

Step 2.5

Once you have added your code, click Publish to make it live.

Screen_Shot_2017-06-19_at_10.20.51_AM.png


Step 3 - Adding an Index STML

Step 3.1

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

Template

Step 3.2

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


Step 4 - Adding a Detail Page

In the case of a Photo Gallery, we need to create a detail page to display all of the images from each gallery.

Step 4.1

To do this we need to add a file on the Photo Gallery folder where we created the Module, name the file, and add the following code.

[entry]
<div class="gallery-intro">
<h1>{{name}}</h1>

<p>{{gallery_intro}}</p>
</div>

<div id="imagesContainer">
<div id="images" title="images">[calendar_entry_attachments_repeat id="{{calendar_entry_id}}"]
<div class="col-md-3">
<div class="fg-listItem">
<div style="overflow: hidden; border-color: rgb(189, 195, 199); padding: 3px; background-color: rgb(245, 245, 245);">
<div class="fg-thumbnail-container" style="height: 190px; overflow: hidden;"><img alt="" class="fg-thumb" src="[get_asset_file_url id='{{{asset_file_id}}}']" style="display: block; max-width: none; height: 190px; opacity: 1;" /></div>

<div class="fg-title fg-title-outside" style="color: rgb(44, 62, 80); width: 100%; display: none; background: rgb(245, 245, 245);"></div>
</div>
</div>
</div>
[/calendar_entry_attachments_repeat]</div>
</div>

[/entry]

Step 4.2

Once you have added your code, click Save. The file will be save but you need to go back and Publish it to make it live.

Step 5 - Adding a Detail STML

Step 5.1

We need to create an stml to include our detail. On the www folder where you created the index.stml for the repeater, add another stml and call it detail.stml. Select a template from the Template drop-down and Save it.

Step 5.2

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


Step 6 - Adding Categories

Categories are optional but help you organize your modules. To add Categories, go to the folder where you created the Photo Gallery, hover on Add from the Actions Menu and click on Datatable Category Group. Name your Category Group and click Submit. Start adding your categories. For more information on Category Group, click here.

Category


Step 7 - Mapping your Module and Categories

For our pages to know where to get the entries from, we need to map them in three different places.

Step 7.1

First open the Photo Gallery module that you created on step 1, click on Modify and open the Website Properties tab.

Modify

Step 7.2

Find Detail Page Template selector as shown below and click on Browse and another page with the list of folders and files will open. Select the detail.stml file from the www folder, go to the top on the page, click Ok and you will be redirected to the previous page. Notice that the HTML Template field has a number that corresponds to the ID of the detail.stml.

Next to the Detail Page Template field is the Detail Folder Location field. Click on Browse and a modal with a list of folders will open. Select the folder which contains your modules index.stml and detail.stml pages and click Ok.

Screen_Shot_2017-06-19_at_10.56.27_AM.png

Step 7.3

Open the Advanced Options tab and under Categories click on Browse. Select the Category Group previously created and click Ok on the top of the page. Now that we have mapped our file and category to the module, we can click Submit at the bottom of the page.

Step 7.4

Go to the Category Group you previously created and click on Modify. Open the settings tab and click on Browse under HTML Template.

Modify

Step 7.5

Select the index.stml you created on step 3, go to the top of the page and click Ok. Then click Submit.

Update Category


Styling your Photo Gallery

Add the CSS below to the main stylesheet of your website.

 

photos.css

   /* ==================================
# Photos Index Page
================================== */
.resources-item {
-webkit-user-select: auto;
background: #f6f6f6;
cursor: pointer;
margin: 30px 0;
padding: 7px 7px 20px;
text-align: center;
}
.resources-item .resources-category-image {
height: 140px;
overflow: hidden;
}
.resources-description h4 {
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
font-family: "open sans condensed", sans-serif;
}
.resources-item .resources-description p {
margin-top: 20px;
font-size: 13px;
}
.photos-page.filter-bar {
margin-top: 100px;
}
.input-group #table_filter.form-control {
border-radius: 0;
border-color: #ccc;
line-height: 20px;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
background-color: #fff;
}
.photos-page.filter-bar input#table_filter {
height: 45px;
border-radius: 0;
line-height: 22px;
border-color: #ccc;
}
.input-group-btn #searchBtn {
height: 45px;
padding: 0 16px;
font-size: 1.4rem;
background-color: #00bff3;
color: #fff;
}
.form-group .selectize-input {
height: 45px !important;
border-radius: 0;
}
.form-group .selectize-input .item {
line-height: 26px;
}
.photos-bottom-section ul.pagination {
float: right;
}
.photos-bottom-section #pagingTotal.news-results {
margin-top: 0;
text-align: center;
}
.photos-bottom-section .news-filter {
margin-top: 5px;
}
.photos-blue-border {
margin-top: 30px;
}
.photos-bottom-section {
margin-bottom: 80px;
}
.pagination>li:last-child>a,
.pagination>li:last-child>span {
border-radius: 0;
}
.selectize-input.items {
border-radius: 0;
}
/* ==================================
# Detail
================================== */
.photos_filter {
margin-top: 30px;
padding-left: 30px;
}
.gallery-intro p {
padding-bottom: 20px;
}

/* ==================================
# Media Queries
================================== */
@media screen and (max-width: 1200px) {
.resources-item .resources-description p {
margin-top: 0;
}
}

@media screen and (max-width: 991px) {
.resources-category-image img {
width: 100%;
}
.resources-item .resources-description p {
margin-top: 20px;
}
}

@media screen and (max-width: 767px) {
.resources-item .resources-category-image {
height: 200px;
}
}
@media screen and (max-width: 480px) {
.news-filter .items {
text-align: left;
}
#pagingTotal p {
padding-top: 0;
}
}

Congratulations! If you followed all the steps correctly, your Photo Gallery should look like the image below:

Screen_Shot_2017-06-19_at_9.00.54_AM.png

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request