I have a number of images that I have in 5 columns. I can sort those elements using tags, this dynamically changes the amount of images shown.
Issue :
All is normal and well at first. But when I select a tag, the images that are remaining get put in a single column, instead of keeping the 5 columns arrangement.
Before
Images in 5 columns
After
Images now in 1 column
Note that this doesn’t happen when the first image of the grid is included in the selected tag :
First image stays the same, the rest changes
I have explored every possibility and I don’t know how to debug this. So here’s relevant code :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotton Mémoires</title>
<link rel="icon" type="image/x-icon" href="files/favicon2.ico">
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
</head>
<body
<div class="pdf-container">
<a class="pdf-button" data-tags="IN, 2021, Didactique, Interaction"
href="link_to_pdf"><img src="IMAGE">
</a>
<a class="pdf-button" data-tags="2021, IN, Cinema"
href="link_to_pdf"><img src="IMAGE">
</a>
<a class="pdf-button" data-tags="2021, IN"
href="link_to_pdf"><img src="IMAGE">
</a>
</div>
</body>
.pdf-container {
padding-top: 50px;
padding-bottom: 50px;
}
.pdf-container .pdf-button {
max-width: 20%;
padding: 0.9%;
box-sizing: border-box;
}
.pdf-container .pdf-button a img {
width: auto;
border-radius: 10px;
cursor: pointer;
object-fit: cover;
}
.pdf-button:hover {
opacity: 0.7;
}
.pdf-button {
padding: 16px 16px;
margin-bottom: 5px;
margin-top: 5px;
height: auto;
}
.pdf-container a img {
width: 100%;
border: 7px solid var(--accent-color2);
border-radius: 20px;
cursor: pointer;
}
// scripts.js
const pdfButtons = document.querySelectorAll('.pdf-button');
const tagButtons = document.querySelectorAll('.tag-button');
const pdfViewer = document.getElementById('pdf-viewer');
// Array to store selected tags
let selectedTags = [];
// Add event listeners to tag buttons
document.addEventListener('DOMContentLoaded', (event) => {
var grid = document.querySelector('.pdf-container');
var masonry = new Masonry(grid, {
percentPosition: true,
});
tagButtons.forEach(button => {
button.addEventListener('click', () => {
const selectedTag = button.getAttribute('data-tag');
if (selectedTags.includes(selectedTag)) {
selectedTags = selectedTags.filter(tag => tag !== selectedTag);
button.classList.remove('selected-tag');
} else {
selectedTags.push(selectedTag);
button.classList.add('selected-tag');
}
pdfButtons.forEach(pdfButton => {
const tags = pdfButton.getAttribute('data-tags').split(', ');
if (selectedTags.every(tag => tags.includes(tag))) {
pdfButton.style.display = 'block';
} else {
pdfButton.style.display = 'none';
}
});
setTimeout(() => {
masonry.layout();
}, 50);
});
});
});
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
const tagArray = Array.from(pdfButtons);
const shuffledTagArray = shuffleArray(tagArray);
const tagSelector = document.querySelector('.pdf-container');
tagSelector.innerHTML = '';
shuffledTagArray.forEach(button => tagSelector.appendChild(button));
document.addEventListener('DOMContentLoaded', (event) => {
var grid = document.querySelector('.pdf-container');
var masonry = new Masonry(grid, {
itemSelector: '.pdf-button',
columnWidth: '.pdf-button',
percentPosition: true
});
var images = document.querySelectorAll('.pdf-button img');
var loadedImages = 0;
function imageLoaded() {
loadedImages++;
if (loadedImages === images.length) {
masonry.layout();
}
}
images.forEach(function (image) {
image.addEventListener('load', imageLoaded);
if (image.complete) {
imageLoaded();
}
});
window.addEventListener('resize', function () {
masonry.layout();
});
setTimeout(() => {
masonry.layout();
}, 100);
});
There shouldn’t be any issue in the css nor in the html as I have checked both and they are fairly straightforward.
I’m guessing the issue is in the js as it’s what I’m least familiar with, but I’ve tried and nothing seems to change.
Deleting parts of the code entirely to see which one breaks is my manner of debugging but it can only go so far.
