Add a clickable image to Text input

🚀 Need help? Ask here!
1

I want to add a link to our instruction videos, by letting users click on a play img, instead of a blue underlined text string. I thought this was possible, because the Text() field can handle markdown. So I added:

page_1.information.plot.instructions = Text(“Alt text”)

However, it does not convert to a clickable image… What do I do wrong? Or is this not possible in viktor?

2 Likes
2

Hi @marliesbuijs,

I think you might indeed be bumping into a limitation, namely:

Using HTML tags in Markdown-styled text is not supported, all HTML tags are automatically stripped for security reasons. Markdown links will always open in a new tab.

as described in Layout & styling - Style text using Markdown | VIKTOR Documentation. Was your alt text a link to a webpage by chance?

3

As an additional reply, I am of course not sure how long your video is, and if it includes sound, but just to maybe start some inspiration on a workaround I’ve in the past seen instruction videos converted to .gif that were then shown directly in the VIKTOR app in an imageview.

4

Hi! Thanks for your reply! Im not sure i actually used an HTML tag, but I can see in the documentation at the same page that images in markdown cannot be shown.

I also cannot add an imageview, since you cannot make that image clickable either.

My usecase is that I want to add a link to an instruction video to all pages of our tool. That instructionvideo has sound and takes a couple of minutes. So Im afraid a gif is not good enough for this purpose.

5

@rweigand Can we turn this from a support ticket into a feature request ticket?

6

HI @marliesbuijs,

So sorry, I missed your replies! We can of course update this to a feature request. In the meantime though, does the combination of a static image with a vkt.Text field work well enough for you?

E.g.:

class Parametrization(vkt.Parametrization):
    image = vkt.Image('path_to_img.png')
    link = vkt.Text('This is *some* Markdown **styled** text containing a [Link](http://a.com)')