<!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> <!-- metadata creator / format / topic --> <div class="metadata_creator">{{ creator }}</div> <div class="metadata_format">{{ format }}</div> <div class="metadata_topic">{{topic}}</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> <a href="allcreators.html" id="creatornav">Creator</a> <a href="allformats.html" id="formatnav">Format</a> <a href="alltopics.html" id="topicnav">Topic</a> </div> <!-- organizations toogle --> <button class="orgbtn" onclick="orgFunc()">Organizations</button> <div class="metadata_organizations" id="org"> <ul>{{ organization|list }}</ul> </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 %} </body> </html> {# <div class="row"> <div class="column"> <img src="./images/VF383Hamok00.jpg" style="width:100%"> </div> <div class="column"> <img src="./images/VF383Hamok01.jpg" style="width:100%"> </div> <div class="column"> <img src="./images/VF383Hamok02.jpg" style="width:100%"> </div> <div class="column"> <img src="./images/VF383Hamok03.jpg" style="width:100%"> </div> </div> #}