news: Make images embedded in posts responsive

[Holzhaus]

No description provided.

[Be-ing]

This is helpful, but it only works for images that are wider than the text column at 1x scale factor. Other images have to have max-height specified in px, which I don't think can be done in Markdown.

[Holzhaus]

This is helpful, but it only works for images that are wider than the text column at 1x scale factor. Other images have to have max-height specified in px, which I don't think can be done in Markdown.

What do you mean? Why would you want to specify max-height? The aspect ratio is kept automatically. And if you have images that are not as wide as the text they will stay at their original size.

[Be-ing]

The first image does not have max-height set, the second does.

[Be-ing]

@radusuciu @randombyte-developer any input on how we should handle this?

[Holzhaus]

Is the upper image enlarged? If the image is actually that big, we should just downscale it to the appropriate height. Downscaling it via HTML just creates unnecessary traffic.

[Be-ing]

The really proper way to handle these images for different scale factors is with the srcset attribute for img. I don't think Markdown has any way to do that.

That's also quite a bit more work to scale all those images. For the main website, I think the work is worthwhile; for a blog post with a few images, probably more trouble than it's worth.

[Holzhaus]

That's also quite a bit more work to scale all those images. For the main website, I think the work is worthwhile; for a blog post with a few images, probably more trouble than it's worth.

If you have ImageMagick installed, you can resize all images in the current working directory to 300 px height using this:

$ mogrify -resize x300 *.jpg

[Holzhaus]

@Be-ing as a workaround we can also do this:

-{% filter markdown %}
+{% filter markdown:"extra" %}

 Some text.

-![my caption](path/to/image.png)
+![my caption](path/to/image.png){: style="max-height: 256px" }

[Holzhaus]

Merge? This doesn't break anything, just makes sure that images bigger than the viewport are resized.

[Be-ing]

So how should we handle this? I am okay with merging this PR, but you closed it?

[Holzhaus]

Already fixed with the new theme. This should work: #93 (comment)