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.settings.heading }}
{%- endif -%}
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign image = block.settings.image -%}
![{{ image.alt | default: page.title | append: ' ' | append: forloop.index }}]()
{% if block.settings.cta_label != blank %}
{% endif %}
{%- endfor -%}
{%- endif -%}
/* 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;
}
{{ block.settings.cta_label | escape }}
{% schema %}
{
“name”: “Image Gallery”,
“settings”: [
{
“type”:“richtext”,
“id”:“heading”,
“label”:“Heading”,
“default”:“
Image Gallery
”},
{
“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 %}