TOP

Using Slick Slider for Your Website's Photo Gallery

You can use the Slick Slider as part of your template in order to create a photo gallery on your winery's website. This tool is automatically integrated with all of WineDirect's latest templates. If your winery is working with a template using the older Nivo Slider plugin, or if you haven't had any slider code implemented, you may need to add it. If you're unsure which template your winery is using, you can contact us at support@winedirect.com to find out.

You can learn how to integrate the Slick Slider at the bottom of the page. 

There are 2 photo gallery types; one for your regular pages, and one for your homepage. Galleries for pages can be created and inserted on pages via components. You can learn more about how to do this here. The homepage feature gallery is unique for every site, requiring some extra steps. 

1. Setting up your gallery

To create a gallery, go to Content Editor > Components > Photo Gallery and, on the right hand side, click Manage Photo Galleries, then Add a Photo Gallery


 

2. Gathering gallery information

Once your gallery is created in the admin panel, you will need to grab the size and gallery ID and save that information into your scripts file under the home photo gallery section. 

 

3. Adding the gallery location

A call to the photo gallery now needs to be added in your template layout file (ex. home.htm). Include the div below where you would like the photo gallery to be rendered. 

<div class="#slider"></div>

Note: Make sure to parse your HTML file through the Designer Launch tools to ensure that the changes take effect. 

 

4. Adding photos to your gallery. 

To add photos to your gallery, go to Content Editor > Components > Photo Gallery > Add a Photo

Give the photo a title and an order and make sure to select the correct gallery. 

After photos have been added to your gallery, it is now ready to go. 

Integrating Slick Slider with the WineDirect Photo Gallery

If Slick Slider isn't already integrated, or you'd like to update from the older Nivo Slider tools, you can follow the steps below to add it to your template.  

1. Including files in the html

In order to implement a Slick Slider with the WineDirect photo gallery, we need to include a few custom files into your page layout.

You can grab all of the Slick files needed here. After downloading, upload the entire "slick-winedirect" folder to your site's assets folder (www/assets) through the FTP. If you have a folder titled "nivo" in the assets folder, you can delete that since it will no longer be needed. 

Generally, we include them with our other css and js files in our templates with the v65:css and v65:js tags so they get time stamped. Your tags in your template files should look something like this:

<v65:js files="/assets/slick-winedirect/slick-winedirect.js,/assets/js/scripts.js"></v65:js>
<v65:css files="/assets/slick-winedirect/slick-winedirect.min.css,/assets/slick-winedirect/slick-theme-winedirect.min.css,/assets/css/screen.css"></v65:css>

2. Calling Slick Slider in your scripts file

Include a call to the Slick Slider in  assets/js/scripts.js file so the gallery loads. The functions will look like the ones in this this file. If you have functions that look like this your scripts.js file already, replace them with these updated ones.