Adding images to your flow or node's ReadMe in the Node-RED library

Core Development
1

Have you ever added a node of flow to the Node-RED Library and said to yourself

"Oh, this ReadMe would be so much better if I could just add a couple images to it!"

However, git does not allow you to copy an image directly into the ReadMe. But never fear, there is a simple way to do it!.

  1. create your readme and save it.
  2. drag an image into a comment
  3. edit the comment and copy the markup for the image.
  4. edit the readme, paste the markup where you want the image to appear.
  5. save the the changes and delete the comment (if you want)

that's it, you are all done. To see an example where I added an image of the flow at the end of a readme see DEMO: multiple devices (pickable via a dropdown) feeding single gauge (flow) - Node-RED

2 Likes
2

Hi Paul,
That's pretty neat, I think I might have a situation where I can use this idea/flow.

Thanks for sharing.

3

Hey Paul,

Thanks for sharing! I used that trick also for one of my nodes some time ago (based on a similar article), but then suddenly I thought: suppose the Github guys delete all the images (that I have added this way) at some future time. I have no clue whether that will ever happen, but since then I add them again to my Github repository:

image

This allows me also to restore older versions of my images.

But the main disadvantage is that now my images are also deployed with 'npm install ...', which is rather resource inefficient ... I suppose I can avoid that somehow (e.g. with the .gitignore file ?), but hadn't have a chance yet to figure that out ...

4

If you are worried about GitHub deleting things from a Gist (I doubt they care unless you are chewing up many Gb of data storage), why not simply create a new repo just for the image files?

5

@TotallyInformation,
Indeed I assume also they don't care at all. But you know that suddenly a new manager can jump of out a box, and introduce weird decisions :rofl:

Will try soon this stackoverflow tip. Would be nice if I could exclude my 'Images' folder via that .npmignore file ...

6

As github and npm are currently two separate entities yes you can use .npmignore to ignore whatever from what you push to npm. Of course then the readme on npm would need to point to the images on github as they would no longer be "local" to npm.

2 Likes