Node.js 6.x Blueprints

Adding the Gallery script

As we can see, the default Keystone.js theme is very simple and uses only the Bootstrap framework. Now we will use a jQuery plugin called Fancybox to apply a new style in our gallery.

Tip

You can get more information about Fancybox at the official website: http://fancybox.net/.

1. Open templates/themes/newBlog/layouts/default.swig and add the following highlighted code inside the head tag:

         {# Customise the stylesheet for your site by editing
          /public/styles/site.sass #} 
         <link href="/styles/site.css" rel="stylesheet"> 
         <!-- fancyBox --> 
         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs
           /fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> {# This file provides the default styling for the KeystoneJS Content Editor ...