(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{285:function(t,e,s){"use strict";s.r(e);var a=s(13),o=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"display-templates"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#display-templates"}},[t._v("#")]),t._v(" Display Templates")]),t._v(" "),e("blockquote",[e("p",[t._v("Display Templates, a utility used throughout Directus, allow you to set Field Values and custom text in order to\nbetter represent the Items in a Collection.")])]),t._v(" "),e("h2",{attrs:{id:"how-it-works"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-it-works"}},[t._v("#")]),t._v(" How it Works")]),t._v(" "),e("video",{attrs:{title:"Set Display Template",autoplay:"",muted:"",loop:"",controls:""},domProps:{muted:!0}},[e("source",{attrs:{src:"https://cdn.directus.io/docs/v9/app-guide/display-templates/display-templates-20220523A/set-display-templates-20220523A.mp4",type:"video/mp4"}})]),t._v(" "),e("p",[t._v("Display Templates can be found in various places all throughout the App, such as "),e("RouterLink",{attrs:{to:"/app/layouts/"}},[t._v("Layout Options")]),t._v(" and the\n"),e("RouterLink",{attrs:{to:"/app/insights/#lists"}},[t._v("List Panel")]),t._v(" in Insights. Display Templates are easy to setup, just follow these steps:")],1),t._v(" "),e("ul",[e("li",[t._v("Click "),e("span",{attrs:{mi:"",icon:""}},[t._v("add_box")]),t._v(" to add a Field or relationally linked Field.")]),t._v(" "),e("li",[t._v("Type in any custom text as desired.")]),t._v(" "),e("li",[t._v("Click the Field inline or hit "),e("code",[t._v("backspace")]),t._v(" to remove it.")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("Keep it Short and Simple")]),t._v(" "),e("p",[t._v("Display Templates will let you represent Items with custom inline text, image thumbnails, dates, numbers, or pretty\nanything else. However, it may look funky or run off the page if you attempt to display things like long blog posts,\nJSON objects or geo-coordinates.")])])])}),[],!1,null,null,null);e.default=o.exports}}]);