Question

How do you embed an image in markdown?

  • 4 February 2022
  • 3 replies
  • 826 views

Userlevel 1

Hi,

 

Was recently trying to embed an image in a collapsible section - where the image part of the markdown looked something like this: `<img src="...image.png" width="200" height="200" />`

The problem is whatever image I put in markdown expands to the width of the guru page → meaning I’m unable to make the image smaller than the width of the guru page (even if I tweak the width and height values in the markdown)…. I noticed in a past Q+A  → it was stated that Guru uses the `CommonMark` / github flavor of markdown - however, I tried my markdown in both CommonMark and github and minimizing the image size works there --- but not in Guru for some reason.

 

It’s important for me to have the image embedded via markdown due to the need to embed the image within a collapsible section.  Please let me know if there is anything I can do or if I’m doing something wrong.


3 replies

Userlevel 7
Badge +3

Hi @Meng , thank you for walking us through your blocker here. I apologize for any frustration! I believe this is a bug. Even though we have the ability to collapse sections, currently there are limitations to Guru's markdown functionality.  We hope to have a markdown editor robust enough to support more in the future. 

 

I think it’s worth sharing your image needs with our product team through the product ideas section of the Guru Community. well to get support and more visibility for our team. You can also add a link to this thread so it’s easy for everyone to understand what led to the feedback.

 

In the mean time, happy to help troubleshoot content structure to support you. We typically recommend keeping Cards bite-sized so that people on your team can easily search and find the information they need. I know you have certain needs and limitations, and I’m sure folks in the Community will be happy to share their approach on similar content.

 

Please let me know if you have any additional questions. Happy to chat more!

 

for <img x=”y”>

i am finding that the width=”n” on its own works fairly reliably. scaling the height to suit.

and that its the use of height=”n” that starts to confuse the code and cause full width images.

<img style="width:40px" src=”...”>

Explicitly using style worked for me in adjusting the size of the image in my markdown.

I also used the collapsible section, so this is the exact same use case.

Reply