Adjusting Image Size in Custom Character Sheets

Some people on discord were asking how to adjust image size. I think there's probably many was to do it, but I thought I'd share how I do it in case it's useful to others.

I usually use the following code and adjust the width percent as needed:

[f=display:block width:50%][img]url[/img][/f]

Unfortunately, I noticed this doesn't work in Custom Character Sheets for some reason.

After a little troubleshooting, I was able to figure out a different solution, although it is a bit more complicated, so I usually only use it for character sheets and use the code above for posts.

----EDIT----
Luckily, Adam posted a much easier way to do it in reply to this post. You can use the following code, adjusting the width and url as needed:


[f=display:flex flex-direction:column width:20%][img]https://i.imgur.com/Gdntyp8.jpg[/img][/f]



Continue reading if you want my original long and complicated answer 😆



It requires three nested f tags with a bunch of css properties, but there's only 3 spots that need adjustment to reuse for different images, so you can copy-paste the code (see examples below) and make the necessary edits fairly easily.

Edits:

1) The width percent in the first f tag controls the size of the image relative to the width of the character sheet (or whatever container it's in, e.g. a column)

2) The padding-bottom percent in the second f tag needs to be equal to the aspect ratio of the image (i.e. height/width*100%). If you don't know the exact value, you can estimate and then trial and error to get close enough.

3) Of course the image url needs to be updated in background-image:url in the third f tag

Examples
All the examples use the same code with adjustments specific to the image and the desired size highlighted.

Landscape Image (1500 x 900 px) adjusted to 75% width of sheet
1) Adjust width to 75%
2) Adjust padding-bottom to 60% (h/w*100 = 900/1500*100 = 60)
3) Adjust url to https://i.imgur.com/Gdntyp8.jpg

Code: (copy-paste into custom character sheet)

[f=display:block width:75%][f=display:block position:relative padding-bottom:60%][f=position:absolute width:100% height:100% background-size:contain background-repeat:no-repeat background-image:url(https://i.imgur.com/Gdntyp8.jpg)][/f][/f][/f]


Result:


Portrait Image (474 x 707 px) adjusted to 25% width of sheet
1) Adjust width to 25%
2) Adjust padding-bottom to 149.16% (h/w*100 = 707/474*100 = 149.16)
3) Adjust url to https://i.imgur.com/2sPDLDL.jpg

Code: (copy-paste into custom character sheet)

[f=display:block width:25%][f=display:block position:relative padding-bottom:149.16%][f=position:absolute width:100% height:100% background-size:contain background-repeat:no-repeat background-image:url(https://i.imgur.com/2sPDLDL.jpg)][/f][/f][/f]


Result:


Square Image (512 x 512 px) adjusted to 33% width of sheet with text wrap
For text wrap, add "padding:1em float:left/right" to the first f tag
1) Adjust width to 33%
2) Adjust padding-bottom to 100% (h/w*100 = 512/512*100 = 100)
3) Adjust url to https://i.imgur.com/RdMYOxp.jpg

Code: (copy-paste into custom character sheet)

[f=display:block padding:1em float:left width:33%][f=display:block position:relative padding-bottom:100%][f=position:absolute width:100% height:100% background-size:contain background-repeat:no-repeat background-image:url(https://i.imgur.com/RdMYOxp.jpg)][/f][/f][/f]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mattis velit, id consectetur ante. Donec ut odio nec massa malesuada aliquam ac ac neque. Fusce mi orci, facilisis sit amet vestibulum ut, sagittis sit amet enim. Phasellus malesuada, odio tempor rutrum aliquam, tellus augue aliquet enim, ac condimentum metus nunc nec nunc. Ut placerat enim odio, viverra interdum risus ornare sit amet. Mauris pulvinar, odio eget bibendum iaculis, leo dolor viverra leo, quis tempus felis metus ac lorem. Donec eu sagittis sapien, id bibendum nisl. Fusce at vulputate magna, vitae lacinia massa. Sed tortor lorem, suscipit aliquet efficitur porta, aliquet in magna. Suspendisse tortor ex, imperdiet sed tristique at, blandit vitae nisi. Sed eu pellentesque sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mattis velit, id consectetur ante. Donec ut odio nec massa malesuada aliquam ac ac neque. Fusce mi orci, facilisis sit amet vestibulum ut, sagittis sit amet enim. Phasellus malesuada, odio tempor rutrum aliquam, tellus augue aliquet enim, ac condimentum metus nunc nec nunc. Ut placerat enim odio, viverra interdum risus ornare sit amet. Mauris pulvinar, odio eget bibendum iaculis, leo dolor viverra leo, quis tempus felis metus ac lorem. Donec eu sagittis sapien, id bibendum nisl. Fusce at vulputate magna, vitae lacinia massa. Sed tortor lorem, suscipit aliquet efficitur porta, aliquet in magna. Suspendisse tortor ex, imperdiet sed tristique at, blandit vitae nisi. Sed eu pellentesque sapien.


Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mattis velit, id consectetur ante. Donec ut odio nec massa malesuada aliquam ac ac neque. Fusce mi orci, facilisis sit amet vestibulum ut, sagittis sit amet enim. Phasellus malesuada, odio tempor rutrum aliquam, tellus augue aliquet enim, ac condimentum metus nunc nec nunc. Ut placerat enim odio, viverra interdum risus ornare sit amet. Mauris pulvinar, odio eget bibendum iaculis, leo dolor viverra leo, quis tempus felis metus ac lorem. Donec eu sagittis sapien, id bibendum nisl. Fusce at vulputate magna, vitae lacinia massa. Sed tortor lorem, suscipit aliquet efficitur porta, aliquet in magna. Suspendisse tortor ex, imperdiet sed tristique at, blandit vitae nisi. Sed eu pellentesque sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mattis velit, id consectetur ante. Donec ut odio nec massa malesuada aliquam ac ac neque. Fusce mi orci, facilisis sit amet vestibulum ut, sagittis sit amet enim. Phasellus malesuada, odio tempor rutrum aliquam, tellus augue aliquet enim, ac condimentum metus nunc nec nunc. Ut placerat enim odio, viverra interdum risus ornare sit amet. Mauris pulvinar, odio eget bibendum iaculis, leo dolor viverra leo, quis tempus felis metus ac lorem. Donec eu sagittis sapien, id bibendum nisl. Fusce at vulputate magna, vitae lacinia massa. Sed tortor lorem, suscipit aliquet efficitur porta, aliquet in magna. Suspendisse tortor ex, imperdiet sed tristique at, blandit vitae nisi. Sed eu pellentesque sapien.

@Chalrytharendir - As always, mate, that's nice research. But instead of block, try flex.

[f=display:flex flex-direction:column width:20%][img]https://i.imgur.com/Gdntyp8.jpg[/img][/f]

Thanks @Adam! That's a really nice and simple way compared to what I came up with 😆 I'll edit my post to put this up top so people get the easy way without reading all the way down.