Create a Logo Carousel

A customer logo carousel allows you display a rotating series of images - in this case, a series of customer logos. Nothing shows potential customers your credibility more than a stream of company logos sliding across your homepage. This immediately shows your audience that you know that you're doing and companies rely on you for your product and/or service. The following steps will show you how to create a logo carousel module from scratch in Solodev.

This tutorial utilizes Slick Slider by Ken Wheeler. You can use any slider you want, but will have to ensure you include all of the necessary resources, both in the CMS itself and in the template files.


Adding Logo Carousel 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 logo carousel module. Hover over the Add button and select Calendar.

Add Calendar


Step 2

Name your calendar and select 'Custom' from the type of calendar dropdown. You need to create a form using one of the three following methods:

  • 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.

For purposes of this tutorial, we have provided the form code. The code below will add the appropriate fields to the module. First you will need to save this code to your computer. Either use a text editor such as Sublime, or Text Edit. Save the file as a simple text document with .tpl at the end of the file name such as "carousel-form.tpl".

Form.tpl

<label class="control-label">Client Logo</label>
<input type="file" name="client_logo" class="form-control">

<label class="control-label">Alt</label>
<input type="text" name="client_logo_alt" class="form-control">

<label class="control-label">Client Link</label>
<input type="text" name="client_link" class="form-control">

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

In doing so, the form you've just uploaded will automatically create the table schema for the module and allow you to add entries.


Adding Logos

Now that you have created your logo carousel, its time to add logos.

Step 1

Open your logo carousel manager by clicking on that module in the left hand file tree. In the actions menu select Add Entry.


Step 2

Add an image, alt text, and the URL to which you would like the view to go (If viewer clicks on logo). Once finished filing out the fields click Save.


Upload Slider Resources

In order to render the carousel and ensure all of the desired functionality is implemented, it is necessary to add any resources to Solodev CMS. Generally, these resources can include JavaScript, jQuery, and CSS files, however it varies from slider to slider. With Slick Slider, you only have to upload the following JavaScript file.

Step 1

Save carousel.js to your local machine. This is a primary file which allows the slider to work. For your convenience, the source code for this file is below:

carousel.js

window.onload=function(){
$(document).ready(function(){
$('.customer-logos').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2
}
}]
});
});
}

Step 2

Upload the JavaScript file to Solodev. Open the same folder into which you added the customer carousel manager. Hover over the Add button and click File. Click on the Folder Icon to the right of the "Name" field so that you can browse your computer for the file. Once you have located the file, select it, and then click Submit.


Adding Repeater

The repeater template will generate the code to repeat all customer logos. This generally goes into the page file, but it ultimately depends on the website structure. For this case, it will go into the page file.

Step 1

Open the same folder into which you added the logo carousel manager. Hover over the Add button and click File.


Step 2

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

The file name should be written in lowercase with no spaces. You can add a hyphen (-) between words. Click here for more information on adding a file.

We need to add the code to make our customer logos appear.

For the purposes of this tutorial, however, we have provided a repeater template for this tutorial. Add this code to the folder that contains the logo carousel module you created. Copy the code below and make the edit that is required to pull the ID of the correct module.

Repeater.tpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="carousel.js"></script>
<link rel="stylesheet" type="text/css" href="carousel.css">

<div class="container">
<div class="customer-logos">

[repeater id="14" limit="0,8" type="calendar"]

<div class="slide">
<img src="[get_asset_file_url id={{client_logo}}]"/>
</div>

[/repeater]

</div>

Note - the only thing that needs to be edited in this code, is the following section:

[repeater id="14" limit="0,8" type="calendar"]

The repeater id="" needs the ID of the logo carousel manager. Open the logo carousel manager and look for the ID at the top left under the name of the module. Place the ID number inside the quotes ("").

The image below outlines where to find the ID of the module.

Note - The JavaScript file you uploaded is referenced in this code. It is included with links relative to this file. This will change if the resource or the repeater template are not peers of one another in Solodev.


Step 3

If you haven't already, create an index page that will hold your repeater template. Click here to learn more about adding a page.

Navigate to the index page that will contain your repeater template. In order to place the file into your STML, you need to select the Dynamic Div in which you’d like to place it by clicking on it. Once it turns blue, select the file from the left hand file tree and hit Publish.


Adding CSS Styling

Everything done right now achieves the objective of getting the carousel working and placed on a specific page. While, optional, it is highly recommended that you apply CSS styling to make the carousel look sharp and professional. Below is some sample styling you can add to your stylesheet that will apply to the slider:

/* Slider */
.slick-slide {
margin: 0px 20px;
}

.slick-slide img {
width: 100%;
}

.slick-slider
{
position: relative;

display: block;
box-sizing: border-box;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list
{
position: relative;

display: block;
overflow: hidden;

margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track
{
position: relative;
top: 0;
left: 0;

display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;

content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}

.slick-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;

height: auto;

border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}

Congratulations! If you followed all the steps correctly, your customer logo carousel should be in place and working.

Your customer logo carousel should look something like the following hierarchy, with all necessary assets:

Your customer logo carousel should look like this on your user-facing website.

 

0 Comments

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