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