Tile gallery problem (Javascript)

[Rubbereon]

I used some javascript I nabbed from another website because this stuff was hella complicated. (or at least I think that's what I did, this script was there since 2024, so my memory's getting fuzzy)

I had no idea how to make a minimalist gallery that didn't take too much space on the post, but now I want another gallery lower on my blog page and I just can't figure it out. I can't reuse the id because it's an id not a class, it's not reusable. I tried cloning the entire code inside the script brackets with a brand new "tileMe2" id completely separate from the first script and it breaks the gallery. What should I do?

Here's the code and it works perfectly when used alone, but when I need a secondary gallery on the same page it's unworkable.

Code

"use strict"
    window.onload = window.onresize = function() {
        resize("tileMe", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }

The page affected by this problem: https://rubbereon.nekoweb.org/blog/My-thoughts-on-Palworld.html

Notice how 1 group of images correctly tile tightly packed together and the other takes 50% of the webpage.

This is what the script looks like duplicated in the head tag of my page.

Code

<script> "use strict"
    window.onload = window.onresize = function() {
        resize("tileMe", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }
    </script>
    <script> "use strict"
    window.onload = window.onresize = function() {
        resize("tileMe2", 14)
    }
    var pixelsPerEm = function(element) {
        var width
        var div = document.createElement('div')
        div.style.width = "1000em"
        element.appendChild(div)
        width = div.offsetWidth
        element.removeChild(div)
        return width / 1000
    }
    var findAspectRatio = function(images, count) {
        var i
        var aspect = 0
        for (i=0; i<count; ++i)
            aspect += images[i].naturalWidth / images[i].naturalHeight
        return aspect
    }
    var makeDiv = function(container, aspect, images, count) {
        var i
        var div = document.createElement("div")
        div.style.height = (container.clientWidth / aspect) + "px"
        div.style.display = "flex"
        for (i=0; i<count; ++i)
            div.appendChild(images.shift())
        container.appendChild(div)
    }
    var resize = function(id, maxEms) {
        var aspect, count, i
        var container = document.getElementById(id)
        var maxHeight = pixelsPerEm(container) * maxEms
        var images = Array.from(container.getElementsByTagName("img"))
        while (container.lastChild) container.removeChild(container.lastChild)
        while (images.length) {
            for (i=1; i<=images.length; ++i) {
                count = i
                aspect = findAspectRatio(images, i)
                if (container.clientWidth / aspect < maxHeight)
                    break
                aspect = container.clientWidth / maxHeight
            }
            makeDiv(container, aspect, images, count)
        }
    }
</script>

[rolypolyphonic]

Could you explain what the script is intended to do? I'm not sure I understand. It is supposed to be a bunch of pictures arranged in tiles? Right now it looks like all the pictures are stacked vertically inline throughout the entire post, and I don't think I noticed any of them being tiled by the website itself (as opposed to the pictures inside the image being collaged together, I mean).

With that said you can set all images too have a maximum of 100% width in your CSS so that them going past the screen isn't a problem.

Code

img {
  max-width: 100%;
  height: auto;
}

If you need to arrange images in a grid format it might be better to use CSS flex or grid for that instead of JS. Here is how I use flex to have two columns of images side by side on desktop that I use on this page:

Code

.column {
  flex: 50%;
  max-width: 50%;
  padding: 0px 3px;
}
.column img {
  vertical-align: middle;
  width: 100%;
  padding: 3px 0px;
}

Another example I used on this page. This time it's three images in a row, where each .entry-tile is an image inside .container.

Code

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.entry-tile {
  width: 27%;
  padding: 10px;
  margin: 10px;
}

(Note: they are only tiled on desktop; I use media queries so that they stack vertically on mobile).

Alternatively if you want to use a different JS solution you can try the Masonry library. Here's an example of how it looks. It is great for when the images are not the same size and you want them to slot cleanly into each other with minimal effort, but it's fiddly to have more than one 'gallery' on a single page using it.

Anyway I'm not sure if getting the images to tile is actually what you need so apologies if I misunderstood. Good luck with it