topic Re: Logo Carousel - Open in a new tab in CMS Development

Logo Carousel - Open in a new tab

Chrissy — Wed, 23 Sep 2020 21:44:29 GMT

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!

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

Re: Logo Carousel - Open in a new tab

Chris-M — Thu, 24 Sep 2020 07:50:47 GMT

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

Re: Logo Carousel - Open in a new tab

davidls7 — Thu, 24 Sep 2020 09:56:16 GMT

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

Re: Logo Carousel - Open in a new tab

Chris-M — Thu, 24 Sep 2020 08:59:31 GMT

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

Re: Logo Carousel - Open in a new tab

davidls7 — Thu, 24 Sep 2020 09:54:06 GMT

Hi Chris,

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

- David

Re: Logo Carousel - Open in a new tab

Chrissy — Thu, 24 Sep 2020 16:20:13 GMT

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!