Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Comments on Make images easily clickable for full-size viewing
Parent
Make images easily clickable for full-size viewing
I want to propose a feature that makes embedded images easily clickable, allowing them to be opened in full size (ideally in a new tab or lightbox-style overlay).
Currently you have to right-click on the image to open up the context menu:
- Copy Image Link -> open it in a separate tab
- Open Image in New Tab
This comment by Olin makes me believe that this procedure isn't very intuitive or well known.
(I wanted to respond to his comment, but wasn't able to, because as a new user, I can only comment on my own posts and answers to them.)
Post
Workaround
Until it's decided whether to implement an easier way to view a large version of the image (and how that should work from a user perspective), here's a way you can already make the image viewable with a single left click, to make things simpler for your readers:
Markdown allows making an image a link, so that clicking on it opens the link target.
Markdown for a standard image
This requires the user to work out how to open the image in a new tab, and it will remain at this low resolution. Hovering over the image shows a standard mouse cursor with no hint to the user.
Markdown for an image as a link
[](URL to be linked to)
This is a link to the image that the user can simply click on (to open in the same tab) or ctrl-click / cmd-click / middle-click (depending on their operating system and browser) to open in a new background tab. Hovering over the image shows the mouse cursor associated with a clickable link, making it easier for the user to discover this functionality. In many cases it will be worth also mentioning this explicitly (particularly as not every device can display a mouse cursor, for example touchscreens).
Notice that the two URLs do not have to be identical. You can display a low resolution image in the post, and link to a much higher resolution image to be viewed by users who choose to click on it (as has been done here - you can try clicking on it).
It isn't just the resolution that can be different. In the example in the question, just the central diagram could be displayed in the post, with the full image with surrounding context shown when clicked on (or whatever works best for your particular question).
Image attribution
The small image used in both examples:
- Frederico José Andries Lopes, CC BY-SA 3.0, via Wikimedia Commons
The large image linked to in the second example:
- Joshi1983, Public domain, via Wikimedia Commons
1 comment thread
1 comment thread