Images referenced in Markdown content have no style sheet class

[singularsyntax]

Images referenced in Markdown content via the ![alt text](/path/to/img.jpg) syntax get rendered in HTML as:

<p>
    <img src="..." alt="..." title="...">
</p>

However, featured images specified by a post's front matter get rendered with a style:

<span class="image featured">
    <img src="..." alt="..." title="...">
</span>

This makes me wonder if body images should also be wrapped in a span:

<p>
    <span class="image">
        <img src="..." alt="..." title="...">
    </span>
</p>

The problem I'm having is that some of my post images are large, and they get displayed in full size since there is no style associated with them.

I'm aware that I could apply image transformations per Thumbnails:

{{ 'assets/image.jpg'|asset|scale(0.50) }}

But I'd have to repeat this for each image reference in a post, which kind of subverts the point of having a document style sheet, and of course CSS also has a richer set of options for image transformations.

[cjbrooks12]

Yeah, the scale function is intentionally labelled as "thumbnails", it's there for when you need to display an image significantly smaller than the original and not waste bandwidth.

The markdown renderer has support for adding classes/ids with the Attributes Extension, though that would also require custom work for each image in the post. There's not really any way to have the Markdown automatically wrap each image tag, nor should it, IMO; Markdown should ideally not require any styling to be displayed as intended, and should render pure semantic HTML without classes.

But the CSS of the theme should be able to deal with the large image problem. You can attach additional stylesheets to your theme for now, and I'll work on getting it set up so that the images are sized properly for the post content by default.

[singularsyntax]

I added src/orchid/resources/assets/css/components/_post.scss to the blog's directory hierarchy, then added the following overrides to the CSS for display of Markdown image references:

.post {
    /* ... */

    // Display photo at full size of containing box
    > p.photo {
        > img {
            height: 100%;
            width: 100%;
        }
    }

    // Display a caption after the photo
    > p.photo::after {
        content: attr(caption);
        display: block;
        text-align: center;
    }
}

Images are then referenced in Markdown like this:

![Some alt text...]({{ 'assets/media/some-photo.jpg'|asset }}) {.photo caption="Some Photo"}

which results in the following HTML being rendered:

<p class="photo" caption="Some Photo">
    <img src="..." alt="Some alt text...">
</p>

It does require a bit of boilerplate in the Markdown to style the image and add the caption underneath, but at least the syntax is natural and easy to remember.

[cjbrooks12]

I think the following snippet should help, it constrains all images within post content automatically, without needing to add the wrapper .photo caption tag. Large images are shrunk down to fit the container, while smaller images keep their original size. I'll get this snippet added in the default themes shortly.

.post {
  img {
    max-height: 100%;
    max-width: 100%;
  }
}

For adding a caption, you'll need to do some kind of additional boilerplate, beyond the normal alt text or title on the <img> tag. It seems <img> does not work with the ::before or ::after pseudoelements, so you can't add the title/alt attributes to them automatically with pure CSS (though some minimal Javascript could do the trick).

[cjbrooks12]

I've updated to the default CSS for the FurtureImperfect theme to add max-width: 100%; to images. All the other themes had this already in place. This has been released in 0.17.4.