Adding click link to gallery image

Solved
New Member
7 0 0

Hi Guys,

 

Im using theme: Venture.

 

I want to add a link to these 3 images in my gallery but there is no option to do so. 

 

Is it possible to edit the code to make it possible or not? Please let me know if it is not possible too :)

 

See image for reference :)

 

Thanks so much really appreciate any guidance.

 

Screenshot 2019-07-03 at 14.31.52.jpg

0 Likes

Success.

Shopify Partner
455 80 98

@TKarakashian 

 

sarhov is here...

 

To achieve this we need to edit gallery.liquid file a bit, which I have done, you need to replace your current one with my modified one.

Click on Actions, Edit Code, find gallery.liquid file and replace its content with the following updated version.

<div class="page-width">
  <div class="flex column-flex">
    {% for block in section.blocks %}
      <div class="flex__item text-center" {{ block.shopify_attributes }}>
        <a href="{{block.settings.url}}">
        {% if block.settings.image != blank %}
          <noscript>
            <div class="column-flex__image column-flex__image--{{ section.settings.gallery_height }}" style="background-image: url({{ block.settings.image | img_url: '600x' }}); background-position: {{ block.settings.image_align }};"></div>
          </noscript>
          <div class="column-flex__image column-flex__image--{{ section.settings.gallery_height }} lazyload"
            style="background-position: {{ block.settings.image_align }};background-image: url('{{ block.settings.image | img_url: '300x300' }});"
            data-bgset="{% include 'bgset', image: block.settings.image %}"
            data-sizes="auto"
            data-parent-fit="cover">
          </div>
        {% else %}
          <div class="column-flex__image">
            <div class="placeholder-background">
              {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          </div>
        {% endif %}
        </a>
      </div>
    {% endfor %}
  </div>

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}
</div>



{% schema %}
{
  "name": {
    "de": "Galerie",
    "en": "Gallery",
    "es": "Galería",
    "fr": "Galerie",
    "it": "Galleria",
    "ja": "ギャラリー",
    "nl": "Galerie",
    "pt-BR": "Galeria",
    "zh-CN": "图库",
    "zh-TW": "圖庫"
  },
  "class": "index-section",
  "max_blocks": 3,
  "settings": [
    {
      "type": "select",
      "id": "gallery_height",
      "label": {
        "de": "Galeriehöhe",
        "en": "Gallery height",
        "es": "Altura de la galería",
        "fr": "Hauteur de la galerie",
        "it": "Altezza galleria",
        "ja": "ギャラリーの高さ",
        "nl": "Hoogte galerij",
        "pt-BR": "Altura da galeria",
        "zh-CN": "图库高度",
        "zh-TW": "圖庫高度"
      },
      "default": "short",
      "options": [
        {
          "value": "short",
          "label": {
            "de": "Niedrig",
            "en": "Short",
            "es": "Baja",
            "fr": "Court",
            "it": "Bassa",
            "ja": "低い",
            "nl": "Kort",
            "pt-BR": "Pequena",
            "zh-CN": "矮",
            "zh-TW": "較矮"
          }
        },
        {
          "value": "tall",
          "label": {
            "de": "Hoch",
            "en": "Tall",
            "es": "Alta",
            "fr": "Grand",
            "it": "Alta",
            "ja": "高い",
            "nl": "Lang",
            "pt-BR": "Alta",
            "zh-CN": "高",
            "zh-TW": "較高"
          }
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image_block",
      "name": {
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fr": "Image",
        "it": "Immagine",
        "ja": "画像",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "de": "Foto",
            "en": "Image",
            "es": "Imagen",
            "fr": "Image",
            "it": "Immagine",
            "ja": "画像",
            "nl": "Afbeelding",
            "pt-BR": "Imagem",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          }
        },
		{
		"type": "url"	,
		"id": "url",
		"label": "Url"
		},
        {
          "type": "radio",
          "id": "image_align",
          "label": {
            "de": "Fotoausrichtung",
            "en": "Image alignment",
            "es": "Alineación de imagen",
            "fr": "Alignement de l'image",
            "it": "Allineamento immagine",
            "ja": "画像アラインメント",
            "nl": "Afbeelding uitlijnen",
            "pt-BR": "Alinhamento da imagem",
            "zh-CN": "图片对齐方式",
            "zh-TW": "圖片對齊"
          },
          "options": [
            {
              "value": "top center",
              "label": {
                "de": "Oben Mitte",
                "en": "Top center",
                "es": "Superior al centro",
                "fr": "En haut au centre",
                "it": "In alto al centro",
                "ja": "中央上",
                "nl": "Midden boven",
                "pt-BR": "Superior centro",
                "zh-CN": "顶部居中",
                "zh-TW": "中央上方"
              }
            },
            {
              "value": "center center",
              "label": {
                "de": "Mitte",
                "en": "Center",
                "es": "Centrar",
                "fr": "Centre",
                "it": "Al centro",
                "ja": "中央",
                "nl": "Midden",
                "pt-BR": "Centro",
                "zh-CN": "居中",
                "zh-TW": "置中"
              }
            },
            {
              "value": "bottom center",
              "label": {
                "de": "Unten mittig",
                "en": "Bottom center",
                "es": "Inferior al centro",
                "fr": "En bas au centre",
                "it": "In basso al centro",
                "ja": "中央下",
                "nl": "Midden onder",
                "pt-BR": "Inferior centro",
                "zh-CN": "底部居中",
                "zh-TW": "中央下方"
              }
            }
          ],
          "default": "top center"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "de": "Galerie",
        "en": "Gallery",
        "es": "Galería",
        "fr": "Galerie",
        "it": "Galleria",
        "ja": "ギャラリー",
        "nl": "Galerie",
        "pt-BR": "Galeria",
        "zh-CN": "图库",
        "zh-TW": "圖庫"
      },
      "category": {
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fr": "Image",
        "it": "Immagine",
        "ja": "画像",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "blocks": [
        {
          "type": "image_block"
        },
        {
          "type": "image_block"
        },
        {
          "type": "image_block"
        }
      ]
    }
  ]
}
{% endschema %}

After this you should see url field for your gallery,

Screenshot:

eA3aHBS

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
7 0 0

SARHOV thanks so much for the quick response! worked like a charm! Really appreciate the help!

0 Likes
Shopify Partner
455 80 98

@TKarakashian 

 

You're welcome.

Please mark my answer as solution if it helped. ))

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes