How to use Markdown to add images & emoji’s to start.me: Part 3

Do you want to add images to your Bookmarks widgets or Notes widgets? It’s easy with Markdown. Here’s what you need to know.

Back to basics: do you remember Markdown?

When we thought about adding functionality for our users, we decided that Markdown was the best way to go. It’s lightweight, easy to understand and use, and flexible.

If you want to read more about the basics, we’ve got you covered in the first part of this blog series. We’ve also authored an article about adding numbered lists and subheadings. In that second article, we promised our readers a new part of the series soon. Well, it turned out that this took a bit longer than expected, but now where’re back!

Now, let’s add images

In the image above, you’ll see how you can upgrade the experience of your Bookmarks widget. Yes, you can stick to the trusted bookmark links, but why not add a picture of your best friend?

Here’s how to do this:

1. Make sure you’ve located an image you want to display. We recommend a compressed PNG or JPG format, to keep the loading speeds of your page short and useful.
2. Go to one of the many providers of image hosting, to get a universally available HTML-link to your image. For this example, we chose ImgBB.
3. Upload your image, select Don’t autodelete, and then HTML Full linked.
   
4. Now you copy the HTML link you’ve just created to the clipboard.
5. Next, go to the destination Bookmarks widget, and double click the header to start Edit mode.
6. Click the Description icon.
   
7. Paste the image link in the description field.
   
8. Click Done to confirm.

You can use this method to add images to the Notes widget, or even to single Bookmarks. If there’s a description field with Markup support, you’re fine.

Another application: add emoji’s

Another excellent Markdown feature is the option to add Emoji’s to your pages. With it, you can add some feeling to your pages, which is especially useful for teachers, we think.

Instructions:

1. Go one to of the many free online databases for HTML symbols. For this example, we chose w3schools.com.
2. Select the Emoji you’d like to add to your page. Click Try it to see it in the simulator.
3. Select the part that says “<span style=’font-size:100px;’>&#128513;</span>” and copy it to the clipboard.
   
4. Go the Notes widget to the place where you want the Emoji to appear. Make sure the Notes widget or Bookmarks widget are in Edit mode.
5. Paste the code. You can change the size of the emoji, by changing the font-size. In this example, we’ve used a font size of 50 px.
   
6. Click Save to confirm and see the note with the Emoji.

What do you think?

So here are two more useful tools for anyone with a start.me page. Are you going to try this out now? We really hope so!

And please let us know what you think in the comments below.