dw tip: fake cuts

Sun, 02 Apr 2023 03:16:12 GMT

Posted by: hollowhearts

Short post but a resource I made for myself to refer back to and thought could be helpful for some - I've recently delved back into fake cuts but ended up stymied by how to make multiple fake cuts in one post. Surely that should be possible! And it is, but there's an extra couple tags you have to add to make it work.

> follow the fake cut! <

comments

code: tumblr photosets

Mon, 04 Apr 2022 23:19:19 GMT

Posted by: 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 :')

<div style="font-size:.8em; text-align:right">CREDIT TEXT</div>

</div>

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  to . 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  to 

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