Dope theme customize main page layout

Themes
1

I’m new to Ghost, I’m using the Dope theme and I’m trying to modify the layout of the main page to show 2 tags on devices with a screen width of 768, and 4 tags on a screen width of 1024. I found this post, and tried editing the code for the file assets/js/main.js and using the command ghost restart afterward. However, it doesn’t seem to change the layout for me at all.

Any help would be greatly appreciated. Thanks!

Original code…

function tagFeed() {
    'use strict';
    var count = $('.tag-feed').attr('data-count');

    $('.tag-feed').owlCarousel({
        dots: false,
        nav: true,
        navText: [
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M26.667 14.667v2.667h-16l7.333 7.333-1.893 1.893-10.56-10.56 10.56-10.56 1.893 1.893-7.333 7.333h16z"></path></svg>',
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M5.333 14.667v2.667h16l-7.333 7.333 1.893 1.893 10.56-10.56-10.56-10.56-1.893 1.893 7.333 7.333h-16z"></path></svg>',
        ],
        responsive: {
            0: {
                items: 1,
                slideBy: 1
            },
            1024: {
                items: count > 1 ? 2 : count,
                slideBy: count
            },
            1920: {
                items: count > 2 ? 3 : count,
                slideBy: count
            },
            2560: {
                items: count > 3 ? 4 : count,
                slideBy: count
            },
        }
    });
}

My changes…

function tagFeed() {
    'use strict';
    var count = $('.tag-feed').attr('data-count');

    $('.tag-feed').owlCarousel({
        dots: false,
        nav: true,
        navText: [
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M26.667 14.667v2.667h-16l7.333 7.333-1.893 1.893-10.56-10.56 10.56-10.56 1.893 1.893-7.333 7.333h16z"></path></svg>',
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M5.333 14.667v2.667h16l-7.333 7.333 1.893 1.893 10.56-10.56-10.56-10.56-1.893 1.893 7.333 7.333h-16z"></path></svg>',
        ],
        responsive: {
            0: {
                items: 1,
                slideBy: 1
            },
            768: {
                items: count > 1 ? 2 : count,
                slideBy: count
            },
            1024: {
                items: count > 3 ? 4 : count,
                slideBy: count
            },
        }
    });
}
2

The actual javascript used by the theme is the compiled one found in assets/built/main.min.js

Even if you change the source file assets/js/main.js it won’t automatically update the compiled file. To do that, you need to run a build command.

To run the build command:

  • from the terminal, navigate to the theme folder
  • run the command npm install
  • run the command npx gulp build

Reload your browser and check the changes. You don’t need to restart Ghost.

Note: You only need to run npm install the first time, on subsequent changes you only need to run npx gulp build

2 Likes
3

Oh, I knew I was missing a step. Thanks, that worked!
Much appreciated.

2 Likes