POC: Panel tutorial: Add static image with slider for thumbnail image

[yvonnefroehlich]

Description of proposed changes

While adding a tutorial how to use panel with PyGMT to create an interactive visualization, we faced the issue that the slider is not visible in the thumbnail image (please see the comments and discussion up on comment #2498 (comment)).

One solution is to use an external image showing one of the figures generated in this tutorial and containing the slider. This is probably not the optimal solution, but it is at least a workaround. This can be achieved by using sphinx_gallery_thumbnail_path instead of sphinx_gallery_thumbnail_number (please see https://sphinx-gallery.github.io/stable/auto_examples/plot_4b_provide_thumbnail.html for details). Locally, this worked for me. Currently, I am not 100 % happy with the resolution of the image, but the file size should not be so / too large.

Preview: https://pygmt-dev--2736.org.readthedocs.build/en/2736/tutorials/index.html#advanced

Reminders

• Run make format and make check to make sure the code follows the style guide.
• Add tests for new features or tests that would have caught the bug that you're fixing.
• Add new public functions/methods/classes to doc/api/index.rst.
• Write detailed docstrings for all functions/methods.
• If wrapping a new module, open a 'Wrap new GMT module' issue and submit reasonably-sized PRs.
• If adding new functionality, add an example to docstrings or tutorials.
• Use underscores (not hyphens) in names of Python files and directories.

Slash Commands

You can write slash commands (/command) in the first line of a comment to perform
specific operations. Supported slash commands are:

• /format: automatically format and lint the code
• /test-gmt-dev: run full tests on the latest GMT development version

[seisman]

I'm unsure if this PR will be accepted, but at least you can try https://squoosh.app/ which can optimize the image size from 143 KB to ~20 KB without visible resolution loss.

[yvonnefroehlich]

I'm unsure if this PR will be accepted,

Yes, I am aware of the limitations of this solution. And it's fine with me if we decide to keep the current thumbnail from the code without the slider. We also have to keep in mind that the external image has to be updated manually when the example is changed significantly.

but at least you can try https://squoosh.app/ which can optimize the image size from 143 KB to ~20 KB without visible resolution loss.

This is done in commit 2aaede3.

[seisman]

Does sphinx_gallery_thumbnail_path accept a full URL? If yes, then we don't have to include the image in the repository.

[yvonnefroehlich]

Does sphinx_gallery_thumbnail_path accept a full URL? If yes, then we don't have to include the image in the repository.

I tried this locally and there it did not work.

[seisman]

I prefer not to merge this PR because it makes only slight improvements (the slider is small in the thumbnail and difficult to see) but increases the repository size by 25 KB.

[yvonnefroehlich]

I prefer not to merge this PR because it makes only slight improvements (the slider is small in the thumbnail and difficult to see) but increases the repository size by 25 KB.

For me, it's OK to leave the thumbnail image as is and close this PR. Aside from the file size, I am not so happy with having to update the image manually when changing the code. I can leave this PR open for one more day, if others want to add comments or suggestions.