I was wondering if there is a method or plugin that can replace keywords with images

Question

Our answer formatting is relatively the same, such as in answers we always use the following to identify something important, required or referenced from, depending on what it is, for example:

Note: - This will be following by instructions for the previous line(s)
Important! - This will be followed by important instruction that are required for the previous line(s)
Prerequisite! -  In all cases, something must be done before this can be processed
Figure x - Where X is the Figure number, a small image that represents a thumbnail, not specifically a thumbnail of the image, but a small photo indicating the image is to follow with a number indicating which it refers to, such as F1, F2, F3...etc.
Reference - Processes may include sub-processes that are already documented as an answer and will be hyperlinked to that article. A reference image would be used to indicate so.

Basically, we would like to compose an answer and only have to type !Important and it would be replaced by a image representing Important.  Similarly for Note, Prerequisite, Figure and so on.  

Of course, these keywords would have to be predetermined or entered along with an associated image, which I would expect most likely in the Plugin Options.

Answer 1

The shortcode plugin may be what you want: https://github.com/NoahY/q2a-shortcode

Otherwise, a custom plugin to replace words would be fairly simple to write if you know basic PHP. Probably want a Layer plugin. See the docs for help: http://docs.question2answer.org/plugins/

Comments

This is exactly what we are looking for!  Thank you.

Answer 2

Just to show this in action, I created a shortcode example to use a keyword of !Important! as shown in Figure 1.  I also added an Important.jpg image to my /images folder

Figure 1

I then edited an existing answer to replace the word Important with !Important! as shown in Figure 2.

Figure 2.


Finally, after saving the document the text !Important! is replaced with the shortcode image as shown in Figure 3.

Figure 3.