Slideshow Clickable - Venture

[AlbertCollado]

Hi all,

I'm trying to make my slideshow images clickable without a button. I'm using the Venture Theme and tried to look for a solution but all I could find were solutions for other themes and codes that I can't find on my files. Does anyone have any info on how to do that? 

Thanks a lot,

Albert

[oscprofessional]

Hello AlbertCollado,

Open file
Online Store-> Themes -> Edit code->Sections->slideshow.liquid
Search this code:

 <div class="hero__image-content">
            {%- if block.settings.image != blank -%}
              <noscript>
                <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              </noscript>
              {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                               style="object-position: {{ block.settings.image_position }}">
            {%- else -%}
              {%- if block.settings.image == blank -%}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>

Replace this code with below code:

<a href="www.google.com">  
         <div class="hero__image-content">
            {%- if block.settings.image != blank -%}
              <noscript>
                <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              </noscript>
              {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                               style="object-position: {{ block.settings.image_position }}">
            {%- else -%}
              {%- if block.settings.image == blank -%}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>
         </a>

[AlbertCollado]

Done, and now where can I select the url? Or is the one that the image had with the button that you can use for the slideshow?

Thanks a lot!

[AlbertCollado]

Okay that was a huge progress, thanks a lot! 

Now when I click sends me to a page where it says "page not found". Any tips on that?

Thanks A LOT, 

Albert

[AlbertCollado]

Alright. little update. Changed "google.com" for the correct link that I wanted for the first image and its working perfectly fine, but now in the second image of my slideshow also goes to that link. Any chance to put different links for different images?

Thanks,

Albert.

---

[oscprofessional]

Hello AlbertCollado,
You need do more customization to change different url for different images.

[AlbertCollado]

And how could I do that? Is there any code that I could add to solve it?

Thanks,

Albert

[Denis_A]

Hi @AlbertCollado,

I can help you with that, shoot me an email.

[AlbertCollado]

@oscprofessionalAny ideas how to customise the code to link the different images to different links?

Thanks,

Albert