Struggling with images in course-in-a-box

Tech Course in a Box
#1

Hi there! I’m new here and I’ve been working on building my own course using the amazing course-in-a-box template.

I cannot seem to get my images in the modules to show up and I’m hoping someone can help me figure it out. My image showed up just fine in the index.md file, but when I try to add them to the .md files in the modules, they show up in the github preview, but they don’t render at https://emjay37.github.io/course-in-a-box/.

I have tried using markdown with relative and absolute paths, html with relative and absolute paths, tried creating a static link, and tried adding another images folder within the /posts directory. Most of these methods look like they work in the github preview (I can see the image), but when I go to the actual site, I either see a missing image icon or nothing at all, depending on the method I used.

I am a novice at html and github and an absolute beginner at markdown, so I’m assuming this is something I’m doing wrong, rather than a bug. Can anyone give me some guidance on how to get my images to show up?

Thank you!!!

1 Like
#2

Hi @Emily,

The template is a little tricky when it comes to including images. To get the correct URL for your images, you need to prepend it with: {{site.baseurl}}. {{site.baseurl}} would evaluate to course-in-a-box/ in your case.

For example, I see you’re including an image on this page:

<img src="img/treeFortLogoLarge.png" class="center">

For the right URL, it should be

<img src="{{site.baseurl}}/img/treeFortLogoLarge.png" class="center">

Let me know if you don’t get it sorted.

#3

Hi Dirk, I am struggling with the same problem, and saw your suggestion here, which leave me with more questions. In the Course-in-a-Box instructions, the following is given as the example code to insert images:

![alt](/img/logo.png)

Which is different from what you list above, it seems. I’ve played around with this and tried all sorts of variations (replaced logo with my image name, included text or no text in the [alt], etc., but had the same results Emily had–the image shows up in preview, but not on the actual course page. Any tips? Thank you!

#4

hi @Nicole_James, you are correct, the markdown way of adding an image is

![alternative text for accessibility](/url/to/the/image)

You can also include HTML snippets in your markdown content, so you could add an image like in the post above. This is useful if you want to specify properties other than just alternative text.

In both cases, the URL should point to the image. If you fork course in a box and host it using github pages, it will live at a URL like https://stbibkoelnnicole.github.io/course-in-a-box/. For images to show up, you need to make sure that the URL you use includes /course-in-a-box/, ie /course-in-a-box/img/logo.png.

For this to work regardless of whether you are hosting your course on github’s domain (github.io) or a custom domain you’ve set up, you can include a variable in the URL that will be replaced by jekyll {{site.baseurl}}/img/logo.png.

If you’re still having trouble, send me a link to a page where you’re having trouble with images and I can have a look.

1 Like
#5

Thanks @dirk! Your instruction to include the {{site.baseurl}} variable in the image link worked perfectly for me. My site is hosted on Github pages as a ‘child’ site - it appears as a directory within another repo that is my main domain