Logo Carousel - Open in a new tab

SOLVE
Highlighted
New Contributor

Hi there, I'm not sure why I'm not understanding this; I thought I had it figured out. However, it doesn't seem to work. I'm trying to modify this code so that a link in the carousel opens in a new window. I thought I could simply do this: 

 

{{ "<a href='" ~ slide.page_url ~"' target='_blank'>" if slide.page_url }}

 

Below is the original module.html -- any ideas?? I'm new to this. Thanks! 

 

{####################################
HubSpot Logo Carousel Module
#####################################
This module was provided as an easy
to implement option for users, and
also serves as a simple example for
developers to learn from & work with.
#-----------------------------------#}

{{ require_js("https://design-assets.hubspot.com/hubfs/Assets/Slick/slick.min.js", "head") }}
<base target="_blank"/>
{% if module.logos|map('image')|map('src')|join|length > 0 %} {# << Only create slider if at least 1 image is added #}
<div class="hs-logo-carousel">
{% for slide in module.logos %}
<div>
<div class="hs-logo-carousel__inner">
<img data-lazy="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
</div>
{{ "</a>" if slide.page_url }}
</div>
{% endfor %}
</div>
{% endif %}

{% require_js %}
<script>
$(document).ready(function() {
$('.hs-logo-carousel').slick({ {# << Slick slider settings go here #}
dots: {{ module.settings.show_dots }}, {# More info: http://kenwheeler.github.io/slick/ #}
arrows: {{ module.settings.show_arrows }},
autoplay: {{ module.settings.autoplay }},
infinite: true,
speed: {{ module.settings.scroll_speed }},
slidesToShow: {{ module.settings.logos_to_show }},
slidesToScroll: {{ module.settings.logos_to_scroll ? "1" : module.settings.logos_to_show }},
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: {{ module.settings.mobile_settings.logos_to_show }},
slidesToScroll: 1,
infinite: true,
arrows: {{ module.settings.mobile_settings.show_arrows }},
dots: {{ module.settings.mobile_settings.show_dots }}
}
}
]
});
});
</script>
{% end_require_js %}
{% require_css %}
<style>
.hs-logo-carousel__inner {
padding: 0 {{ module.settings.padding / 2 }}px;
}
</style>
{% end_require_css %}

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Top Contributor

Hi @Chrissy 

 

For a new tab your code looks fine, i just tried your code and it works, i changed 'code row' 16 with:

{{ "<a href='" ~ slide.page_url ~"' target='_blank'>" if slide.page_url }}

 

My links now opens in a new tab.

 

hubspotLink.PNG

 

Maybe you have some caching issues? Did you change anything else?

 

Could you send us a preview link?

 

 

Full Code:

{####################################
    HubSpot Logo Carousel Module 
##################################### 
This module was provided as an easy
to implement option for users, and 
also serves as a simple example for 
developers to learn from & work with.
#-----------------------------------#}

{{ require_js("https://design-assets.hubspot.com/hubfs/Assets/Slick/slick.min.js", "head") }}

{% if module.logos|map('image')|map('src')|join|length > 0 %}      {# << Only create slider if at least 1 image is added #}
<div class="hs-logo-carousel">
  {% for slide in module.logos %}
  <div>
    {{ "<a href='" ~ slide.page_url ~"' target='_blank'>" if slide.page_url }}
    <div class="hs-logo-carousel__inner">
      <img data-lazy="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
    </div>
    {{ "</a>" if slide.page_url }}
  </div>
  {% endfor %}
</div>
{% endif %}

{% require_js %}
<script>
  $(document).ready(function() {
    $('.hs-logo-carousel').slick({                                                   {# << Slick slider settings go here #}
      dots: {{ module.settings.show_dots }},                    {# More info: http://kenwheeler.github.io/slick/ #}
      arrows: {{ module.settings.show_arrows }},
      autoplay: {{ module.settings.autoplay }},
      infinite: true,
      speed: {{ module.settings.scroll_speed }},
      slidesToShow: {{ module.settings.logos_to_show }},
      slidesToScroll: {{ module.settings.logos_to_scroll ? "1" : module.settings.logos_to_show }},
      responsive: [
        {
          breakpoint: 767,
          settings: {
          slidesToShow: {{ module.settings.mobile_settings.logos_to_show }},
          slidesToScroll: 1,
          infinite: true,
          arrows: {{ module.settings.mobile_settings.show_arrows }},
          dots: {{ module.settings.mobile_settings.show_dots }}
         }
       }
      ]
    });    
  }); 
</script>
{% end_require_js %}
{% require_css %}
<style>
  .hs-logo-carousel__inner {
    padding: 0 {{ module.settings.padding / 2 }}px;
  }
</style>
{% end_require_css %}

- Chris 

View solution in original post

5 Replies 5
Highlighted
Solution
Top Contributor

Hi @Chrissy 

 

For a new tab your code looks fine, i just tried your code and it works, i changed 'code row' 16 with:

{{ "<a href='" ~ slide.page_url ~"' target='_blank'>" if slide.page_url }}

 

My links now opens in a new tab.

 

hubspotLink.PNG

 

Maybe you have some caching issues? Did you change anything else?

 

Could you send us a preview link?

 

 

Full Code:

{####################################
    HubSpot Logo Carousel Module 
##################################### 
This module was provided as an easy
to implement option for users, and 
also serves as a simple example for 
developers to learn from & work with.
#-----------------------------------#}

{{ require_js("https://design-assets.hubspot.com/hubfs/Assets/Slick/slick.min.js", "head") }}

{% if module.logos|map('image')|map('src')|join|length > 0 %}      {# << Only create slider if at least 1 image is added #}
<div class="hs-logo-carousel">
  {% for slide in module.logos %}
  <div>
    {{ "<a href='" ~ slide.page_url ~"' target='_blank'>" if slide.page_url }}
    <div class="hs-logo-carousel__inner">
      <img data-lazy="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
    </div>
    {{ "</a>" if slide.page_url }}
  </div>
  {% endfor %}
</div>
{% endif %}

{% require_js %}
<script>
  $(document).ready(function() {
    $('.hs-logo-carousel').slick({                                                   {# << Slick slider settings go here #}
      dots: {{ module.settings.show_dots }},                    {# More info: http://kenwheeler.github.io/slick/ #}
      arrows: {{ module.settings.show_arrows }},
      autoplay: {{ module.settings.autoplay }},
      infinite: true,
      speed: {{ module.settings.scroll_speed }},
      slidesToShow: {{ module.settings.logos_to_show }},
      slidesToScroll: {{ module.settings.logos_to_scroll ? "1" : module.settings.logos_to_show }},
      responsive: [
        {
          breakpoint: 767,
          settings: {
          slidesToShow: {{ module.settings.mobile_settings.logos_to_show }},
          slidesToScroll: 1,
          infinite: true,
          arrows: {{ module.settings.mobile_settings.show_arrows }},
          dots: {{ module.settings.mobile_settings.show_dots }}
         }
       }
      ]
    });    
  }); 
</script>
{% end_require_js %}
{% require_css %}
<style>
  .hs-logo-carousel__inner {
    padding: 0 {{ module.settings.padding / 2 }}px;
  }
</style>
{% end_require_css %}

- Chris 

View solution in original post

Highlighted
New Contributor

Thank you all for responding! I really appreciate it. I'm glad to learn that what I had was correct. It looked like it was a caching issue, it wouldn't work until I deleted another module I had in there that was competing with slider. It works!! I appreciate the assistance and review of the code. 

 

Thanks! 

0 Upvotes
Highlighted
HubSpot Employee

Chrissy, first off WELCOME!!!! Always great to see new people joining the community.

I checked out this and as it turns out we have an image slider that is easier to control from the page editor. We already offer the option to option slides in a new tab on a slide by slide basis. I have tested this a out in my own portal and you drop the image slider in place then explore the edit options. There is a toggle at the bottom that should help you solve for this. 

Let us know if this solution works for you. 

Open In New Tab Options.png

- David

David Leonard-Scully
0 Upvotes
Highlighted
Top Contributor

Hi @davidls7,

 

You are refering to the 'Image Gallery' Module.

 

@Chrissy is looking for the HubSpot Logo Carousel Module from the asset marketplace. I couldn't find the same display possibilities in the Image Gallery.

 

The Logo Carousel Module doesn't have an Open link in a new tab - Boolean

 

- Chris

Highlighted
HubSpot Employee

Hi Chris, 

Thanks for the flag, I upvoted you for your solution 🙂 

- David

David Leonard-Scully
0 Upvotes