Reduce image size

[allyhawkins]

Closes #316

I changed all the image widths to 800 px, but I can't figure out how to adjust the display size. It looks like we set the max width using .wy-nav-content in the style doc, but I don't know how to specify a smaller size for just the images.

I'm still looking into this but wanted to file this as a draft for now and see if anyone has any ideas on how to adjust the display size @dvenprasad or @jashapiro?

[jashapiro]

I think you have to convert to using tags instead of markdown: <img src="paths.png" alt="path image" width="400">

[allyhawkins]

I think you have to convert to using tags instead of markdown:

I think we need to make some other change to be able to support this. Adding <img src="./images/project-download-folder.png" width="400"> results in this:

[jashapiro]

I think you have to convert to using tags instead of markdown:

I think we need to make some other change to be able to support this. Adding <img src="./images/project-download-folder.png" width="400"> results in this:

Did you try without ./?

[allyhawkins]

Did you try without ./?

Yes 😢

[jashapiro]

I would expect one of the options here to work: https://myst-parser.readthedocs.io/en/latest/syntax/images_and_figures.html, but one one of those was the img tag, so I am less certain than I would have been!

[dvenprasad]

Try adding this to the styledoc

.wy-nav-content img {
     max-width: 400px;
}

[dvenprasad]

Actually, is this the only image you want to set a max width for? The above will set the max width for all images across the docs.

[allyhawkins]

Actually, is this the only image you want to set a max width for? The above will set the max width for all images across the docs.

No we want to set it for all of them so I will try that!

[jashapiro]

I don't think we necessarily want it for all of them...

But I found a few things: One is that <img src="_images/project-download-folder.png" width="400"> should work.

More verbosely, but with simpler paths:

```{image} images/project-download-folder.png
:alt: project download folder
:width: 400px

also works.

[allyhawkins]

You're right, I forgot we add images in the FAQ section that I don't want to resize. I went with this solution:

But I found a few things: One is that <img src="_images/project-download-folder.png" width="400"> should work.

Let me know if you would prefer the other one. Thank you both!

[jashapiro]

Let me know if you would prefer the other one. Thank you both!

Actually, I think what I prefer is this one:

![project download folder](images/project-download-folder.png){width=400px}

but that requires adding

myst_enable_extensions = ["attrs_inline"]

to conf.py

[allyhawkins]

Let me know if you would prefer the other one. Thank you both!

Actually, I think what I prefer is this one:

![project download folder](images/project-download-folder.png){width=400px}

but that requires adding

myst_enable_extensions = ["attrs_inline"]

to conf.py

I had actually tried that in my initial testing and see this error: [E 240717 14:38:33 server:94] b"WARNING: myst configuration invalid: myst_enable_extensions not recognised: {'attrs_inline'}\n"

[jashapiro]

Oh, I guess we have a very old version of sphinx set....

In .readthedocs.yml I would recommend changing the python version to 3.10 Then in requirements.txt we can update to a more recent version of sphinx & myst:

Sphinx==5.3.0
myst-parser==1.0.0

We could go to even more recent versions, but I think these will work.

After updating, you will need to run pip install -r requirements.txt to update your local install...

[allyhawkins]

@jashapiro I updated the versions like you mentioned and then was able to use the {width="400"} addition. I did also fix some broken links to headers that were giving me issues along the way, but this should be ready for another look.