Kentico 101: Create an Image Slider in Kentico Portal
The goal of this blog post is to give you a quick and easy tutorial on creating an image carousel in Kentico Portal.  If you are new to Kentico, this quick step-by-step guide will walk you through creating a new page type, using a repeater web part, creating a transformation, and adding Javascript to a page through the Kentico Portal engine. 

Creating a Kentico New Page Type

The first step in creating an image slider in Kentico is to create a new page type that will act as a container for each image. These new page types will be placed as children of the page that the slider will be placed on. The repeater in conjunction with the transformation that we write will grab all of these children (the images) and place them inside of a div element within the DOM. We will then use a library called Slick to give us the functionality of the slider. This library is great because it provides many options to customize the slider to your specific requirements. 
  1. Navigate to the Page types application in the Kentico Admin interface.
  2. Click on ‘New page type’ to create a new page type.
  3. Give your new Page type a display name, namespace, and name.
    • Here at BizStream, we like to prepend our page type display names with “*”. This puts all of our custom page types to the top of the list anytime page types are listed out in Kentico. It also is a quick way for us to tell that it is a custom page type that we created and is not a default Kentico page type.
  4. In step 2 of creating a new page type just click ‘Next’. 
  5. In step 3 we will be creating fields for the new page type. These fields will be present in the Form tab when viewing the page in the Pages application in Kentico.
  6. We will be creating two required fields for this page type: ImageName and ImageFile. 
    • ​The first field is a simple Text box for the image name which will also be used for the page name in the content tree.Kentico ImageName Screen Capture
    • The second field will be a Media selection. This will allow us to select an image from a media library to use in the slider.Kentico ImageFile Screen Capture
  7. In step 4 select the ImageName as the Page name source. 
  8. In step 5 select the Page type that you will be placing the slider on as a parent type.
  9. The remaining steps you can click ‘Next’ on each. 
  10. Now navigate to the Pages application in Kentico and select the page in the content tree that you will be placing the slider on. 
  11. Click the + button above the content tree to create a new page. Select your slider image page type. Select ‘Use parent page template’.
  12. Now fill out the fields with the image name and select an image from the media library. 
  13. Repeat steps 11 - 13 until you have a few images.

Adding Kentico Web Parts 

Our next step will be to add a Repeater web part and a transformation to this web part on the page that you want the image slider to display on. This will grab all the child pages that we previously created that contain the images. 
  1. Navigate to the Design tab of the page that will have the image slider on it. Drag a repeater web part to the location you would like the image slider to be, within a Web Part Zone. 
  2. Next, we will configure the repeater. Kentico Web Part Properties (Repeater) Screen Capture
  3. Give the repeater a title in the “Web part title” field. In the Path field add “./%’, this is a path expression that tells Kentico to grab all of the child pages under the page that the repeater is on (Note: depending on the structure of your content tree, you may want a different path expression). Select the SliderImage page type in the page types field.
  4. Enter 1 for the Maximum nesting level. This tells Kentico to only go one level deep in the content tree.
  5. Within the ‘HTML Envelope’ section add the following HTML to the `Content before` textbox: <div class=”image-slider”>
  6. Close the div tag in the ‘Content after’ textbox: </div>
  7. Next click ‘New’ next to the Transformation field. 

Creating a Transformation

In the transformation for the image slider, we are going to write some XML that will be used for each image in the image slider. As a quick overview, what the repeater and transformation are doing is grabbing each child page type and placing the ImageFile property as the source of an HTML <img> tag for each image. 
  1. After you have clicked ‘New’ next to the Transformation field within the repeater settings, give the transformation a name. Kentico Transformation Properties Screen Capture
  2. In the text area create an image tag with the source attribute set to the property name of the field that you used to upload an image. In this case, the name of the Field is ImageFile. 
  3. Click ‘Save’ and close the Transformation properties window.
  4. Click ‘Save & Close’ on the repeater properties window. 
  5. You should now see all of the images that you added to the child pages, on the parent page within Kentico Preview mode. These will not be styled yet, but at least we have them all displayed on the page. 

Adding JavaScript through the Kentico Portal Engine

The next step will be to include the Slick library, along with some other dependencies, into your project. If you click on the link above you will see how to use the Slick library. It is very simple to use, yet gives you several customization options. 

Note: In the Slick docs, all of the dependency files for Slick are included in the project example. In this tutorial we are are going to use  CDNs for all of the dependencies. You are free to use whichever method you deem most appropriate for your project. 

Script Screen Capture

1. Navigate to the root page of your site within Kentico and click on the Master page tab. In the textbox within the <head> tag, add the following code: 
<script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
<script
    src="https://code.jquery.com/jquery-migrate-3.0.1.min.js"
    integrity="sha256-F0O1TmEa4I8N24nY0bya59eP6svWcshqX1uzwaWC4F4="
    crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
These script tags contain the CDN URLs for jQuery, jQuery migrate, and the Slick Javascript file. Be sure to include the scripts in this order.

Note: In order for Slick to work in our situation, the scripts for jQuery, jQuery-migrate, and Slick need to be placed before the script for requireJS. If your project is not using requireJS, then you can include the above code immediately before the script in step 8. This will be located just before the closing <body> tag. Refer to the Slick docs for an example of this implementation. 

2. Next, navigate to the design tab on the page within Kentico that is going to display the image slider. 
3. Add a Head HTML Code web part to the page and double click on it to configure the web part. 
4. Within the HTML code text field add the following code: 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
5. These HTML <link> tags contain the CDN URLs for the Slick CSS file and Slick-Theme CSS file. 
6. Add a Javascript web part as the last web part on the page. Make sure that it is after the Image Slider Repeater. 
Kentico Web Part Properties (JavaScript) Screen Capture

7. In the Javascript web part, ‘Startup script’ should be selected for the ‘In-line script page location’ input. This option will load the Javascript after everything else on the page has loaded. This ensures that the element, $(‘.image-slider’) is present in the DOM and that the Javascript will not block the page from loading.  
8. Add the following code to the ‘In-line script’ textbox:
<script type="text/javascript">
    $(document).ready(function () {
         $('.image-slider').slick({
              <options>
         });
    });
</script>
9. You can customize the options of slick however you prefer. Refer to the Slick docs for demos of image sliders with the various options. 
10. Important: Be sure to uncheck ‘Generate script tags’ since we included the script tags in our code already. 

Image Slider Example in Kentico Portal Site

That is all there is to it! Now all the Kentico content editor has to do it add a new * Image Slider page type as a child to the page in the content tree that contains the image slider repeater, and then that image will be apart of the image slideshow.  Stay tuned for more Kentico 101 tutorials!

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Kentico posts
Start a Project with Us

About the author

Tyler began his career in healthcare but quickly realized he was missing out on the creativity and logical aspect that computer programming provides. Shortly after that realization, Tyler decided to pursue his long-running interest in coding as a career, and he loves every second of it! Outside of BizStream, you can find Tyler backpacking, coding up a new project at home, playing video games, or exploring new breweries with friends. 

View other posts by Tyler

Subscribe to Updates

Stay up to date on what BizStream is doing and keep in the loop on the latest with Kentico.