# How to add avatar to tutorials

**URL:** <https://forum.makecode.com/t/how-to-add-avatar-to-tutorials/44824>\
**Category:** Educators' Lounge\
**Tags:** tutorial\
**Created:** [July 7, 2026, 6:23pm UTC](https://forum.makecode.com/t/how-to-add-avatar-to-tutorials/44824 "2026-07-07T18:23:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![PasAlt](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/pasalt/32/33199_2.png) [@PasAlt](https://forum.makecode.com/u/PasAlt)\
**Post date:** [July 7, 2026, 6:23pm UTC](https://forum.makecode.com/t/how-to-add-avatar-to-tutorials/44824/1 "2026-07-07T18:23:39Z")

</div>

I’m trying to create a tutorial for my students and I’m struggling a bit. I’m trying to add an image to it but it seems not to work. I tried the following.

> [@Path for Images in Tutorial on github](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/4):
>
> Assuming your custom tutorial repository has github pages turned on, you would need to inline the full image url in the markdown, not just the relative path. So in your case, you would want to use [https://schoolwidelabs.github.io/sensor-immersion/static/images/co2.png](https://schoolwidelabs.github.io/sensor-immersion/static/images/co2.png)

```auto
# Test
## Equipment
You will need
* 4.5 V battery (e.g. LR12)
* NeoPixel strip with 8 NeoPixels
* 4 cables to connect battery and NeoPixel strip
* Micro:bit with USB cable

![Shows equipment from above. The four cables are red, twice black and yellow.](https://raw.githubusercontent.com/PasAlt/neopixel-tutorial/refs/heads/master/img/material.png)

~hint Pins are hard to connect to
Sometimes NeoPixel strips don't have pins that can easily be connected to. You will have to solder that part on yourself (or ask your teacher to do it).
hint~

```

The image does not show up and everything after the image will not render. Here’s the my test:

> **[Microsoft MakeCode for micro:bit](https://makecode.microbit.org/#tutorial:28819-46251-60923-83384)**
>
> A Blocks / JavaScript code editor for the micro:bit powered by Microsoft MakeCode.

Regards,  
Pascal

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [July 7, 2026, 7:03pm UTC](https://forum.makecode.com/t/how-to-add-avatar-to-tutorials/44824/2 "2026-07-07T19:03:17Z")

</div>

The first image in each step is assumed to be the hint for that step. Click on the lightbulb (the “hint” button) at the bottom of the page, and you will see both the image and all of the text afterward.

To disable this behavior, you need to explicitly mark hints.

1. Set explicit hints at the beginning of the tutorial.  
`### @explicitHints true`
2. For _ **each step** _ in the tutorial, explicitly mark the hint to be displayed.

````markdown
#### ~ tutorialhint
```blocks
// Code for your hint goes here.
```

````