Hey there! Its me again. I made this guide about a month ago Quick and Dirty Free Model Replacement. I'm back with a new one. Ran it through gemini once to make sure it made sense.

This guide is made because I'm tired of seeing giant images fill the whole greeting on pc.

So you just spent hours crafting a meticulously detailed dark fantasy greeting, genned a hundred variations of clothes and poses until you got the paladin in the dark woods tripping overherself image juuuuust right. Now you're ready to merge the two together.

But, oh no! You did what every other creator tells you to do and slapped down a lazy *Processing img url...* and called it a day. Now your bot's first message looks like a blown-out mess because the image is splicing the greeting in half instead of incorperating into it and is instead filling the full screen, or worse, is akwardly hanging off the left side like some kinda blocky flag.

Don't worry. There is another way: HTML.

But... HTML is scary and I don't know how to code

Yeah, staring at brackets can be a PITA when you just want to get your bot published. But it takes exactly two seconds to copy-paste this snippet, and it immediately makes your card more functional for anyone not on mobile.

Instead of the standard markdown, drop this into your greeting:

<img src="YOUR_IMAGE_LINK_HERE" style="display: block; margin: 0 auto; max-width: 50%;">

What is this actually doing? (The QoL Upgrades)

1. Selecting the position of the Image

display: block; margin: 0 auto;

This here will be the same 99% of the time. It's only purpose is saying to the computer: This image is a new paragraph, and should be centered. With it, instead of it hanging off to the left and making text wrap weirdly, it creates a natural break between your paragraphs.

Why? display: block makes the image act like its own paragraph/box, which (when combined with margin) can be centered directly on itself instead of needing a wrapper <div>.

2. Controlling the Width (Making the image fit)

max-width: 50%;

Nothing ruins immersion faster than all the text dissapearing around a giant image. Setting a max-width (play around with 20% to 60%, or you can specify a px size) ensures the image scales gracefully. It keeps the art visible but proportional, by setting a hard ceiling on size while allowing it to shrink.

If you have a image appearing to small you can also use: width: XX%, which will keep the image at XX% of whatever the space (the greeting box) is.

TLDR: Max-width is a safety net, capping the size so it doesn't crowd out test, or blowout and get pixilated on a big screen, while still shrinking on mobile.

3. Rounded Corners (The professional touch)

border-radius: 15px;

Make your shit look clean, deliberate. this here adds in how sharp or rounded the corners are.

Putting it all together

*The heavy oak doors swing open, revealing the pained hero...*
<img src="IMAGELINK" style="display: block; margin: 0 auto; max-width: 55%; border-radius: 15px;">
*A figure falls out from the shadows, faceplanting into the ground.*

Really. That's it. It's a tiny formatting tweak that makes a massive difference for anyone using a card on computer. It makes the image slides into place rather then feeling like its spliting the experience apart, or having to go at the end. Plus, it shows the user that you actually care about the presentation.

This is just a small bit of what you can do, models can suggest many options or additions or modifications.

More comprehensive rentry version: https://rentry.org/imagegreetings/