acins guide on complicated "offset" metadata image borders (deadass hard)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
uhm i domt even know why the FUCK i made this, its not fun at all. so i had to remake the example image from scratch because i revamped /newyorker to something which is actually ass and i wasnt able to recover whatever rentry i used to make the rentry to then move it to /newyorker but its okay.. only took me an hour!!
this requires a LOT of fidgeting around, be patient vro anyway heres what ur gonna get
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
so just to mention the twitch gui is the border, and the baby puss in boots image is the container (gui + container)
ok anyways u dont give a shit and u just want the metadata and if i were you reading this i would too
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
container metadata and what it does
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
- CONTAINER_MAX_WIDTH = 600px
- how wide ur container is (makes ur border squished or wide)
- CONTAINER_INNER_BACKGROUND_COLOR = N/A
- literally doesnt matter bc ur gonna have an image on it
- CONTAINER_INNER_BACKGROUND_IMAGE = catbox
- does matter because thats whats gonna be inside ur frame
- CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT = no-repeat
- keep this on no-repeat
- CONTAINER_INNER_BACKGROUND_IMAGE_POSITION = left
- moves your image around, i reccomend making this in the centre while youre messing around with the border
- CONTAINER_INNER_BACKGROUND_IMAGE_SIZE = 420px
- how big your image is, i reccomend making this 'cover' as you mess around with the border
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
border metadata and what it does
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
- CONTAINER_BORDER_IMAGE = catbox
- the image which will "surround" your container, go look at mine and make your one transparent where your rentry will go
- CONTAINER_BORDER_IMAGE_SLICE = 50%
- absolutely have to use % on this. also 50% was my personal sweet spot, as 25% makes the border look like its in the middle of imploding on itself and 75% makes it too stretched out.
- CONTAINER_BORDER_IMAGE_WIDTH = 100%
- from what ive seen this doesnt really change anything but keep it at 100% to play it safe
- CONTAINER_BORDER_IMAGE_OUTSET = 30px 30px 30px 0px
- stretches/squishes your image, use this to actually get your image stretched out and look like its outside of the container. however you set it out remember:
- 1st value is the top
- 2nd value is the right
- 3rd value is the bottom
- 4th value is the left
- stretches/squishes your image, use this to actually get your image stretched out and look like its outside of the container. however you set it out remember:
- CONTAINER_BORDER_IMAGE_REPEAT = space
- actually suprised this value actually worked for this ,, well i think the others do as well but this one worked for my rentry
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
questiosn i came up with
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
- do i have to make the gui a border..?
- not neccesarily,, i dont blame you for not wanting to do this with still images but doing this with gifs makes it A LOT easier.. as someone who uses ezgif trying to move the gif so it would stay under the gui was hell so i opted for this solution
- plus it gives you bragging rights to say "hey look i did this hard thing lmaaaooo"
- not neccesarily,, i dont blame you for not wanting to do this with still images but doing this with gifs makes it A LOT easier.. as someone who uses ezgif trying to move the gif so it would stay under the gui was hell so i opted for this solution
- can i still write text over it
- yeah ofc!! it isnt TECHNICALLY off the container but it looks like it is, so text can still be put on it
uh idc if you build on the metadata ive given, just dont copy my shit thanks
⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
hope this helped!! go back to the main page?
⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