Slider Images added to Image Gallery Module Embedded in Template are not showing in Landing Page

SOLVE
sbraiden
Participant

In adding an Image Gallery module to a landing page template, I am able to add new sliders in edit, but they do not appear in the actual landing page.  I am able to add new sliders and edit them, and see them in the options panel, but they do not appear in the actual landing page preview nor when published.

 

I found a thread that suggests this may be a conflict with other javascript assets that might be loading in the global modules:

 

https://community.hubspot.com/t5/CMS-Development/Slider-images-are-not-showing-in-the-page/td-p/2205...

 

I went ahead and added both the CSS and JS bugfixes into the template's Additional <head> markup that @Designer_WOT suggested:

 

To override the Display:none css given in global slider class ...

 

<style>
.hs_cos_gallery .slick-slide { display:block; }
</style>

and, to correct images being added without lazyload plugin:

 

<script>
    $(window).on('load',function(){
        $('img[data-lazy]').each(function(){
            $(this).attr('src',$(this).attr('data-lazy'));
         });
    });
</script>

 

These fixes do, infact, then display the images.  The problem is they are all displaying rather than being loaded in a carousel:

 

https://www.inspirehub.com/en-us/our-clients-2020

 

It seems odd that a HubSpot module simply doesn't work without adding bugfixes, which is why I'm thinking it's likely a conflict with other assets, or that I need to be explicitly calling some other JS assets in the template.

 

Has anyone else encountered this and found a way to solve it?  Thanks a bunch for any suggestions folks might be able to offer!

 

Gratefully,

Sue.

0 Upvotes
1 Accepted solution

Accepted Solutions
stefen
Solution
Key Advisor | Partner

@sbraiden if you look in your browser's console log, you can see there are multiple JS issues on the page. The main one being "flexslider is not a function" which means the flexslider javascript file is not being loaded on the page or not being loaded in the proper order. I'm guessing this is the plugin being used under the hood: http://flexslider.woothemes.com/ — you could try adding the js file from the website to your page and see if it fixes the issue.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

3 Replies 3
sharonlicari
Community Manager

Hey @sbraiden 

 

Thank you for the information provided. I'll tag a few experts Emoticono feliz

 

Hey @bschneidewind @david_eic @stefen   do you have any thoughts you'd like to share with @sbraiden 

 

Thank you

Sharon


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


stefen
Solution
Key Advisor | Partner

@sbraiden if you look in your browser's console log, you can see there are multiple JS issues on the page. The main one being "flexslider is not a function" which means the flexslider javascript file is not being loaded on the page or not being loaded in the proper order. I'm guessing this is the plugin being used under the hood: http://flexslider.woothemes.com/ — you could try adding the js file from the website to your page and see if it fixes the issue.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

sbraiden
Participant

Thank you, @sharonlicari for bringing this to attention with folks who could assist, and @stefen for taking the time to offer help in so much detail!  I'm very grateful!

 

I assumed since the Image Gallery was a module that what it needed to function was intact.  I should have used inspect and the debugging console to look under the hood myself.  🤦  While I'm not seeing the FlexSlider errors there are definitely issues with the revolution slider assets not  being called properly. We've got a general clean-up going on today to weed out some of the older assets and lighten the load.

 

No doubt I'll be tucking in a note shortly to say the problem has been resolved.  Thanks so very much for the generosity of your help!

 

Sue.