Dope theme lazyload images

Themes
1

I have about 5 tags loading images on the main page of the dope theme and I’m trying to optimize the site’s load time by lazyloading the off-screen images. It seems like the dope theme is using the owl carousel javascript to render the elements on the page but I’m not familiar enough with js and website development to understand the error I’m seeing.

Based on this documentation I should be able to add lazyLoad:true, to the function in the assets/js/main.js file and update the index.hbs to include the class owl-lazy and change the img src to data-src. However when I make those changes and restart ghost, the site doesn’t load any images.

Any help would be appreciated, Thanks!

changes I made to main.js…

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

    $('.tag-feed').owlCarousel({
        lazyLoad:true,
        dots: false,
        nav: true,

changes I made to index.hbs…

{{#foreach tags}}
        <div class="tag u-placeholder">
            <img class="tag-image u-object-fit owl-lazy" data-src="{{#if feature_image}}{{img_url feature_image}}{{else}}{{@site.cover_image}}{{/if}}" alt="{{name}}">
2

[Same as your other question]

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

3

I’m sure this will work too. Thanks!

1 Like