<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../static/style.css" /> <script type="text/javascript" src="../static/script.js"></script> <title>{{ title[0] }}</title> </head> <body> <h1>{{ title[0] }} ↵</h1> <h2><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></h2> <div class="metadata"> <button class="collapsible cbtn">C</button> <div class="content"> <!-- metadata creator / format / topic --> <div class="metadata_creator">{{ creator }}</div> <a class="metadata_links" href="allcreators.html">All Creators</a> </div> <button class="collapsible fbtn">f</button> <div class="content"> <div class="metadata_format">{{ format }}</div> <a class="metadata_links" href="allformats.html">All Formats</a> </div> <button class="collapsible orgbtn">Org</button> <div class="content"> <div class="metadata_organization">{{ organization }}</div> <a class="metadata_links" href="allorganizations.html">All Organizations</a> </div> <button class="collapsible tbtn">T</button> <div class="content"> <div class="metadata_topic">{{ topic }}</div> <a class="metadata_links" href="alltopics.html">All Topics</a> </div> </div> <!-- nav --> <!-- <div id="rightnav" class="rightnav"> <a href="index.html" id="titlenav">Title</a> </div> <div id="leftnav" class="leftnav"> <a href="timeline.html" id="datenav">Date</a> </div> --> <!-- square --> <!-- <div class="square"></div> --> <!-- 2 btn grid switch for images --> <div class="header" id="myHeader"> <p><button class="btn" onclick="myFunction()">100%</button></p> <p><button class="btn" onclick="myFunction2()">overview</button></p> </div> <!-- images --> {% for row in imgsmatrix %} <div class="grid-container" id="myDIV"> {% for img in row %} <div class="column"> <img src="{{ img }}"> </div> {% endfor %} </div> {% endfor %} <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } </script> </body> </html>