\n \\n\n\n\n", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 920, "y": 160, "wires": [ ] }, { "id": "983accca62164a4f", "type": "ui-button", "z": "8414ba447a2dbaf8", "group": "9f5d1a47bb7f4dc4", "name": "", "label": "Image 1", "order": 2, "width": "2", "height": "1", "emulateClick": false, "tooltip": "", "color": "", "bgcolor": "", "className": "", "icon": "fa-picture-o", "iconPosition": "left", "payload": "/sie.png", "payloadType": "str", "topic": "topic", "topicType": "msg", "buttonColor": "", "textColor": "", "iconColor": "", "enableClick": true, "enablePointerdown": false, "pointerdownPayload": "", "pointerdownPayloadType": "str", "enablePointerup": false, "pointerupPayload": "", "pointerupPayloadType": "str", "x": 620, "y": 160, "wires": [ [ "d2a0f910f42926c4", "9e994912cda4bdc5" ] ] }, { "id": "21474f2a291ab887", "type": "ui-button", "z": "8414ba447a2dbaf8", "group": "9f5d1a47bb7f4dc4", "name": "", "label": "Image 2", "order": 3, "width": "2", "height": "1", "emulateClick": false, "tooltip": "", "color": "", "bgcolor": "", "className": "", "icon": "fa-picture-o", "iconPosition": "left", "payload": "/sfc.png", "payloadType": "str", "topic": "topic", "topicType": "msg", "buttonColor": "", "textColor": "", "iconColor": "", "enableClick": true, "enablePointerdown": false, "pointerdownPayload": "", "pointerdownPayloadType": "str", "enablePointerup": false, "pointerupPayload": "", "pointerupPayloadType": "str", "x": 620, "y": 240, "wires": [ [ "d2a0f910f42926c4", "9e994912cda4bdc5" ] ] }, { "id": "8fc61d0e3bf6e35d", "type": "ui-template", "z": "8414ba447a2dbaf8", "group": "8c59c7cdf7b5abd5", "page": "", "ui": "", "name": "", "order": 1, "width": 0, "height": 0, "head": "", "format": "\n \n \

\n \n\n\n\n\n", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 200, "y": 200, "wires": [ ] }, { "id": "9e994912cda4bdc5", "type": "debug", "z": "8414ba447a2dbaf8", "name": "debug 7", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 880, "y": 320, "wires": }, { "id": "34f86af2cfa2227c", "type": "comment", "z": "8414ba447a2dbaf8", "name": "Image Dynamic", "info": "", "x": 140, "y": 600, "wires": }, { "id": "fc5ad03aaf82ca1b", "type": "inject", "z": "8414ba447a2dbaf8", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "/giphy3.gif", "payloadType": "str", "x": 160, "y": 640, "wires": [ [ "ced2801f3f933d59" ] ] }, { "id": "ced2801f3f933d59", "type": "ui\_template", "z": "8414ba447a2dbaf8", "group": "2e4c68c427bee1fb", "name": "Logo from local", "order": 1, "width": "10", "height": "6", "format": "\ Gif

", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 640, "y": 620, "wires": [ ] }, { "id": "1fa96f4f4364c071", "type": "ui\_button", "z": "8414ba447a2dbaf8", "name": "", "group": "2e4c68c427bee1fb", "order": 2, "width": "5", "height": "1", "passthru": false, "label": "Image 1", "tooltip": "", "color": "black", "bgcolor": "", "className": "", "icon": "fa-picture-o", "payload": "/sie.png", "payloadType": "str", "topic": "topic", "topicType": "msg", "x": 320, "y": 600, "wires": [ [ "ced2801f3f933d59", "df494a696c910caf" ] ] }, { "id": "6e0505a73450ceb7", "type": "ui\_button", "z": "8414ba447a2dbaf8", "name": "", "group": "2e4c68c427bee1fb", "order": 3, "width": "5", "height": "1", "passthru": false, "label": "Image 2", "tooltip": "", "color": "black", "bgcolor": "", "className": "", "icon": "fa-picture-o", "payload": "/sfc.png", "payloadType": "str", "topic": "topic", "topicType": "msg", "x": 320, "y": 700, "wires": [ [ "ced2801f3f933d59" ] ] }, { "id": "df494a696c910caf", "type": "debug", "z": "8414ba447a2dbaf8", "name": "debug 8", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "statusVal": "", "statusType": "auto", "x": 560, "y": 840, "wires": }, { "id": "9f5d1a47bb7f4dc4", "type": "ui-group", "name": "Group 16", "page": "c9cceec993890c0e", "width": 6, "height": 1, "order": 2, "showTitle": true, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "8c59c7cdf7b5abd5", "type": "ui-group", "name": " ", "page": "c9cceec993890c0e", "width": "8", "height": 1, "order": 1, "showTitle": true, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "2e4c68c427bee1fb", "type": "ui\_group", "name": "Dynamic UI", "tab": "d08aa9c6b57536db", "order": 2, "disp": true, "width": "10", "collapse": false, "className": "" }, { "id": "c9cceec993890c0e", "type": "ui-page", "name": "UI and Dynamic Images", "ui": "c556c36118354602", "path": "/page6", "icon": "home", "layout": "grid", "theme": "f12e0319896b7982", "breakpoints": [ { "name": "Default", "px": "0", "cols": "3" }, { "name": "Tablet", "px": "576", "cols": "6" }, { "name": "Small Desktop", "px": "768", "cols": "9" }, { "name": "Desktop", "px": "1024", "cols": "12" } ], "order": 6, "className": "", "visible": "true", "disabled": "false" }, { "id": "d08aa9c6b57536db", "type": "ui\_tab", "name": "User Interface", "icon": "dashboard", "disabled": false, "hidden": false }, { "id": "c556c36118354602", "type": "ui-base", "name": "Main UI", "path": "/dashboard", "appIcon": "", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control" ], "showPathInSidebar": false, "headerContent": "page", "navigationStyle": "default", "titleBarStyle": "fixed", "showReconnectNotification": true, "notificationDisplayTime": 1, "showDisconnectNotification": true }, { "id": "f12e0319896b7982", "type": "ui-theme", "name": "Default Theme", "colors": { "surface": "#ffffff", "primary": "#0094ce", "bgPage": "#eeeeee", "groupBg": "#ffffff", "groupOutline": "#cccccc" }, "sizes": { "density": "default", "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px" } } ] ---

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [25 April 2025 19:08 UTC](https://discourse.nodered.org/t/changing-the-pictures-as-per-the-buttons-click-on/96759/2 "2025-04-25T19:08:38Z")

Hi welcome to the forum. Firstly, your flow cannot be imported as it is corrupt... In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````) ````auto ``` code goes here ``` ```` You can edit and correct your post by clicking the pencil ✏ icon. See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) Secondly, have you seen the demo in [the docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)? (Hit the `Try Demo` button) ![Screenshot_20250425-200810](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/2031840fbdbee3402ced592ced0a9695e459e033.png) ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [25 May 2025 19:09 UTC](https://discourse.nodered.org/t/changing-the-pictures-as-per-the-buttons-click-on/96759/3 "2025-05-25T19:09:22Z")

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.