Brooklyn theme: how to edit Section liquid and How to create photo gallery page

cupcakes · ‎03-27-2024

Hi! I'm using brooklyn theme,

1) I added this code to the customize theme sections liquid page under 'imagegallery.liquid' so i could get an 'as featured on' section. I'm having problems making the gap between the three images close to '0' & also centralize the title and the images on the page.

Can someone help me out with it?

Much appreciated!

{%- unless settings.page_width != blank -%}
{%- assign settings_page_width = 800 -%}
{%- 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: 0 -%}

<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="{{ image | img_url: '160x' }}" data-desktop="{{ image | img_url: '160x' }}" data-mobile="{{ image | img_url: '160x' }}" class="mw-image-gallery__item" target="_blank" title="{{ image.alt }}">
<img
srcset="
{%- if image.width >= 50 -%}{{ image | image_url: width: 50 }} 50w,{%- endif -%}
{%- if image.width >= 100 -%}{{ image | image_url: width: 100 }} 100w,{%- endif -%}
{%- if image.width >= 200 -%}{{ image | image_url: width: 200 }} 200w,{%- endif -%}
{%- if image.width >= 400 -%}{{ image | image_url: width: 400 }} 400w,{%- endif -%}
{%- if image.width >= 600 -%}{{ image | image_url: width: 600 }} 600w,{%- endif -%}
{%- if image.width >= 800 -%}{{ image | image_url: width: 800 }} 800w,{%- endif -%}
{{ image | image_url }} {{ image.width }}w
"
src="{{ image | image_url: width: 300 }}"
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"
>
</a>
{%- endfor -%}
</div>

<div id="mw-modal" class="mw-modal">
<div class="mw-modal-content">
<img id="mw-modal-image" src="" alt="">
<a id="mw-modal-prev" class="mw-modal-prev mw-arrow mw-arrow-left" href="#">❮</a>
<a id="mw-modal-next" class="mw-modal-next mw-arrow mw-arrow-right" href="#">❯</a>
<a id="mw-modal-close" class="mw-modal-close" href="#">✕</a>
</div>
</div>
{%- endif -%}
</section>

/* 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: 50%;
height: 0;
padding-bottom: 50%;
object-fit: cover;
cursor: pointer;
position: relative;
cursor:pointer;
}

.mw-image-gallery img {
width: 50%;
height: 50%;
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:0px;
grid-gap: {{ grid_gap | divided_by: 0 }}px;
}

.mw-image-gallery a {
width: 50%;
height: auto;
margin-right: 0px;
scroll-snap-align: start;
flex: 0 0 50%;
padding-bottom: 50%;
}

.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: 0 }}px;
}
{%- endif -%}
}
@media (min-width: 769px) {
.mw-image-gallery {
display: grid;
grid-template-columns: repeat({{ images_per_row }}, 1fr);
grid-gap: {{ grid_gap }}px;
}
}
</style>

{% javascript %}
(function(){
const images = document.querySelectorAll('.mw-image-gallery a');
const modal = document.querySelector('.mw-modal');
const modalImage = modal.querySelector('img');
let currentIndex = 0;

// Open modal popup and show clicked image
function showModal(index) {
if(window.innerWidth > 749){
modalImage.src=images[index].dataset.desktop;
} else {
modalImage.src=images[index].dataset.mobile;
}
modal.classList.add('show');
currentIndex = index;
}

// Hide modal popup
function hideModal() {
modal.classList.remove('show');
}

// Show previous image in gallery
function showPrevImage(e) {
e.stopPropagation()
if (currentIndex === 0) {
showModal(images.length - 1);
} else {
showModal(currentIndex - 1);
}
}

// Show next image in gallery
function showNextImage(e) {
e.stopPropagation()
if (currentIndex === images.length - 1) {
showModal(0);
} else {
showModal(currentIndex + 1);
}
}

// Add click event listeners to all images
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault()
showModal(index);
});
});

// Add click event listeners to modal navigation arrows
const prevArrow = modal.querySelector('.mw-modal-prev');
prevArrow.addEventListener('click', showPrevImage);

const nextArrow = modal.querySelector('.mw-modal-next');
nextArrow.addEventListener('click', showNextImage);

// Add click event listener to modal background to hide it
modal.addEventListener('click', hideModal);

})()
{% endjavascript %}

{% 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": 0,
"step": 1,
"default": 0
},
{
"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"
}
]
}
],
"presets":[
{
"name":"Image Gallery",
"category":"Image"
}
]

}
{% endschema %}