midnightchills

---

I hope nobody else has made this yet? I searched around quite a bit for something like this, but never found exactly what I wanted. So I made it myself! It's not an overly complicated code but it is something I've wanted for a while and I hope some others can get some use out of it too!

Anyway, this html code replicates Tumblr's photoset format, and uses the exact same dimensions that Tumblr's photosets do. So that is its primary intent, but with some tweaks this can be used for a photo gallery display of any size.

These photosets are also responsive, they'll shrink down proportionally on phones and smaller screens. This can make rows with three images a little hard to see but at least it won't break your layout :')

<!-- TUMBLR COPYCAT PHOTOSET CODE - midnightchills@dreamwidth --> <!-- CONTAINER --> <div style="width: clamp(50px, 100%, 540px);margin:0 auto;"> <!-- ONE IMAGE ---> <div style="display: grid;grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(1, auto);grid-gap:0px 4px;padding:2px 0px;"> <a href="LINK"><img src="IMG SRC LINK" alt="ALT TEXT" style="width: 100%;height: 100%; object-fit: cover; object-position:50% 50%;"></a> </div> <!-- ONE IMAGE END ---> <!-- TWO IMAGES ---> <div style="display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, auto);grid-gap:0px 4px;padding:2px 0px;"> <a href="LINK"><img src="IMG SRC LINK" alt="ALT TEXT" style="width: 100%;height: 100%; object-fit: cover; object-position:50% 50%;"></a> <a href="LINK"><img src="IMG SRC LINK" alt="ALT TEXT" style="width: 100%;height: 100%; object-fit: cover; object-position:50% 50%;"></a> </div> <!-- TWO IMAGES END ---> <!-- THREE IMAGES ---> <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, auto);grid-gap:0px 4px;padding:2px 0px;"> <a href="LINK"><img src="IMG SRC LINK" alt="ALT TEXT" style="width: 100%;height: 100%; object-fit: cover; object-position:50% 50%;"></a> <a href="LINK"><img src="IMG SRC LINK" alt="ALT TEXT" style="width: 100%;height: 100%; object-fit: cover; object-position:50% 50%;"></a> <a href="LINK"><img src="IMG SRC LINK" alt="ALT TEXT" style="width: 100%;height: 100%; object-fit: cover; object-position:50% 50%;"></a> </div> <!-- THREE IMAGES END ---> <!-- CREDIT ---> <div style="font-size:.8em; text-align:right">CREDIT TEXT</div> <!-- CREDIT END ---> </div> <!-- CONTAINER END -->

Instructions

1. Your most likely use for this will be in the body of a post, so before you begin make sure you're in the HTML tab of the text editor and have ticked the box on the top right that says "Disable Auto-Formatting". This will prevent the text editor from inserting a bunch of page breaks and other stuff you don't want.

2. Decide how you want to lay out your gifs. When you're making your rows, make sure to copy the entire section from where it says <!--[ONE/TWO/THREE] IMAGES--> to <!--[ONE/TWO/THREE] IMAGES END-->. Each one of those sections defines a row, so it's important not to miss any chunks!

3. Go through and paste the links to your pictures where it says "PIC LINK". If you want the image to be clickable to its source (or to direct somewhere else), paste your desired link where it says "LINK". If you don't want your image to link anywhere, delete <a href="LINK"> and its corresponding </a>

4. If you want alt text replace the ALT TEXT with whatever you want to say, if you don't want any delete this section of code alt="ALT TEXT".

5. If you don't want the "credit" line, delete <!--CREDIT--> to <!--CREDIT END-->

Notes

- Ideal image widths are the same as Tumblr (as of 2022): 540px (one image), 268px (two images), and 177px (3 images)

- The max photoset width is set to 540px by default, so it won't exceed 540px even in a post that's the same width as your screen. If you want a wider gallery just change the container size to 100% (which will fill your entire post width) or specify a specific pixel width. Changing the max post width will change your ideal image widths so adjust accordingly!

- If you have multiple images side by side with varying heights it'll take the height of the tallest image in the row and scale the others to match

- If one image is a different aspect ratio than the other(s) in a row beside it, it might be cropped. You can manage how your image is being cropped by changing the "object position" values (refer here for property values)

- the gutter is 4px, adjust the "grid gap" and "padding" values if you want to change how far your images are spaced apart.