How to stop slopping your greeting images
(Quick and Dirty HTML Guide)
This guide is made because I'm tired of seeing giant images fill the whole greeting on pc and for a long time I didn't know there was another way to do it. If that's actually the look you're going for, no need to read further! (unless you care to experiment) But if you'd rather avoid it or relate to the story below, read on.
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  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. It's called... 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.
The Fix:
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%; width: 250px; border-radius: 15px;">
What? Why? What is this actually doing? (The QoL Upgrades)
Lets go through it step by step.
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%; width: 250px;
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 big or 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. Width allows you to define the size of the image within the bounds of the space.
3. Rounded Corners (The professional touch)
border-radius: 15px;
Make your shit look clean, deliberate. This controls how sharp or rounded the corners are.
Putting it all together
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, and ai can suggest many options or additions or modifications. Take the five extra minutes to structure your greeting and try out image effects! Here are two examples I've used before.
HTML BONUSES
Stepping out of the stone age: Advanced HTML for Greetings (Quick & Dirty Guide Pt. 2)
Alright, so your images are centered and no longer breaking the space-time continuum of the chat window. But the rest of your greeting still looks like a sterile Word document. If you're building out a sprawling dark fantasy setting or a gritty cyberpunk lorebook, basic markdown just doesn't carry the vibe.
Here are two more advanced (but still copy-pasteable) HTML tricks.
1. The "Polaroid" Profile (Image + Caption locked together)
If you just drop an image and put text under it, the line height and markdown spacing can make them feel disconnected. If you want the character's name, a quote, or a small caption to feel physically attached to the image (like a Polaroid picture or a dossier file), wrap them both in a container.
What we're doing: Grouping together the image and a stylized text caption together in one neat little package.
Viewing Example:
Copy and Paste V (minimized):
Result:
Sadly rentry does not allow for centering images...
Why do this much?
Because the standard markdown ![img]() is handcuffing yourself! Its for things you don't care about. You are writing fiction, presentation is part of the process. Not only does it make image greetings actually functional on PC, it makes things interesting!
2. The "Lore Drop" Box (Stylized Containers)
You can use HTML for text to!
What we're doing: Making a distinct, shaded box with a colored accent border and distinct text.
Viewing Example:
Copy and Paste V (minimized):
Result:
Why go through all this?
Visually, all text looks the same. Now, I'm not advocating for myspacification. But, if you want to make a RPG themed card, or are making greatings including things like posters or papers, well this is a nifty way to show instead of tell. For example, the border-left plus monospace font does the work a UI does in a game: it signals this is a different kind of information visually before returning back to normal text, indicating the greeting present has begun.