{"id":14005,"date":"2025-12-05T15:47:00","date_gmt":"2025-12-05T15:47:00","guid":{"rendered":"https:\/\/www.rjt.org.uk\/home\/?post_type=home_assistant_tip&#038;p=14005"},"modified":"2025-12-05T15:47:02","modified_gmt":"2025-12-05T15:47:02","slug":"custom-server-link-buttons-using-button-card","status":"publish","type":"home_assistant_tip","link":"https:\/\/www.rjt.org.uk\/home\/archives\/home-assistant-tip\/custom-server-link-buttons-using-button-card\/","title":{"rendered":"Custom Server Link buttons using button-card"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-1024x651.png\" alt=\"\" class=\"wp-image-14006\" srcset=\"https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-1024x651.png 1024w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-300x191.png 300w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-150x95.png 150w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-768x488.png 768w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-1536x976.png 1536w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2025\/12\/Landing-2048x1302.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>The image above is my new landing page inside home assistant for daily access.<\/p>\n\n\n\n<p>The buttons on the left are built using one of two button card templates.<br>image_link_template and image_link_status_template the second is a child of the first and adds a dot to check if the entity field has a value of up which is what my uptime kuma integration picks up.<\/p>\n\n\n\n<p>Both are easy to use once the template code is added to the top of the dashboard file in the Raw editor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">image_link_template<\/h4>\n\n\n\n<p>The values are<\/p>\n\n\n\n<p>image:  Url to the image to use<\/p>\n\n\n\n<p>url: url to open when the button is pressed.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">type: custom:button-card\ntemplate: image_link_template\nname: Home Assistant\nvariables:\n  image: https:\/\/cdn.jsdelivr.net\/gh\/selfhst\/icons@main\/png\/home-assistant.png\n  url: https:\/\/ha.taubman.uk\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">image_link_status_template<\/h4>\n\n\n\n<p>entity: The entity field for the Uptimekuma or ping sensor<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">type: custom:button-card\ntemplate: image_link_status_template\nname: Jellyfin\nvariables:\n  image: https:\/\/cdn.jsdelivr.net\/gh\/selfhst\/icons@main\/png\/jellyfin.png\n  url: https:\/\/jellyfin.taubman.uk\nentity: sensor.jellyfin_status\n\n<\/pre>\n\n\n\n<p>The Two Templates<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">button_card_templates:\n  image_link_template:\n    tap_action:\n      action: url\n      url_path: '[[[ return variables.url; ]]]'\n    show_icon: false\n    show_name: true\n    show_label: false\n    styles:\n      card:\n        - height: 140px\n        - max-width: 150px\n        - padding: 10px\n        - background: var(--ha-card-background, var(--card-background-color, white))\n        - border-radius: var(--ha-card-border-radius, 12px)\n        - box-shadow: var(--ha-card-box-shadow, none)\n        - display: flex\n        - flex-direction: column\n        - justify-content: space-between\n      grid:\n        - grid-template-areas: '\"image\"'\n        - grid-template-columns: 1fr\n        - grid-template-rows: 1fr\n        - position: relative\n      img_cell:\n        - justify-content: center\n        - align-items: center\n        - height: 100%\n        - width: 100%\n      custom_fields:\n        image:\n          - width: 86%\n          - height: 86%\n          - object-fit: contain\n          - margin: 1% 7% 13% 7%\n      name:\n        - position: absolute\n        - bottom: 0\n        - right: 0\n        - justify-self: end\n        - text-align: right\n        - font-size: 12px\n        - font-weight: 500\n        - padding: 2px 2px\n        - color: black\n    custom_fields:\n      image: |\n        [[[\n          return `&lt;img src=\"${variables.image}\" style=\"width: 100%; height: 100%; object-fit: contain;\">`;\n        ]]]\n  image_link_status_template:\n    template: image_link_template\n    show_state: false\n    styles:\n      custom_fields:\n        status_dot:\n          - position: absolute\n          - top: 8px\n          - right: 8px\n          - width: 12px\n          - height: 12px\n          - border-radius: 50%\n          - box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)\n    custom_fields:\n      status_dot: |\n        [[[\n          const state = entity ? entity.state : 'unknown';\n          let color = '#9E9E9E'; \/\/ default gray\n          \n          if (state === 'up') {\n            color = '#4CAF50'; \/\/ green\n          } else if (state === 'on') {\n            color = '#4CAF50'; \/\/ green\n            \n          } else if (state === 'down') {\n            color = '#F44336'; \/\/ red\n          }\n          \n          return `&lt;div style=\"width: 100%; height: 100%; background-color: ${color}; border-radius: 50%;\">&lt;\/div>`;\n        ]]]\n<\/pre>\n\n\n\n<p> <\/p>\n","protected":false},"template":"","class_list":["post-14005","home_assistant_tip","type-home_assistant_tip","status-publish","hentry","comments-off"],"_links":{"self":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/home_assistant_tip\/14005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/home_assistant_tip"}],"about":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/types\/home_assistant_tip"}],"wp:attachment":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/media?parent=14005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}