codidact
Generate markdown links for uploaded images
meta:294143
When you use the image uploader to add an image to a post, we generate markdown to show the image. We upload images at the original size (related: https://github.com/codidact/qpixel/issues/1133), but we scale down for presentation, to fit in the post bounds. If you want to see the original, you need to get the image URL and then open it manually.
Markdown has syntax to linkify images, like this (h/t @trichoplax ):
[](URL to be linked to)
If I understand correctly, if we generated that Markdown, using the same URL for both, then we'd get links that would open at original size. If that's correct -- can we do that?
Possibly related: https://github.com/codidact/qpixel/issues/1246
If it were decided to do this, it would be a very small code change. In app/assets/javascripts/posts.js we would change line 102 from:
$postField.val(postText.replace(placeholder, ``));
to:
$postField.val(postText.replace(placeholder, `[](${data.link})`));
Note: I haven't tested this - it's my assumption of what would be required.
However, I wouldn't want to assume that this is wanted. This would make every uploaded image a link. If there's no objection to this, it's easy to implement. If instead it's decided to make it optional (perhaps a checkbox in the upload dialog) it would still be a fairly small front-end only change.
If there is no objection on Meta, maybe run it past @superplane39 for an accessibility judgement call. I can't think of any concerns but I'm wary of assuming.
The only objection I personally can think of is that if I see a small image in a post, and I click on it only to find the post replaced with the same small image with no additional resolution, I might wonder why someone chose to make it a link. I can see this being useful when an image is wider than we display, so clicking it gives a higher resolution, that can be zoomed into without just pixelating. When an image is narrow enough to be displayed at full size, there's no advantage to it being a link and having to click to find this out could be frustrating.
That's a good point about small images. And small is in the eye of the beholder, not a static property of the page, so we probably can't be "clever" about deciding when to include a link versus not. This argues for your suggestion of a checkbox in the uploader for "make image a link". Sure, a user who doesn't want a link could edit the Markdown, but that logic assumes some things I don't think we should assume.
Indeed - a user who's using the image uploader may not know how Markdown images work so may not realise that there's a reason to edit it. In principle I like the idea of only making the image a link when it's wider than the post, but yes that's variable - people view posts at different widths.
A checkbox is probably my personal preference at the moment, although that does mean that images wide enough to benefit from being automatically made into links won't be unless the user thinks to tick the box. I don't think there's a perfect answer here.
I've just compared desktop to mobile:
- On desktop our automatic page scaling means zooming in makes the text of a post bigger, but keeps shrinking the image back to fit the newly scaled post width, so opening as a link is the only way to zoom in on the image.
- On mobile zooming doesn't trigger the post to rescale to fit the screen, so it really is like just looking at the post close up, without changing its shape. This means even an image that is too wide for the post can be zoomed in to reveal detail significantly smaller than a pixel, making opening as a link less important.
I've only checked desktop Firefox and mobile Firefox. I'm guessing that other browsers are similar.
On desktop in Chrome, zooming (ctrl-+, just to be explicit here) zooms the text but doesn't affect the image until I zoom enough that it rolls over the mobile view, at which point the image gets bigger. I suspect there's enough variability in the matrix of browser x platform that we probably can't assume that the client will "do the right thing" in a particular circumstance.