Clicking inside <summary> tag doesn't expand details, links to image instead

In this gist: image in summary tag.md · GitHub

When I click on the text “Click to expand preview”, the <details> tag is expanded as expected. However if I instead click on the image in the <summary>, it doesn’t work. GitHub automatically wraps all images in an <a> tag which links to the src of the image.

I tried following the advice here to disable this automatic linking by wrapping the image in a markdown link to #, which is what you see in the gist, but it seems that tip doesn’t work.

I also tried a blank or missing href in an HTML <a> tag, and a foreignObject inside an SVG.

In general, is it possible to stop GitHub from auto-linking images to themselves? Or is there any other way that I could make clicking on the image expand the <details>?

I want to have this kind of expandable image in my GitHub profile README. I thought it would be a neat trick, but it’ll backfire completely if it’s unusable.

2 Likes

Hi @alexmojaki and welcome to the community forum!

Thanks for making your first post.

This does look like a bug. I can’t say when or if this will be addressed, but thank you for bringing this to our attention.

The problem is worse than just images in the summary.

There needs to be a way to disable links on images.

Without the ability to disable links on images, the best we can do is <a href="#">IMAGE</a> and the problem there is what if you have multiple nested expanders? Triggering a href="#" will collapse all expanders. Thus we cannot safely put images inside of expanders at all unless the images are intended to be links to other pages.

Also, there appears to be no way to link to a page, automatically expand the expander, and move to a heading in the expander. That would be a nice feature as well, but a separate topic from images + expanders.