How to add button on the image of image-gallery

masooma12
Shopify Partner
13 0 1

hi in my dawn theme im trying to add image gallery but im unable to add button in my gallery please help

below is my code 

 

```

{%- unless settings.page_width != blank -%}
  {%- assign settings_page_width = 1600 -%}
{%- endunless -%}
{%- assign images_per_row = section.settings.images_per_row | default: 3 -%}
{%- assign images_per_row_mobile = section.settings.images_per_row_mobile | default: 3 -%}
{%- assign grid_gap = section.settings.grid_gap | default: 10 -%}

<section class="" id="section-{{ section.id }}">
  {%- if section.settings.heading != blank -%}
    <div class="page-width">{{ section.settings.heading }}</div>
  {%- endif -%}
 
  {%- if section.blocks.size > 0 -%}
  <div class="mw-image-gallery {% unless section.settings.full_width != blank %} page-width{% endunless %}">
    {%- for block in section.blocks -%}
     
      {%- assign image = block.settings.image -%}
      <a href="{{ block.settings.link }}" data-desktop="{{ image | image_url: '1600x' }}" data-mobile="{{ image | image_url: '749x' }}" class="mw-image-gallery__item" title="{{ image.alt }}">
 
      <img
        srcset="
            {%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
            {%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
            {%- if image.width >= 940 -%}{{ image | image_url: width: 940 }} 940w,{%- endif -%}
            {%- if image.width >= 1066 -%}{{ image | image_url: width: 1066 }} 1066w,{%- endif -%}
            {{ image | image_url }} {{ image.width }}w
        "
       
        src="{{ image | image_url: width: 533 }}"
        sizes="(min-width: {{ settings_page_width }}px) {{ settings_page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
        alt="{{ image.alt | default: page.title | append: ' ' | append: forloop.index }}"
        loading="lazy"
        width="{{ image.width }}"
        height="{{ image.height }}"
     
    >
    {% if block.settings.cta_label != blank %}
      <div class="image-bar__text">
        <h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
       
         </div>
    {% endif %}
   
      </a>
    {%- endfor -%}
   
  </div>
 
  {%- endif -%}
 
</section>

<style>

/* Gallery grid */
.mw-image-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  margin-bottom: 30px;

  /* Hide scrollbar for Firefox */
  scrollbar-width: none;
  -ms-overflow-style: none;
 
  /* Hide scrollbar for IE 10+ */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
 
/* Hide scrollbar for WebKit/Blink */
.mw-image-gallery::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Gallery images */
.mw-image-gallery a {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  object-fit: cover;
  cursor: pointer;
  position: relative;
  cursor:pointer;
}
 
.mw-image-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  position: absolute;
}

/* Modal popup */
.mw-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}
.mw-modal.show {
  display:block;
}
.mw-modal-content {
  display: flex;
  align-items: center; /* Vertical alignment */
  justify-content: center; /* Horizontal alignment */
  margin: auto;
  width: 80%;
  height:100%;
  max-width: 1200px;
}

.mw-modal-content img {
  /*width: 100%;
  height: 100%;*/
  object-fit: contain;
}
.mw-modal-content img {
  max-width: 100vw;
  max-height: 100vh;
}
.mw-modal-close {
  display: block;
  position: absolute;
  right: 50px;
  top: 50px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  color: #ffffff80;
  line-height: 50px;
  cursor: pointer;
  text-decoration: none;
  font-size: 40px;
}
  @media (max-width: 768px) {
    .mw-modal-close {
      right: 25px;
      top: 25px;
    }
  }
/* Arrows */
.mw-arrow {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
  cursor: pointer;
  line-height:50px;
  color: #000;
}

.mw-arrow:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.mw-arrow-left {
  left: 0;
}

.mw-arrow-right {
  right: 0;
}
  @media (max-width: 768px) {
  {%- if section.settings.mobile_slider != blank -%}
      .mw-image-gallery {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        grid-gap:5px;
        grid-gap: {{ grid_gap | divided_by: 2 }}px;
      }
   
      .mw-image-gallery a {
        width: 70%;
        height: auto;
        margin-right: 10px;
        scroll-snap-align: start;
        flex: 0 0 70%;
        padding-bottom: 70%;
      }
   
      .mw-image-gallery a:last-child {
        margin-right: 0;
        margin-left: auto;
        scroll-snap-align: end;
      }
  {%- else -%}
    .mw-image-gallery {
      grid-template-columns: repeat({{ images_per_row_mobile }}, 1fr);
      grid-gap: {{ grid_gap | divided_by: 2 }}px;
    }
  {%- endif -%}
  }
  @media (min-width: 769px) {
    .mw-image-gallery {
      display: grid;
      grid-template-columns: repeat({{ images_per_row }}, 1fr);
      grid-gap: {{ grid_gap }}px;
    }
  }
  .image-bar__caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s ease; /* Assuming $transition-link-hover represents the transition duration */
  width: 100%;
  text-align: center;
  text-shadow: 0 0 4px #000;
 
  }
  h3{
    font-size: 1.73333em;
    text-transform: none;
    letter-spacing: 0;
  }
 
</style>
{% schema %}
{
  "name": "Image Gallery",
  "settings": [
    {
      "type":"richtext",
      "id":"heading",
      "label":"Heading",
      "default":"<h2>Image Gallery</h2>"
    },
    {
      "type": "range",
      "id": "images_per_row",
      "label": "Images per row",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "images_per_row_mobile",
      "label": "Images per row on mobile",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "grid_gap",
      "label": "Grid gap",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 10
    },
    {
      "type":"checkbox",
      "id":"full_width",
      "label":"Full width gallery",
      "default":true
    },
    {
      "type":"checkbox",
      "id":"mobile_slider",
      "label":"Slider on mobile",
      "default":true,
      "info":"If checked, the images per row on mobile is ignored"
    }
   
  ],
  "blocks":[
    {
      "type":"image",
      "name":"Image",
      "settings":[
        {
          "type":"image_picker",
          "id":"image",
          "label":"Image"
        }
        ,
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "cta_label",
          "label":"Text"
}
      ]
    }
  ],
  "presets":[
    {
      "name":"Image Gallery",
      "category":"Image"
    }
  ]
 
}
{% endschema %}















 

 

Reply 1 (1)

techlyser_web
Shopify Partner
1537 285 306

Hello @masooma12 
Try this

{%- unless settings.page_width != blank -%}
{%- assign settings_page_width = 1600 -%}
{%- endunless -%}
{%- assign images_per_row = section.settings.images_per_row | default: 3 -%}
{%- assign images_per_row_mobile = section.settings.images_per_row_mobile | default: 3 -%}
{%- assign grid_gap = section.settings.grid_gap | default: 10 -%}

<section class="" id="section-{{ section.id }}">
{%- if section.settings.heading != blank -%}
<div class="page-width">{{ section.settings.heading }}</div>
{%- endif -%}

{%- if section.blocks.size > 0 -%}
<div class="mw-image-gallery {% unless section.settings.full_width != blank %} page-width{% endunless %}">
{%- for block in section.blocks -%}

{%- assign image = block.settings.image -%}
<a href="{{ block.settings.link }}" data-desktop="{{ image | image_url: '1600x' }}" data-mobile="{{ image | image_url: '749x' }}" class="mw-image-gallery__item" title="{{ image.alt }}">

<img
srcset="
{%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
{%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
{%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
{%- if image.width >= 940 -%}{{ image | image_url: width: 940 }} 940w,{%- endif -%}
{%- if image.width >= 1066 -%}{{ image | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ image | image_url }} {{ image.width }}w
"

src="{{ image | image_url: width: 533 }}"
sizes="(min-width: {{ settings_page_width }}px) {{ settings_page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ image.alt | default: page.title | append: ' ' | append: forloop.index }}"
loading="lazy"
width="{{ image.width }}"
height="{{ image.height }}"

>
{% if block.settings.cta_label != blank %}
<div class="image-bar__text">
<h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
<a href="{{ block.settings.button_link }}" class="gallery-button">{{ block.settings.button_label }}</a>
</div>
{% endif %}

</a>
{%- endfor -%}

</div>

{%- endif -%}

</section>

<style>
/* Your existing CSS styles */
/* Add CSS for the button */
.gallery-button {
display: inline-block;
padding: 8px 16px;
background-color: #f44336;
color: white;
text-decoration: none;
border-radius: 4px;
margin-top: 8px;
transition: background-color 0.3s;
}

.gallery-button:hover {
background-color: #d32f2f;
}
</style>

/* Add this setting in schema */
{
"type":"text",
"id":"cta_label",
"label":"Text",
"default":"",
"info":"Text to be displayed on top of the image."
},
{
"type": "url",
"id": "button_link",
"label": "Button Link",
"default": "",
"info": "URL to link to when the button is clicked."
},
{
"type": "text",
"id": "button_label",
"label": "Button Label",
"default": "",
"info": "Text to be displayed on the button."
}

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com