{"result":{"depiction_url":"https:\/\/zotonic.com\/image\/2023\/10\/27\/img_5155.jpg%28800x800%29%28upscale%29%28DJsNW8CEPfOoXgL_lalj0GuLZKlR2JkmJphiJC_6168%29.jpg","edges":{"depiction":{"objects":[{"created":"2023-10-27T13:49:04Z","object_id":{"id":2388,"is_a":["media","image"],"name":null,"title":"IMG_5155.jpeg","uri":"https:\/\/zotonic.com\/id\/2388"},"seq":1},{"created":"2023-10-27T13:34:26Z","object_id":{"id":2385,"is_a":["media","image"],"name":null,"title":{"_type":"trans","tr":{"en":"Template dependency graph of zotonic.com home page"}},"uri":"https:\/\/zotonic.com\/id\/2385"},"seq":2},{"created":"2023-10-27T13:43:26Z","object_id":{"id":2386,"is_a":["media","image"],"name":null,"title":{"_type":"trans","tr":{"en":"Live tracing of templates"}},"uri":"https:\/\/zotonic.com\/id\/2386"},"seq":3},{"created":"2023-10-27T13:46:19Z","object_id":{"id":2387,"is_a":["media","image"],"name":null,"title":{"_type":"trans","tr":{"en":"Template debugging options"}},"uri":"https:\/\/zotonic.com\/id\/2387"},"seq":4}],"predicate":{"id":304,"is_a":["meta","predicate"],"name":"depiction","title":{"_type":"trans","tr":{"nl":"Afbeelding","en":"Depiction"}},"uri":"http:\/\/xmlns.com\/foaf\/0.1\/depiction"}},"subject":{"objects":[{"created":"2026-09-14T05:45:49Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":1000000},{"created":"2026-09-14T05:45:52Z","object_id":{"id":2556,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_explanation","title":"Explanation","uri":"https:\/\/zotonic.com\/id\/2556"},"seq":1000000},{"created":"2026-09-14T05:46:07Z","object_id":{"id":2613,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_development_and_debugging","title":"Development and debugging","uri":"https:\/\/zotonic.com\/id\/2613"},"seq":1000000},{"created":"2026-09-14T05:46:15Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":1000000},{"created":"2026-09-14T05:46:38Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":1000000},{"created":"2026-09-14T05:47:04Z","object_id":{"id":2691,"is_a":["categorization","keyword","keyword_quality"],"name":"zotonic_topic_maintainability","title":"Maintainability","uri":"https:\/\/zotonic.com\/id\/2691"},"seq":1000000}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":2384,"is_a":["text","article"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2384"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":null,"page_url":{"en":"https:\/\/zotonic.com\/page\/2384\/tracing-templates-for-greater-understanding","x-default":"https:\/\/zotonic.com\/page\/2384\/tracing-templates-for-greater-understanding"},"preview_url":null,"resource":{"version":11,"pivot_location_lat":null,"title":{"_type":"trans","tr":{"en":"Tracing templates for greater understanding"}},"is_authoritative":true,"body":{"_type":"trans","tr":{"en":"<p>Just from the template code this can be hard, especially when  confronted with existing projects or modules. Our new development tool gives new insight in all templates used, and even better, it can be used on live production systems!<\/p>\n<p>It works by tracing all templates includes, extends or overrules. This builds a graph of how the templates are used.<\/p>\n<h2>Example<\/h2>\n<p>For example, this is the home page of this site.<\/p>\n<p><!-- z-media 2385 {\"align\":\"block\",\"caption\":\"Example template inclusion graph of the home page.\",\"crop\":false,\"link\":false,\"link_url\":\"\",\"size\":\"middle\"} --><\/p>\n<p>All nodes are templates, all arrows are includes. A node contains the template name and the module of the template. Templates from the current site have blue background. All other templates have a border and arrow color depending on the module.<\/p>\n<p>A <em>start template<\/em> is marked with a hexagon, in this case <code>home.tpl<\/code>. The striped line from <code>home.tpl<\/code> to <code>base.tpl<\/code> shows that <code>home.tpl<\/code> <em>extends<\/em> <code>base.tpl<\/code>.  A dotted line would show an <em>overrules<\/em>.<\/p>\n<p>A graph can be generated for the current session, recording all includes made by you on your browser. Or all sessions can be traced, giving an overview of the live system.<\/p>\n<h2>Where to find this?<\/h2>\n<aside>\n<p>If the Development menu item is not there, ensure that <em>mod_development<\/em> has been enabled.<\/p>\n<\/aside>\n<p>You can find this in the admin, under System &gt; Development, in the <em>Template debugging<\/em> widget click on <em>Live dependency graph of templates<\/em>.<\/p>\n<p><!-- z-media 2387 {\"align\":\"block\",\"caption\":\"Tempate debugging options available in mod_development.\",\"crop\":false,\"link\":false,\"link_url\":\"\",\"size\":\"middle\"} --><\/p>\n<p>This will bring you to the following page:<\/p>\n<p><!-- z-media 2386 {\"align\":\"block\",\"caption\":\"Trace live template includes to build the inclusion graph.\",\"crop\":false,\"link\":false,\"link_url\":\"\",\"size\":\"middle\"} --><\/p>\n<p>Start the tracing by clicking on either of the two blue buttons. Mostly the button <em>Clear data and start<\/em> is the one you want, as that will trace only your own session.<\/p>\n<p>The screen will update automatically whilst data is collected. Click on <em>Stop<\/em> if the view is complete.<\/p>\n<p> <\/p>"}},"is_mailing_opt_out":false,"slug":"tracing-templates-for-greater-understanding","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"is_featured":false,"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"category_id":{"id":106,"is_a":["meta","category"],"name":"article","title":{"_type":"trans","tr":{"en":"Article"}},"uri":"https:\/\/test.zotonic.com\/id\/106"},"publication_start":"2023-10-27T13:51:00Z","is_website_redirect":false,"pivot_location_lng":null,"name":null,"is_unfindable":false,"is_published":true,"summary":{"_type":"trans","tr":{"en":"A picture tells a thousand words, so we added an exciting new development tool to explore which templates are used during page rendering. Our new tool gives a graph view of all templates."}},"pivot_geocode":null,"custom_slug":false,"created":"2023-10-27T13:27:24Z","uri":null,"date_is_all_day":false,"is_dependent":false,"is_page_path_multiple":false,"publication_end":"9999-08-17T12:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"creator_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"seo_noindex":false,"modified":"2023-10-27T14:00:56Z","title_slug":{"_type":"trans","tr":{"en":"tracing-templates-for-greater-understanding"}}},"uri":"https:\/\/zotonic.com\/id\/2384","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2384"}},"status":"ok"}