Figures from notebook outputs with link to img file

[whitead]

I have a notebook with a complex image output. It would be nice to make the image be link so that a mobile user could click to see the image. I know that normal figures are links. Normal output from notebooks do not have links. I tried using glue and then a figure directive, but that does not provide a link. Is there a way I can change the directive or must I save the figure and link to it? Thank you!

[whitead]

I wrote some javascript that can be included. Maybe this will help someone else. Seems important on mobile especially. Put the code below in _static/pick_a_name.js.

function insert_anchor(element) {
    if (element.parentElement.tagName !== 'A') {
        let new_a = document.createElement('a')
        new_a.href = element.getAttribute('src')
        let p = element.parentElement
        element.parentElement.removeChild(element)
        new_a.appendChild(element)
        p.appendChild(new_a)
    }
}

function add_img_anchors() {
    let figs = document.querySelectorAll(".figure img")
    figs.forEach(insert_anchor)
    let cell_outputs = document.querySelectorAll(".cell_output img")
    cell_outputs.forEach(insert_anchor)
}

window.addEventListener('load', **add_img_anchors)**

[chrisjsewell]

Thanks for sharing @whitead 😄
Yeh I see what you mean, I will try to look into this in myst-nb at some point, it should certainly be possible

[chrisjsewell]

I've opened executablebooks/MyST-NB#240

[chrisjsewell]

New in v0.8.0 see https://jupyterbook.org/content/figures.html#markdown-figures 😄

[whitead]

Thanks @chrisjsewell !

[chrisjsewell]

BTW I noted a weird thing happening, whereby the image/figure would only be a link, if it included a height/width. Don't know if this was just for me, or is a bug in sphinx, myst etc

[whitead]

@chrisjsewell I think it's always been the case. At least since I've been using jupyter book.