Click on images to zoom

[HelgeGehring]

Images with quite a lot of details or a wide aspect ratio are hard to see as they don't fit that well within the width of content column.

Proposal

Would it be possible to show on-click a full-screen overlay with the image?

Besides that, would it be possible to add an option to control the width of the content column?

Additional notes

Thanks!

[HelgeGehring]

@agoose77 @rowanc1
would there be a simple way to adjust the width?
I don't have any idea where to start looking for it :(

[rowanc1]

Beyond the width of the image (which stays within the current column), you can change the column for the entire figure to take over the margin/page/screen with:

:::{figure} ./image.png
:class: col-page-right
:::

You can also do that for a block of content using:

+++ {"class": "col-page-right"}

This does overlap/interfere with the document outline at the moment, so less documented at the moment.

There is a full list of column classes here:
https://jupyter-book.github.io/myst-theme/?path=/docs/components-grid-system--docs#column-names

[HelgeGehring]

Thanks a lot!

How would I use that within a jupyter notebook that i include? (for the outputs of the code cells)
And would there be a "global config" to make the content column wider for everything?

Thanks!

[rowanc1]

For the outputs, you should be able to use the figure directive again:

:::{figure} #my-cell-label-with-output
:class: col-page-right
Caption...
:::

It may also be possible to add to the cell metadata to add a class, but I am not sure if that is hooked up and haven't tested!

There is not really a global config yet, there is the ability to switch between article and book theme, which is basically that. We are thinking about adding these options on both a site-wide level as well as a per-page level.

[HelgeGehring]

That would be if I include the output again, right?
Right now, I'm directly including the ipynb file, thus I don't have to write the above figure directive at all (?)

oh, just adding that to the meta-data of the cell would be great! You mean with a tag? Like remove-output? or are there other ways to add meta-data in ipynbs?

site-wide and per-page options would be just amazing 🥳

[rowanc1]

You can add:

#| class: col-page-right

To your code cell, which creates:

That could be combined with a remove-input tag, which might get you pretty close to what you are looking for!

[HelgeGehring]

wow, that does a pretty great job 🥳 thank you soo much!

now i also see the overlap of the outline with the content :/ the main problem here is that the background of the outline is transparent which makes the look not that nice. I'd guess if the outline get's long it would also get problematic 🤔

a site wide config for the content width would I think solve all that 🤔 also, setting the width for certain pages would be really nice 🤔