Making slideshow image a clickable link on Palo Alto

Highlighted
Excursionist
25 2 3

Hi,

There are some posts on this, but none for Palo Alto, so I thought I'd try making a new one (it's driving me crazy). I have been trying to make the Slideshow section both desktop and mobile images to work as a clickable link (rather than using a button).  I have quasi-gotten it to work. I have the field for the url and both the desktop and mobile images link to the page that I would like, but for some reason the mobile version is showing both the desktop and mobile images (vertically with the mobile on top). I've tried moving the </a>, adding the code to both the desktop image and mobile image sections and I cannot find a way for the link to work without also having the mobile image issue. Is anyone able to see what I'm doing wrong? I would really appreciate advice on how to correct this - Thank you, Kristin 

<!-- /sections/slideshow.liquid -->
 
{%- assign transition = section.settings.transition -%}
{%- assign autoplay = section.settings.autoplay -%}
{%- assign duration = section.settings.duration | times: 1000 -%}
{%- assign content_alignment = section.settings.content_alignment -%}
{%- assign slide_height = section.settings.slide_height -%}
{%- assign slides_count = section.blocks.size -%}
 
<div data-section-id="{{ section.id }}"
data-section-type="slider"
data-slides-count="{{ section.blocks.size }}"
data-autoplay="{{ autoplay }}"
data-duration="{{ duration }}"
data-image-height="{{ slide_height }}"
data-page-dots="{{ section.settings.show_nav_dots }}"
data-nav-arrows="{{ section.settings.show_nav_arrows }}"
data-transition="{{ transition }}"
data-slides="{{ slides_count }}">
 
<div class="slider slider--{{ transition }} {% if section.settings.show_arrow_down %}slider--has-arrow{% endif %} slider--{{ content_alignment }}">
{%- if section.blocks.size > 0 -%}
{%- if section.settings.show_nav_arrows and section.blocks.size > 1 -%}
<button class="slider__arrow slider__arrow--previous"><span class="custom-icon-arrow-right" aria-hidden="true"></span></button>
<button class="slider__arrow slider__arrow--next"><span class="custom-icon-arrow-right" aria-hidden="true"></span></button>
{%- endif -%}
 
<div class="slide-block">
<div class="flickity">
{%- for block in section.blocks -%}
 
{%- assign overlayOpacity = block.settings.overlay_opacity | times: 0.01 -%}
 
{%- if block.settings.slide_btn_link != blank -%}
{%- assign btn_link =  block.settings.slide_btn_link  -%}
{%- else -%}
{%- assign btn_link = "#" -%}
{%- endif -%}
 
{%- if block.settings.slide_btn_link_2 != blank -%}
{%- assign btn_link_2 =  block.settings.slide_btn_link_2  -%}
{%- else -%}
{%- assign btn_link_2 = "#" -%}
{%- endif -%}
 
<div class="item item--{{ block.id }} item--{{ block.settings.text_color }} {{ slide_height }} initial-slide js-section-container" {{ block.shopify_attributes }} data-slide-position="{{ forloop.index }}" data-style="{{ block.settings.text_color }}">
{%- if block.settings.slide_btn_text != blank or block.settings.slide_btn_text_2 != blank -%}
{%- endif -%}
 
<div class="overlay" style="opacity:{{ overlayOpacity }};"></div>
 
{%- if slide_height == 'original-height' -%}
 
{% comment %} Mobile image {% endcomment %}
{%- unless block.settings.image_mobile == blank -%}
{%- assign image = block.settings.image_mobile -%}
{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}
{%- include 'theme-rias' -%}
<div class="slide-image__container slide-image__container--mobile" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}">
<img
class="{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
data-src="{{ image_url_pattern }}"
data-widths= "[{{ image_widths }}]"
data-aspectratio="{{image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
<noscript>
<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
</noscript>
</div>
{%- endunless -%}
 
{% comment %} Desktop image {% endcomment %}
{%- unless block.settings.image == blank -%}
{%- assign image = block.settings.image -%}
{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}
{%- include 'theme-rias' -%}
                          {% if block.settings.image_link !=blank %}
                                          <a href="{{ block.settings.image_link }}">
                                    {% endif %}
