code: tumblr photosets

[hollowhearts]

some optional text for photo attribution or whatever else

---

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.

Policy

Use this as a base, edit as you want, credit not necessary! I just hope to inspire people to post their lovely photosets here on Dreamwidth as well.

Comments

[flockofcrows]

This looks great, I'll be using it in the future!

[hollowhearts]

I'm so glad, hope you enjoy! 💚

[bluedreaming]

I love this!

[hollowhearts]

Hope you'll get some use out of it. 😊

[runpunkrun]

This is useful, thanks for sharing!

[hollowhearts]

I hope it comes in handy!

[anneapocalypse]

This looks incredibly useful, thanks for sharing!

[hollowhearts]

Sure thing, enjoy! :D

[goodbyebird]

This is such a great resource! <3

[actiaslunaris]

Thank you! It's so good of you to put the work into this and then share it; I'm going to save it and use it on Dreamwidth and Wordpress when I have the need for it.

[tei]

This is beautiful, thanks for sharing!

[screechfox]

This is so cool! I definitely want to get some use out of this, if only to cross-post gifsets/photosets from Tumblr at some point.

[nestingdevil]

This is so awesome! Definitely going to use this. Thank you so much!

ty ty!!

[ngtskynebula]

This is exactly what I was looking for! I know nothing about HTML, so I'm in need of the basic bits still. Thanks for sharing!

[axolotls]

Ohhh, that's so cool!

For those who want to replicate older photosets, the old dimensions were 500px/245px/160px and gutters were 10px! (source with some other old dimensions)

Should be easy enough to do by changing the max post width to 500px, the grid gap to 10px and the vertical padding to 5px!

[wasisweetonce]

Thanks so much for making this! Used it here!