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

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?

Markdown
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

Image in a Bookmarks widget
Image in a Bookmarks widget

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

Images and Emoji's
Images and 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.

Stefan van Dierendonck

Stefan van Dierendonck

For many years Stefan has been active as a blogger, building and maintaining his own and other websites. He is also the author of two well-received novels. Wherever possible, he tries to combine modern technology with literary or at least pleasantly legible content.


(It's free and will only take a minute)

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

    1. I’m not sure, VinnieDaArm, but I see the advantages in adding a checkbox to your notes. I’ll check with the developers and ask them to think about adding this functionality. In the meantime, you could try our Todo Widget: here the checkboxes are added automatically, and you can use them to navigate too. Hope this helps!

  1. I followed the instructions and pasted the link but the image does not show. The link shows in the description. I use firefox on a Win 7 PC

    1. Hi Ghazola, Thanks for leaving a comment. I’m not sure what you’re telling me, could you explain? Thanks!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to our blog via email

If you want to stay up-to-date, enter your email address below. You will receive notifications of new posts by email.

Subscribe to our blog ➔