{"id":1416,"date":"2015-01-09T05:48:35","date_gmt":"2015-01-09T05:48:35","guid":{"rendered":"https:\/\/mmman.itgroove.net\/?p=1416"},"modified":"2023-02-24T21:39:49","modified_gmt":"2023-02-24T21:39:49","slug":"creating-a-custom-callout-in-an-image-library-using-jslink","status":"publish","type":"post","link":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/","title":{"rendered":"Creating a custom callout (in an image library) using JSLink"},"content":{"rendered":"<p>I was reading through the following article recently and found there was a really cool section about how to create a custom callout in an image library (in SP2013) simply using the JSLink override functionality. They even give you all the code you need to do it yourself.<\/p>\n<p>Below is an example of what they churned out as part of their custom callout (I thought it was pretty sweet).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png\" alt=\"\" \/><\/p>\n<p>The article can be found below. Note that the article is much larger, so the section labelled &#8220;Scenario 2: Create a Custom Image Gallery with Callouts&#8221; is what I was most interested in, though the rest of the article is good to warm up to the concept of JSLink if you&#8217;re unfamiliar.<\/p>\n<p><a href=\"http:\/\/msdn.microsoft.com\/en-us\/magazine\/dn745867.aspx\">http:\/\/msdn.microsoft.com\/en-us\/magazine\/dn745867.aspx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was reading through the following article recently and found there was a really cool section about how to create a custom callout in an image library (in SP2013) simply using the JSLink override functionality. They even give you all the code you need to do it yourself. Below is an example of what they &hellip; <a href=\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/\"><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[20,7],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating a custom callout (in an image library) using JSLink - Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a custom callout (in an image library) using JSLink - Archive\" \/>\n<meta property=\"og:description\" content=\"I was reading through the following article recently and found there was a really cool section about how to create a custom callout in an image library (in SP2013) simply using the JSLink override functionality. They even give you all the code you need to do it yourself. Below is an example of what they &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/\" \/>\n<meta property=\"og:site_name\" content=\"Archive\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-09T05:48:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T21:39:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png\" \/>\n<meta name=\"author\" content=\"Colin Phillips (Alumni)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Colin Phillips (Alumni)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/\",\"url\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/\",\"name\":\"Creating a custom callout (in an image library) using JSLink - Archive\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png\",\"datePublished\":\"2015-01-09T05:48:35+00:00\",\"dateModified\":\"2023-02-24T21:39:49+00:00\",\"author\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b\"},\"breadcrumb\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#primaryimage\",\"url\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png\",\"contentUrl\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png\",\"width\":550,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Archive\",\"item\":\"https:\/\/regroove.ca\/archive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a custom callout (in an image library) using JSLink\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regroove.ca\/archive\/#website\",\"url\":\"https:\/\/regroove.ca\/archive\/\",\"name\":\"Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regroove.ca\/archive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b\",\"name\":\"Colin Phillips (Alumni)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g\",\"caption\":\"Colin Phillips (Alumni)\"},\"url\":\"https:\/\/regroove.ca\/archive\/author\/cphillips\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a custom callout (in an image library) using JSLink - Archive","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:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/","og_locale":"en_US","og_type":"article","og_title":"Creating a custom callout (in an image library) using JSLink - Archive","og_description":"I was reading through the following article recently and found there was a really cool section about how to create a custom callout in an image library (in SP2013) simply using the JSLink override functionality. They even give you all the code you need to do it yourself. Below is an example of what they &hellip;","og_url":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/","og_site_name":"Archive","article_published_time":"2015-01-09T05:48:35+00:00","article_modified_time":"2023-02-24T21:39:49+00:00","og_image":[{"url":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png"}],"author":"Colin Phillips (Alumni)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Colin Phillips (Alumni)","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/","url":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/","name":"Creating a custom callout (in an image library) using JSLink - Archive","isPartOf":{"@id":"https:\/\/regroove.ca\/archive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#primaryimage"},"image":{"@id":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#primaryimage"},"thumbnailUrl":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png","datePublished":"2015-01-09T05:48:35+00:00","dateModified":"2023-02-24T21:39:49+00:00","author":{"@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b"},"breadcrumb":{"@id":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#primaryimage","url":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png","contentUrl":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/01\/010915_0548_Creatingacu1.png","width":550,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/regroove.ca\/archive\/2015\/01\/09\/creating-a-custom-callout-in-an-image-library-using-jslink\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Archive","item":"https:\/\/regroove.ca\/archive\/"},{"@type":"ListItem","position":2,"name":"Creating a custom callout (in an image library) using JSLink"}]},{"@type":"WebSite","@id":"https:\/\/regroove.ca\/archive\/#website","url":"https:\/\/regroove.ca\/archive\/","name":"Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regroove.ca\/archive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/adeb0df1cc7a862160be620ca7eace1b","name":"Colin Phillips (Alumni)","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/14eeab0d377e9630e0983d9c08911979?s=96&d=mm&r=g","caption":"Colin Phillips (Alumni)"},"url":"https:\/\/regroove.ca\/archive\/author\/cphillips\/"}]}},"_links":{"self":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/1416"}],"collection":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/comments?post=1416"}],"version-history":[{"count":1,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/1416\/revisions"}],"predecessor-version":[{"id":1861,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/1416\/revisions\/1861"}],"wp:attachment":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media?parent=1416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/categories?post=1416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/tags?post=1416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}