<div class="slide-image__container slide-image__container--desktop" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}">
<img
class="{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
data-src="{{ image_url_pattern }}"
data-widths= "[{{ image_widths }}]"
data-aspectratio="{{image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
<noscript>
<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
</noscript>                                      
</div>
{%- else -%}
<div class="slide-image__container slide-image__container--desktop slide-image__container--placeholder">
{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
</div>
{%- endunless -%}
{%- else -%}
                                            </a>
{% comment %} Mobile image {% endcomment %}
{%- unless block.settings.image_mobile == blank -%}
<div class="slide--{{ block.id }} {{ block.settings.bg_position }} slide-background image-mobile{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
data-bgset="{% include 'bgset', image: block.settings.image_mobile %}"
data-sizes="auto"
data-parent-fit="cover">
</div>
<noscript>
<div class="slide--{{ block.id }} slide-background image-mobile" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
</noscript>
{%- endunless -%}
 
{% comment %} Desktop image {% endcomment %}
{%- unless block.settings.image == blank -%}
<div class="slide--{{ block.id }} {{ block.settings.bg_position }} slide-background image-desktop{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover">
</div>
<noscript>
<div class="slide--{{ block.id }} slide-background image-desktop" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
</noscript>
{%- else -%}
<div class="slide-background slide-background--desktop slide-background--placeholder">
{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
</div>
{%- endunless -%}
{%- endif -%}
 
<div class="slider-text-block js-section-content">
<div class="slider-text-block__wrapper">
<div class="wrapper wrapper--small">
{%- if block.settings.slide_heading != blank -%}
<h1 class="slide__heading main-heading size--{{ block.settings.heading_font_size }}">{{ block.settings.slide_heading | escape }}</h1>
{%- endif -%}
{%- if block.settings.slide_subheading != blank -%}
<h2 class="slide__caption main-subheading size--{{ block.settings.text_font_size }}">{{ block.settings.slide_subheading | escape | newline_to_br }}</h2>
{%- endif -%}
 
<div class="slider-cta">
{%- if block.settings.slide_btn_text != blank -%}
<a class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style }}" href="{{ btn_link }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text | escape }}</a>
{%- endif -%}
{%- if block.settings.slide_btn_text_2 != blank -%}
<a class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style_2 }}" href="{{ btn_link_2 }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text_2 | escape }}</a>
{%- endif -%}
{%- if block.settings.video_btn_text != blank -%}
<a class="video-text-link secondary-call-to-action" href="{{ block.settings.video_btn_link }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %} data-play-button>
<i class="custom-icon-play-button call-to-action-circle"></i>
<span>{{ block.settings.video_btn_text }}</span>
</a>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
{%- endif -%}
 
{%- if section.settings.show_arrow_down -%}
<a href="#" class="slider__scroll-down js-scroll-down" title="{{ 'homepage.onboarding.slideshow.scroll_down' | t }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>
{%- include 'icon-arrow-down' -%}
</a>
{%- endif -%}
</div>
</div>
 
