CMS Development

Shaykoo
Participante

Slider images are not showing in the page

resolver

Hi, We have created image gallery in our template but it's not showing in the pages made from that template. The thing I have noticed is that when we edit page the images are showing up there but when we save it and go to the page the images are not showing up.

 

this is the preview link https://www.fylehq.com/lp/ccr?hs_preview=OBNOZhFz-6625838298 

and I want the slider to be under 'Credit cards done the right way', 

and this is the design manager link : https://app.hubspot.com/beta-design-manager/3906991/templates/6600483432

 

 

0 Me gusta
1 Soluciones aceptada
dennisedson
Solución
Equipo de producto de HubSpot
Equipo de producto de HubSpot

Slider images are not showing in the page

resolver

@Shaykoo,

you can create a folder in design manager for the js.  then you can create new files and copy the code into the files.

once you have them saved, you should see them as an option in the design manager sidebar "Linked Javascript Files"

You can add that way

Design_Manager___HubSpot.png

 

 

or, you can find the file in the left sidebar and right click the file and select copy public url and add that to the html with which you are working

Design_Manager___HubSpot_and_Slack_-_HubSpot_Developers.png

Ver la solución en mensaje original publicado

7 Respuestas 7
dennisedson
Equipo de producto de HubSpot
Equipo de producto de HubSpot

Slider images are not showing in the page

resolver

@Shaykoo, is this resolved?

ps:  nice design with subtle animations 🙂

0 Me gusta
Shaykoo
Participante

Slider images are not showing in the page

resolver

No, @dennisedson actually the slider is working now because I removed the nav bar from the template. The JS and CSS file from navbar is conflicting with the template's script hence blocking the template's js.  

 

these are some script tag placed in the custom html of the nav bar which the brower is not able to find 

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/matchMedia.min.js"></script>
<script src="js/matchMedia.addListener.min.js"></script>

 

I have all the files locally but dont know where to put it, where is the js folder to upload all these files so hubspot can also locate them .

0 Me gusta
dennisedson
Solución
Equipo de producto de HubSpot
Equipo de producto de HubSpot

Slider images are not showing in the page

resolver

@Shaykoo,

you can create a folder in design manager for the js.  then you can create new files and copy the code into the files.

once you have them saved, you should see them as an option in the design manager sidebar "Linked Javascript Files"

You can add that way

Design_Manager___HubSpot.png

 

 

or, you can find the file in the left sidebar and right click the file and select copy public url and add that to the html with which you are working

Design_Manager___HubSpot_and_Slack_-_HubSpot_Developers.png

Asfand_EW
Participante | Partner nivel Elite
Participante | Partner nivel Elite

Slider images are not showing in the page

resolver

Thank you

0 Me gusta
Designer_WOT
Colaborador

Slider images are not showing in the page

resolver

Hello @Shaykoo,
            There are 2 problems in your page.
            1. Display:none css given in global slider class
            2. Images are added without lazyload plugin so the actuall images are not appearing as they should be so please add below code in Additional <head> markup located in right side of template.

For First Bugfix

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


For Second Bugfix

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


Kindly accept this as solution if it helps !

Thanks

0 Me gusta
Shaykoo
Participante

Slider images are not showing in the page

resolver

@Designer_WOT Hey, I tried putting 

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

but the page is showing 3 images stacked vertically , there is no sign of slider there. And I put  

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

but nothing is working as it is supposed to be. @Designer_WOT could you please check again one more time where to put the js you have sent. 

0 Me gusta
Shaykoo
Participante

Slider images are not showing in the page

resolver

@Designer_WOT No buddy, this isn't working for me. See the problem is the slider is showing up in the 'Edit page' but when we save it , it's not showing up in the published page. 

0 Me gusta