Display an external image by looking up a JSON tiddler key/value pair?

1

I am going through the Reading data from JSON tiddlers documentation and trying to work out how to implement it so that I can display an externally hosted image just by looking up a key/value pair in a JSON tiddler consisting of URI’s, such as…

my JSON example 
{
  "coin.png": "https://i.ibb.co/YtXDT9p/coin.png",
  "energy.png": "https://i.ibb.co/WnwppcB/energy.png",
  "experience.png": "https://i.ibb.co/MgBS0VX/experience.png",
  "diamond.png": "https://i.ibb.co/NFKKmN3/diamond.png"
}

Source: Taonga Island Adventure Wiki — A TiddlyWiki for the mobile game Taonga Island Adventure from Volka Entertainment Ltd.

I presume that I will need to create a macro which takes the JSON data tiddler name as one parameter, and the search key as a second parameter, and returns the found value, which can then be passed into an <$image> widget as the source attribute. Presumably I’ll also need some error handling. Does all of that sound about right? It has been a long time since I last did something like this, so I am looking for a bit of validation here, or gentle nudging towards a better solution. All I’m trying to achieve is to have a simple list of links to my externally hosted images, and then be able to display them by looking up the list as a key/value pair. I want to be able to make these images easily reusable within my wiki, while giving a single point of reference to be able to update the external URI’s whenever needed, without having to chase back to every single tiddler which uses the updated image.

2

I have done the same thing, but I think the loop convenience of wikitext is too cumbersome. I solved this problem using js, and it is more flexible using js.

4

You can also check out this post which discusses some similar examples

5

Using a tiddler of type application/json for the dictionary, you have two options:

A) get the contents of the tiddler and use the JSON operators.

\function get.image(dict,key) [<dict>get[text]jsonget<key>]

<$image source={{{ [get.image[dict],[coin.png]] }}}/>

B) Treat it as a JSON data tiddler :

\function get.image(dict,key) [<dict>getindex<key>]

<$image source={{{ [get.image[dict],[coin.png]] }}}/>

Either one can used via a procedure for convenience:

\function get.image(dict,key) [<dict>getindex<key>]

\procedure showImage(dict,key)
<$image source={{{ [get.image<dict>,<key>] }}}/>
\end

<<showImage "dict" "coin.png">>

or simplified into a single procedure, for example:


\procedure showImage(dict,key)
<$image source={{{ [<dict>getindex<key>] }}}/>
\end

<<showImage "dict" "coin.png">>
6

Thanks for this @saqimtiaz. Can you remind me please, how would I would make this into a global macro / procedure so that the invocation for it can be accessed from any tiddler without having to expressly define the \procedure on every tiddler where it gets used. Also, do I need any error handling in the procedure, such as for what to do if the requested parameters do not exist?

7

Tag the tiddler with the definition as $:/tags/Global
https://tiddlywiki.com/#SystemTag%3A%20%24%3A%2Ftags%2FGlobal

Currently if the dictionary or key do not exist, I think you will get a broken non-loading image. What do you want to do in these situations?

8

That is perfect, I was wondering if I had to do something myself for handling this, but it looks like TW already has that built-in. Thanks again for the help with this! :raised_hand_with_fingers_splayed:

9

After all of that effort, I have just remembered about creating External Images as tiddlers. This might be a much simpler way to achieve the same thing, but without the need for a list of external images at all! Gosh, it is going to take me a while to get back into the “TiddlyWiki-way” of doing things! :grin:

https://taonga-island-adventure-wiki.tiddlyhost.com/#Images%20hosted%20on%20imgbb.com%20by%20FrittRo