{% schema %}
{
"name": "Slideshow LINK II",
"max_blocks": 10,
"class": "slideshow full-header",
"settings": [
{
"type": "header",
"content": "layout"
},
{
"type": "select",
"id": "slide_height",
"label": "Height",
"default": "one-hundred-height-hero",
"options": [
{
"value": "one-hundred-height-hero",
"label": "Full screen"
},
{
"value": "original-height",
"label": "Original"
},
{
"value": "seven-fifty-height-hero",
"label": "750px"
},
{
"value": "sixty-fifty-height-hero",
"label": "650px"
},
{
"value": "five-fifty-height-hero ",
"label": "550px"
},
{
"value": "four-fifty-height-hero",
"label": "450px"
}
]
},
{
"type": "select",
"id": "content_alignment",
"label": "Content alignment",
"default": "center",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" },
{ "value": "bottom-left", "label": "Bottom left" },
{ "value": "bottom-right", "label": "Bottom right" }
]
},
{
"type": "checkbox",
"id": "show_nav_dots",
"label": "Show slide navigation dots",
"default": true
},
{
"type": "checkbox",
"id": "show_nav_arrows",
"label": "Show slide navigation arrows",
"default": true
},
{
"type": "checkbox",
"id": "show_arrow_down",
"label": "Show down arrow",
"default": false
},
{
"type": "header",
"content": "Autoplay"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay slideshow",
"default": false
},
{
"type": "range",
"id": "duration",
"min": 2,
"max": 5,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 4
},
{
"type": "select",
"id": "transition",
"label": "Transition style",
"default": "slide",
"options": [
{ "label": "Slide", "value": "slide" },
{ "label": "Fade", "value": "fade" },
{ "label": "Zoom out", "value": "zoom-out" }
]
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048px width recommended"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile image",
"info": "Optional"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
{
"type": "select",
"id": "bg_position",
"label": "Position",
"default": "bg-pos-center-center",
"options": [
{ "label": "Top", "value": "bg-pos-top-center" },
{ "label": "Right", "value": "bg-pos-right-center" },
{ "label": "Center", "value": "bg-pos-center-center" },
{ "label": "Left", "value": "bg-pos-left-center" },
{ "label": "Bottom", "value": "bg-pos-bottom-center" }
]
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 95,
"step": 5,
"unit": "%",
"default": 20
},
{
"type": "header",
"content": "Text"
},
{
"type": "select",
"id": "text_color",
"label": "Color",
"default": "text-light",
"options": [
{
"value": "text-light",
"label": "Light"
},
{
"value": "text-dark",
"label": "Dark"
}
]
},
{
"type": "text",
"id": "slide_heading",
"label": "Heading",
"default": "Welcome to Palo Alto"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Heading size",
"unit": "px",
"step": 4,
"min": 40,
"max": 64,
"default": 48
},
{
"type": "textarea",
"id": "slide_subheading",
"label": "Subheading",
"default": "This subheading helps you provide some more detail to the title above."
},
{
"type": "range",
"id": "text_font_size",
"label": "Text size",
"unit": "px",
"step": 2,
"min": 16,
"max": 28,
"default": 20
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "slide_btn_text",
"label": "Button text",
"default": "Welcome"
},
{
"type": "url",
"id": "slide_btn_link",
"label": "Button URL"
},
{
"type": "select",
"id": "slide_btn_style",
"label": "Button style",
"default": "primary",
"options": [
{ "label": "Primary", "value": "primary" },
{ "label": "Secondary", "value": "secondary" }
]
},
{
"type": "text",
"id": "slide_btn_text_2",
"label": "Second button text"
},
{
"type": "url",
"id": "slide_btn_link_2",
"label": "Second button URL"
},
{
"type": "select",
"id": "slide_btn_style_2",
"label": "Second button style",
"default": "secondary",
"options": [
{ "label": "Primary", "value": "primary" },
{ "label": "Secondary", "value": "secondary" }
]
},
{
"type": "text",
"id": "video_btn_text",
"label": "Video button text",
"default": "Watch the Video"
},
{
"type": "video_url",
"id": "video_btn_link",
"label": "Video URL",
"accept": [
"youtube",
"vimeo"
],
}
]
}
],
"presets": [
{
"name": "Slideshow LINK II",
"category": "Image",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

 

 

 

 

0 Likes
Highlighted
Excursionist
25 2 3

I should have included the code I added to the slideshow section -

Part 1 (5th line below {% comment %} Desktop image {% endcomment %} and the closing a tag that I'm struggling with placement (either doesn't link or causes mobile version to show the desktop image below the mobile image is on the 19th line below this - where it is now makes both images link, but shows the desktop image below the mobile one)

 {% if block.settings.image_link !=blank %}
 <a href="{{ block.settings.image_link }}">
{% endif %}
 
Part 2: (in blocks, below the image picker - this seems to be working fine):
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
 
0 Likes