Brendan Myers (Sep 22 2024 at 23:15): Brendan Myers (Sep 22 2024 at 23:15):Hi everybody!
I wanted to see if anyone might be able to help me with an issue I'm running into with building a Github website
I have added a number of images already by using markdown syntax and they all load correctly on the published website. That being said, for a few images I'm trying to use HTML syntax to have a little more control over the size and location of the image but these do not load on the published site (they do load in the preview in the repository however). I figure this should be a simple issue to fix, but I cannot figure out what I have wrong (I assume it's something I'm missing in my config file?). Here are links to my repository and site (for reference, the images on the Experimental Design page are ones with this issue).
Let me know if you have any ideas or tips!
Best,
Brendan
Michael Levy (Sep 23 2024 at 14:27):Your picture that isn't showing up on the Experimental Design page is coded as
<img src="images/Experimental02-AR-CAM5.jpeg" width="30%"><br>
While one that is appearing (on Algorithms) is
<img src="_static/ARTMIP_logo.jpg" class="logo__image only-light" alt="ARTMIP - Home"/>
I think you want all your images in the _static/ subdirectory or a subdirectory of it (e.g. _static/images/)
Michael Levy (Sep 23 2024 at 14:30):(My extremely basic understanding is that tools like Sphinx need to be told which directories to copy wholesale into the html/ subdirectory, and it looks like _static/ is one such folder for your page; because of this setup there is an html/_static/ but not an html/images/ when you build the website, so files in html/ won't find images in images/)
Michael Levy (Sep 23 2024 at 14:39):sorry, I apparently wasn't paying attention to what I was copying; the image I saw in Algorithms was
<img alt="Algorithm Grid" src="_images/AlgorithmGrid.v2.jpg" />
Maybe you just need to switch from images/ to _images/? Though it looks like https://brmy4086.github.io/ARTMIP/_images/Experimental02-AR-CAM5.jpeg doesn't exist either, so maybe you need to tell Jupyter Book to include that image when it copies images over?
Michael Levy (Sep 23 2024 at 14:45):One last set of poking around led me to this suggestion to use {image} in a substitution as a way to keep the image link in markdown, but specify the width
Brendan Myers (Sep 23 2024 at 22:21):@Michael Levy Thanks so much for helping dig around to figure this out with me!
It's interesting to me that the image on Algorithms is coded in html when you look at it... in my repo it shows that I coded it in Markdown. I tried adding the underscore and that didn't do the trick. But, I got the colon_fence extension working though so I'll go with that method!
Thank you so much for the help!!
Brendan
Michael Levy (Sep 23 2024 at 22:52):Glad it's working! I maybe should've been clearer -- I went to the github.io website you linked and then viewed the source code for two different pages to see what looked different
Brendan Myers (Sep 24 2024 at 19:21):Oh that makes sense and should've been obvious! I'll definitely use that trick in the future!
Last updated: May 16 2025 at 17:14 UTC