# Help with template

**URL:** <https://discourse.nodered.org/t/help-with-template/1058>\
**Category:** Dashboard\
**Created:** [25 June 2018 12:19 UTC](https://discourse.nodered.org/t/help-with-template/1058 "2018-06-25T12:19:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [25 June 2018 12:19 UTC](https://discourse.nodered.org/t/help-with-template/1058/1 "2018-06-25T12:19:37Z")

</div>

I'm having a template which shows a video from my camera .  
I wanted to be able to click on the video and doing so it directly opens the video on a new window.  
I'm able to make it with the links on the botton but no way by pushing on the video, any help with this template?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/44d201926985ec4a11a09444bc6b07f855bd8820.jpg)

The idea is to be able to select with a switch on the top when I'm connected through my internal network or external that makes the video be shown properly through the lan IP or my domain, this works fine.  
I made two links on the bottom to open in local or remote and this also works but the target is to remove the bottom links and be able directly to click on the video and open on another window as per msg.payload injected .

Thanks in advance for any support

```auto
<div ng-click= href= {{msg.payload}}>
<img src= {{msg.payload}} width="280"><br/>
<a href="http://192.168.1.156:8081" target="_blank">Camara 1 local</a>
<a href="http://mydomain:8081" target="_blank">Camara 1 remote</a>

</div>
```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [25 June 2018 13:06 UTC](https://discourse.nodered.org/t/help-with-template/1058/2 "2018-06-25T13:06:19Z")

</div>

Here is a way you could do it (if I understand what you want) This assumes you are using the ui-template node.

First you have to use msg.topic (or something else) to pass an even or odd value and with the payload (which is the image location) Next you have to add an ng-style to both \<a…\> statements like this:

```auto
<a ng-style="{display: (msg.topic || 0) % 2 === 0 ? 'none' : 'block'}" href="http://192.168.1.156:8081" target="_blank">Local</a>
<a ng-style="{display: (msg.topic || 0) % 2 === 0 ? 'block' : 'none'}" href="http://mydomain:8081" target="_blank">Remote</a>

```

What this will do is if the value is ODD, the \<a…\> for the local camera will display and the \<a…\> for the remote will NOT display. If the value is EVEN, the \<a…\> for the remote camera will display and the \<a…\> for the local will NOT display.

This is my test flow showing this you will have to change the url for your image in the change node:

```auto
[{"id":"f9e3e4e8.c9d9a8","type":"ui_template","z":"9728229a.e316b","group":"c802ad.2e912d5","name":"","order":0,"width":"9","height":"9","format":"<div>\n<a ng-style=\"{display: (msg.topic || 0) % 2 === 0 ? 'none' : 'block'}\" href=\"http://192.168.1.156:8081\" target=\"_blank\">Local</a>\n<a ng-style=\"{display: (msg.topic || 0) % 2 === 0 ? 'block' : 'none'}\" href=\"http://mydomain:8081\" target=\"_blank\">Remote</a>\n<img src= {{msg.payload}} width=\"280\"><br/>\n\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":160,"wires":[["e9e45c4.75022a"]]},{"id":"10695bd2.a74f54","type":"inject","z":"9728229a.e316b","name":"Local Camera","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":80,"wires":[["888b7571.b440c8"]]},{"id":"c97db1ce.df44e","type":"inject","z":"9728229a.e316b","name":"Remote Camera","topic":"","payload":"2","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":220,"wires":[["888b7571.b440c8"]]},{"id":"e9e45c4.75022a","type":"debug","z":"9728229a.e316b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":680,"y":160,"wires":[]},{"id":"888b7571.b440c8","type":"change","z":"9728229a.e316b","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"topic","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"http://localhost/pmw.jpg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":160,"wires":[["f9e3e4e8.c9d9a8"]]},{"id":"c802ad.2e912d5","type":"ui_group","z":"","name":"Default","tab":"40e4dd7b.57ed44","disp":true,"width":"12","collapse":false},{"id":"40e4dd7b.57ed44","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [25 June 2018 13:33 UTC](https://discourse.nodered.org/t/help-with-template/1058/3 "2018-06-25T13:33:12Z")

</div>

Hello Senofmud

Thanks a lot for your help, I tried and this is not exactly what I’m trying to do.

The target is to be able to clock on the video directly and this should open directly on a blank the address received as {{msg.payload}}.(that actually is what is shown as video.

Regards

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [25 June 2018 13:50 UTC](https://discourse.nodered.org/t/help-with-template/1058/5 "2018-06-25T13:50:56Z")

</div>

Ohh, in that case it is simple - msg.payload contains the link you want to go to and the ![]() is what you are looking at and going to click:

```auto
<div>
<a href="{{msg.payload}}" target="_blank"><img src="http://localhost/pmw.jpg" width="280"></a>
</div>

```

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [25 June 2018 14:01 UTC](https://discourse.nodered.org/t/help-with-template/1058/6 "2018-06-25T14:01:53Z")

</div>

Ohhhhhhhh thanks a lot 🙂 I own you a beer

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [25 June 2018 15:09 UTC](https://discourse.nodered.org/t/help-with-template/1058/7 "2018-06-25T15:09:23Z")

</div>

I believe you can just replace your “Camera 1 xxxx” string with the `<img ...>` element  
to make the image “clickable” (untested):

```auto
<div>
    <a href="{{msg.payload}}" target="_blank">
        <img src="{{msg.payload}}" width="280">
    </a>
</div>

```

You don’t say what the incoming payload contains exactly, but assuming it is a url of either `http://192.168.1.156:8081` or `http://mydomain:8081` then you should be able to include it directly into the href attribute as well as the image src attribute.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [25 June 2018 15:10 UTC](https://discourse.nodered.org/t/help-with-template/1058/8 "2018-06-25T15:10:52Z")

</div>

Aha! - Paul, you beat me to it…

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [25 June 2018 15:35 UTC](https://discourse.nodered.org/t/help-with-template/1058/9 "2018-06-25T15:35:14Z")

</div>

Thanks guys, I already started from the sample from zenofmud but replacing the [http://localhost/pmw.jpg](http://localhost/pmw.jpg) by msg.payload to match what I was looking for.

Regards