Logo Carousel - Open in a new tab

[Chrissy]

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 %}

[davidls7]

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. 



- David

[Chris-M]

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

[davidls7]

Hi Chris, 

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

- David

[Chris-M · Accepted solution]

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.

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 

[Chrissy]

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!