{"id":2937,"date":"2022-08-08T19:29:52","date_gmt":"2022-08-09T00:29:52","guid":{"rendered":"https:\/\/www.teamdesk.net\/blog\/?p=2937"},"modified":"2022-08-08T19:32:06","modified_gmt":"2022-08-09T00:32:06","slug":"clickable-image-to-edit-column","status":"publish","type":"post","link":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/","title":{"rendered":"Clickable image to edit column&#8217;s value"},"content":{"rendered":"\n<p>One of our customers sets up the database for health insurance company and likes to edit the list of injuries by clicking on an image of the human body; he asked us whether it is possible to populate the column using clickable image. We helped him and decided to share the results with you.<\/p>\n\n\n\n<p>Here is a link to a <a href=\"https:\/\/www.teamdesk.net\/example_clickable_map\">sample database<\/a>.<\/p>\n\n\n\n<p>As a clickable image format we chose <a href=\"https:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics\" target=\"_blank\" rel=\"noreferrer noopener\">Scalable Vector Graphic<\/a> images. Why?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It is a vector image format supported by all modern browsers.<\/li><li>It scales to any resolution.<\/li><li>There are many SVG editors and convertors.<\/li><li>It consists of elementary geometric figures (circles, ellipses, rectangles and lines) and it is programmable &#8212; you can detect clicks on a figure with JavaScript.<\/li><\/ul>\n\n\n\n<p>While our attempt to help was quite simple, to build the sample database we wrote some &lt;200 lines of JavaScript code to make it as reusable as possible. It is not directly tied to TeamDesk, you can use it in your own projects too.<\/p>\n\n\n\n<p>As an image we took the map of United States from Wikipedia. And here is what we got:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/image-1.png\" alt=\"\" class=\"wp-image-2949\" width=\"668\" height=\"612\" srcset=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/image-1.png 1335w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/image-1-300x275.png 300w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/image-1-1024x939.png 1024w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/image-1-768x704.png 768w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/a><\/figure>\n\n\n\n<p>Clicking on checkboxes highlights the state on the map. Clicking on the map checks corresponding box.<\/p>\n\n\n\n<p>To place the map we added &#8220;Text with html&#8221; section on the form. Below is the code for it:<\/p>\n\n\n\n<pre><code><span style=\"color:darkgreen;\">&lt;!--&nbsp;we'll&nbsp;place&nbsp;the&nbsp;map&nbsp;here&nbsp;--&gt;<\/span>\n<span style=\"color:blue;\">&lt;<\/span><span style=\"color:maroon;\">div<\/span>&nbsp;<span style=\"color:red;\">id<\/span><span style=\"color:blue;\">=<\/span><span style=\"color:blue;\">\"usmap\"<\/span><span style=\"color:blue;\">&gt;&lt;\/<\/span><span style=\"color:maroon;\">div<\/span><span style=\"color:blue;\">&gt;<\/span>\n<span style=\"color:darkgreen;\">&lt;!--&nbsp;style&nbsp;it&nbsp;a&nbsp;bit&nbsp;--&gt;<\/span>\n<span style=\"color:blue;\">&lt;<\/span><span style=\"color:maroon;\">style<\/span><span style=\"color:blue;\">&gt;<\/span>\n<span style=\"color:darkgreen;\">\/*<\/span>&nbsp;<span style=\"color:darkgreen;\">let&nbsp;it&nbsp;downscale<\/span>&nbsp;<span style=\"color:darkgreen;\">*\/<\/span>\n<span style=\"color:maroon;\">#usmap<\/span>&nbsp;<span style=\"color:maroon;\">svg<\/span>&nbsp;{\n\t<span style=\"color:red;\">max-width<\/span>:&nbsp;<span style=\"color:blue;\">100%<\/span>;\n\t<span style=\"color:red;\">height<\/span>:&nbsp;<span style=\"color:blue;\">auto<\/span>;\n}\n<span style=\"color:darkgreen;\">\/*<\/span>&nbsp;<span style=\"color:darkgreen;\">highlight&nbsp;selected&nbsp;states<\/span>&nbsp;<span style=\"color:darkgreen;\">*\/<\/span>\n<span style=\"color:maroon;\">#usmap<\/span>&nbsp;<span style=\"color:maroon;\">svg<\/span>&nbsp;<span style=\"color:maroon;\">*[id].selected<\/span>&nbsp;{\n\t<span style=\"color:red;\">fill<\/span>:&nbsp;<span style=\"color:blue;\">#800<\/span>;\n}\n<span style=\"color:darkgreen;\">\/*<\/span>&nbsp;<span style=\"color:darkgreen;\">if&nbsp;form&nbsp;is&nbsp;editable&nbsp;highlight&nbsp;elements&nbsp;on&nbsp;hover<\/span>&nbsp;<span style=\"color:darkgreen;\">*\/<\/span>\n<span style=\"color:maroon;\">div.ui-gridlayout.fs-edit<\/span>&nbsp;<span style=\"color:maroon;\">#usmap<\/span>&nbsp;<span style=\"color:maroon;\">svg<\/span>&nbsp;<span style=\"color:maroon;\">*[id]:hover<\/span>&nbsp;{\n\t<span style=\"color:red;\">fill<\/span>:&nbsp;<span style=\"color:blue;\">#CCC<\/span>;\n\t<span style=\"color:red;\">cursor<\/span>:&nbsp;<span style=\"color:blue;\">pointer<\/span>;\n}\n<span style=\"color:maroon;\">div.ui-gridlayout.fs-edit<\/span>&nbsp;<span style=\"color:maroon;\">#usmap<\/span>&nbsp;<span style=\"color:maroon;\">svg<\/span>&nbsp;<span style=\"color:maroon;\">*[id].selected:hover<\/span>&nbsp;{\n\t<span style=\"color:red;\">fill<\/span>:&nbsp;<span style=\"color:blue;\">#C00<\/span>;\n}\n<span style=\"color:blue;\">&lt;\/<\/span><span style=\"color:maroon;\">style<\/span><span style=\"color:blue;\">&gt;<\/span>\n<span style=\"color:darkgreen;\">&lt;!--&nbsp;load&nbsp;javascript&nbsp;code&nbsp;--&gt;<\/span>\n<span style=\"color:blue;\">&lt;<\/span><span style=\"color:maroon;\">script<\/span>&nbsp;<span style=\"color:red;\">src<\/span><span style=\"color:blue;\">=<\/span><span style=\"color:blue;\">\".\/res.aspx\/clickableSVG.js\"<\/span><span style=\"color:blue;\">&gt;&lt;\/<\/span><span style=\"color:maroon;\">script<\/span><span style=\"color:blue;\">&gt;<\/span>\n<span style=\"color:darkgreen;\">&lt;!--initialize&nbsp;clickable&nbsp;image&nbsp;--&gt;<\/span>\n<span style=\"color:blue;\">&lt;<\/span><span style=\"color:maroon;\">script<\/span><span style=\"color:blue;\">&gt;<\/span>\nTD.clickableSVG({\n\tcontrol:&nbsp;<span style=\"color:#a31515;\">\"f_36837578\"<\/span>,\n\tsvg:&nbsp;<span style=\"color:#a31515;\">\".\/res.aspx\/usmap.svg\"<\/span>,\n\tappendTo:&nbsp;<span style=\"color:#a31515;\">\"#usmap\"<\/span>\n});\n<span style=\"color:blue;\">&lt;\/<\/span><span style=\"color:maroon;\">script<\/span><span style=\"color:blue;\">&gt;<\/span><\/code><\/pre>\n\n\n\n<p>While it seems wordy at first, it solves four tasks:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Where to place an image? There is a &lt;div&gt; with &#8220;usmap&#8221; ID<\/li><li>How to style an image and the selection? There are &lt;styles&gt; for that.<\/li><li>Load JavaScript code to handle clicks.<\/li><li>Configure what is clickable and where to place the results.<\/li><\/ul>\n\n\n\n<p>Latter script section contains the call to <code>TD.clickableSVG<\/code>(&#8230;) function that accepts configuration object with the following keys:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><kbd>control<\/kbd>: the name of the text\/hidden input or checkbox group with the value.<\/li><li><kbd>svg<\/kbd>: is either <ul><li>SVGElement or <\/li><li>CSS selector to find SVG already on the page or<\/li><li>URL to SVG image to load or<\/li><li>text with SVG image code.<\/li><\/ul><\/li><li><kbd>appendTo<\/kbd>: CSS selector to element to append SVG image into for URL and SVG-as-text cases.<\/li><li><kbd>clickable<\/kbd>: CSS selector to detect clickable elements, default is *[id] &#8212; any element with ID attribute.<\/li><li><kbd>valueAttr<\/kbd>: the name of the attribute that holds the value. Default is &#8220;id&#8221; &#8212; our best guess as id is the only attribute uniformly editable using SVG editors&#8217; UI.<\/li><li><kbd>selectedClass<\/kbd>: CSS class to apply when element is selected. Default is &#8220;selected&#8221;.<\/li><li><kbd>delayInit<\/kbd>: whether to delay initialization until the page is fully loaded. Default is <kbd>false<\/kbd>. Initialization code relies on input control is present on the page at the moment the function runs. If it&#8217;s not the case, try setting this parameter to <kbd>true<\/kbd>.<\/li><\/ul>\n\n\n\n<p>Happy clicking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.<\/p>\n","protected":false},"author":4,"featured_media":2946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[289,18,288,290],"class_list":["post-2937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-library","tag-clickable-image","tag-javascript","tag-map","tag-svg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Clickable image to edit column&#039;s value - TeamDesk Blog<\/title>\n<meta name=\"description\" content=\"One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Clickable image to edit column&#039;s value - TeamDesk Blog\" \/>\n<meta property=\"og:description\" content=\"One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/\" \/>\n<meta property=\"og:site_name\" content=\"TeamDesk Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-09T00:29:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-09T00:32:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/clickable-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"416\" \/>\n\t<meta property=\"og:image:height\" content=\"416\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kirill Bondar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirill Bondar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/\"},\"author\":{\"name\":\"Kirill Bondar\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\"},\"headline\":\"Clickable image to edit column&#8217;s value\",\"datePublished\":\"2022-08-09T00:29:52+00:00\",\"dateModified\":\"2022-08-09T00:32:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/\"},\"wordCount\":453,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/clickable-image.jpg\",\"keywords\":[\"clickable image\",\"javascript\",\"map\",\"svg\"],\"articleSection\":[\"Application Library\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/\",\"name\":\"Clickable image to edit column's value - TeamDesk Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/clickable-image.jpg\",\"datePublished\":\"2022-08-09T00:29:52+00:00\",\"dateModified\":\"2022-08-09T00:32:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\"},\"description\":\"One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/clickable-image.jpg\",\"contentUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/clickable-image.jpg\",\"width\":416,\"height\":416,\"caption\":\"Clickable Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/application-library\\\/clickable-image-to-edit-column\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Clickable image to edit column&#8217;s value\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/\",\"name\":\"TeamDesk Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\",\"name\":\"Kirill Bondar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"caption\":\"Kirill Bondar\"},\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/author\\\/kirill-bondar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Clickable image to edit column's value - TeamDesk Blog","description":"One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/","og_locale":"en_US","og_type":"article","og_title":"Clickable image to edit column's value - TeamDesk Blog","og_description":"One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.","og_url":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/","og_site_name":"TeamDesk Blog","article_published_time":"2022-08-09T00:29:52+00:00","article_modified_time":"2022-08-09T00:32:06+00:00","og_image":[{"width":416,"height":416,"url":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/clickable-image.jpg","type":"image\/jpeg"}],"author":"Kirill Bondar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirill Bondar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#article","isPartOf":{"@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/"},"author":{"name":"Kirill Bondar","@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2"},"headline":"Clickable image to edit column&#8217;s value","datePublished":"2022-08-09T00:29:52+00:00","dateModified":"2022-08-09T00:32:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/"},"wordCount":453,"commentCount":1,"image":{"@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#primaryimage"},"thumbnailUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/clickable-image.jpg","keywords":["clickable image","javascript","map","svg"],"articleSection":["Application Library"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/","url":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/","name":"Clickable image to edit column's value - TeamDesk Blog","isPartOf":{"@id":"https:\/\/www.teamdesk.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#primaryimage"},"image":{"@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#primaryimage"},"thumbnailUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/clickable-image.jpg","datePublished":"2022-08-09T00:29:52+00:00","dateModified":"2022-08-09T00:32:06+00:00","author":{"@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2"},"description":"One of our customers asked us whether it is possible to populate some column using clickable image. We decided to share the results.","breadcrumb":{"@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#primaryimage","url":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/clickable-image.jpg","contentUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2022\/08\/clickable-image.jpg","width":416,"height":416,"caption":"Clickable Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.teamdesk.net\/blog\/application-library\/clickable-image-to-edit-column\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.teamdesk.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Clickable image to edit column&#8217;s value"}]},{"@type":"WebSite","@id":"https:\/\/www.teamdesk.net\/blog\/#website","url":"https:\/\/www.teamdesk.net\/blog\/","name":"TeamDesk Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.teamdesk.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2","name":"Kirill Bondar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","caption":"Kirill Bondar"},"url":"https:\/\/www.teamdesk.net\/blog\/author\/kirill-bondar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/2937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/comments?post=2937"}],"version-history":[{"count":9,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/2937\/revisions"}],"predecessor-version":[{"id":2956,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/2937\/revisions\/2956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/media\/2946"}],"wp:attachment":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/media?parent=2937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/categories?post=2937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/tags?post=2937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}