This post demonstrates every image placement style and modifier class. Each section shows a different option with a description of what it does. Use this as a visual reference when writing real posts.
Featured Image
The image you see at the very top of this post (above this text) is the featured image. It is set in the front matter, not in the body. It also appears as the thumbnail on blog index and category cards.
Front matter syntax used:
image: demo-featured.jpg
image_alt: "Sample featured image displayed at the top of the post and as a card thumbnail"
Right Wrap — .img-right
This is an image using the .img-right class. It floats to the right side of the content area at 45% width, and the paragraph text wraps around it on the left. This is ideal for supplementary images that accompany a block of text without interrupting the reading flow. On mobile screens, the float is removed and the image displays at full width so it does not become too small to see. You will want enough text in the surrounding paragraphs to actually wrap around the image, otherwise it may look awkward with a short paragraph sitting next to it. A good rule of thumb is to have at least three or four sentences alongside a right-floated image.
Markdown syntax used:
<figure class="img-right"><img src="{{ROOT_PATH}}assets/images/blog/demo-right.jpg" alt="Right-aligned demo image" loading="lazy"><figcaption>Right-aligned demo image</figcaption></figure>
Left Wrap — .img-left
This is an image using the .img-left class. It floats to the left side of the content area at 45% width, and the paragraph text wraps around it on the right. This is the mirror of .img-right and works well when you want to alternate image placement throughout a longer article. Just like the right-floated version, it collapses to full width on mobile devices. Again, make sure there is enough surrounding text to fill the space beside the image. Short paragraphs next to floated images can create uneven whitespace that looks unpolished. If you only have a sentence or two, consider using .img-center instead.
Markdown syntax used:
<figure class="img-left"><img src="{{ROOT_PATH}}assets/images/blog/demo-left.jpg" alt="Left-aligned demo image" loading="lazy"><figcaption>Left-aligned demo image</figcaption></figure>
Centered — .img-center
This is an image using the .img-center class. It displays as a centered block at 80% of the content width. No text wraps around it. This is a good default choice when you want an image to stand on its own between paragraphs and do not need text wrapping behavior.
Markdown syntax used:
<figure class="img-center"><img src="{{ROOT_PATH}}assets/images/blog/demo-center.jpg" alt="Centered demo image" loading="lazy"><figcaption>Centered demo image</figcaption></figure>
Full Width — .img-full
This is an image using the .img-full class. It stretches edge to edge within the content column and removes the border radius, giving it a bleed effect. Use this for wide landscape photos, diagrams, or infographics where you want maximum visual impact.
Markdown syntax used:
<figure class="img-full"><img src="{{ROOT_PATH}}assets/images/blog/demo-full.jpg" alt="Full-width demo image" loading="lazy"><figcaption>Full-width demo image</figcaption></figure>
Banner — .img-banner
This is an image using the .img-banner class. It displays at full width but crops to a maximum height, using object-fit: cover so the image fills the space without distortion. This works well for cinematic landscape photos or scene-setting images where you want a wide strip of imagery without taking up too much vertical space.
Markdown syntax used:
<figure class="img-banner"><img src="{{ROOT_PATH}}assets/images/blog/demo-banner.jpg" alt="Banner demo image" loading="lazy"><figcaption>Banner demo image</figcaption></figure>
Small — .img-small
This is an image using the .img-small class. It is centered and capped at 300 pixels wide. Use this for icons, logos, small headshots, or any image that should not dominate the layout.
Markdown syntax used:
<figure class="img-small"><img src="{{ROOT_PATH}}assets/images/blog/demo-small.jpg" alt="Small demo image" loading="lazy"><figcaption>Small demo image</figcaption></figure>
No Class (Default)
This is an image with no placement class at all. It renders as a standard block-level figure at full content width. If you do not need any special positioning, you can simply omit the curly-brace class syntax entirely.
Markdown syntax used:
<figure><img src="{{ROOT_PATH}}assets/images/blog/demo-default.jpg" alt="Default demo image" loading="lazy"><figcaption>Default demo image</figcaption></figure>
Modifier Classes
Modifier classes add visual effects and can be combined with any placement class above.
Shadow — .img-shadow
This image uses .img-center combined with .img-shadow. The shadow adds a subtle drop shadow beneath the image, giving it depth and making it stand out from the page background.
Markdown syntax used:
<figure class="img-center img-shadow"><img src="{{ROOT_PATH}}assets/images/blog/demo-shadow.jpg" alt="Shadow demo image" loading="lazy"><figcaption>Shadow demo image</figcaption></figure>
Border — .img-border
This image uses .img-center combined with .img-border. The border adds a thin outline with slight padding, creating a framed effect. This works especially well with lighter images or screenshots that might otherwise blend into the page background.
Markdown syntax used:
<figure class="img-center img-border"><img src="{{ROOT_PATH}}assets/images/blog/demo-border.jpg" alt="Border demo image" loading="lazy"><figcaption>Border demo image</figcaption></figure>
Rounded — .img-rounded
This image uses .img-small combined with .img-rounded. The rounded modifier applies a circular crop. This is best used with square images, particularly headshots or profile photos. If used with a non-square image, it will create an ellipse.
Markdown syntax used:
<figure class="img-small img-rounded"><img src="{{ROOT_PATH}}assets/images/blog/demo-rounded.jpg" alt="Rounded demo image" loading="lazy"><figcaption>Rounded demo image</figcaption></figure>
All Three Modifiers Combined
This image uses .img-small with all three modifiers: .img-rounded, .img-shadow, and .img-border. You can stack as many modifier classes as you want.
Markdown syntax used:
<figure class="img-small img-rounded img-shadow img-border"><img src="{{ROOT_PATH}}assets/images/blog/demo-all.jpg" alt="All modifiers demo" loading="lazy"><figcaption>All modifiers demo</figcaption></figure>
Modifier + Float Combination
This image uses .img-right combined with .img-shadow, demonstrating that modifiers work alongside float classes too. The image floats right with text wrapping on the left, and it has a drop shadow for visual emphasis. You can pair any modifier with any placement class. For instance, .img-left .img-border would give you a left-floated image with a thin frame, or .img-banner .img-shadow would give a full-width banner with depth.
Markdown syntax used:
<figure class="img-right img-shadow"><img src="{{ROOT_PATH}}assets/images/blog/demo-right-shadow.jpg" alt="Right float with shadow" loading="lazy"><figcaption>Right float with shadow</figcaption></figure>
Quick Reference
- Featured: set
image:in front matter - Right wrap:
{.img-right} - Left wrap:
{.img-left} - Centered:
{.img-center} - Full width:
{.img-full} - Banner:
{.img-banner} - Small:
{.img-small} - Default: no class needed
- Shadow modifier: add
.img-shadow - Border modifier: add
.img-border - Rounded modifier: add
.img-rounded