generating document html pages with images in 4 columns rows

5 years ago · e5bcb3ab91
parent 2636d37b97
commit e5bcb3ab91
3 changed files with 45 additions and 21 deletions
--- a/query2html.py
+++ b/query2html.py
@ -76,7 +76,7 @@ with open(os.path.join(wd, 'templates/document.html')) as document_html:

 all_document_parts = ''  # to append all content
 documentslist = []
-document_images = []
+doc_imgs = []

 for answer in site.ask(query):
    # publication_title = ''
@ -94,18 +94,23 @@ for answer in site.ask(query):

    # TODO: look into the template structure of images : columns and rows

-    document_images.append(img_local)
+    doc_imgs.append(img_local)

    # on last File(Part) of Document
    if printout_dict['Part'] == printout_dict['Partof']:
-        print(document_images)
+        print(doc_imgs)
+
+        # organize doc_imgs into a matrix (list of lists)
+        # each sublist containing 4 items [[0,1,2,3][4,5,6,7],[8,9]]
+        # for template
+        doc_imgs_matrix = [doc_imgs[i:i+4] for i in range(0, len(doc_imgs), 4)]

        # RENDER DOCUMENT
        # by passing all_document_parts html to document_template content
        document_html = document_template.render(
            title=printout_dict.get('Title'),
            date=printout_dict.get('Date'),
-            imgslist=document_images,
+            imgsmatrix=doc_imgs_matrix,
            content=all_document_parts)  # render document template
        # print(document_html)

@ -123,7 +128,7 @@ for answer in site.ask(query):
                              })

        # reset document_images list
-        document_images = []
+        doc_imgs = []



--- a/static/style.css
+++ b/static/style.css
@ -1,14 +1,11 @@
-body{font-size: 12pt;}

-div.part {border: 1px solid #e5e5e5;
-          margin-bottom: 10px;
-          margin-top: 10px;
-          padding: 20px;}

-div#content img {width: 50%;}
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #aaa4a0;
+}

-
-div.metadata span.key {color: red;
-                       font-weight: bold;}
-
-#orc {color:blue;}
+div.row {display: inline;}
+div.column { display: inline;}
+div.column img{ width:25%;}
--- a/templates/document.html
+++ b/templates/document.html
@ -8,11 +8,33 @@
 <body>
    <h1>{{ title[0] }}</h1>
    <p><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></p>
-    <div id="images">
-        {% for img in imgslist %}
-        <img src="{{ img}} " />
+
+
+        {% for row in imgsmatrix %}
+            <div class="row">
+            {% for img in row %}
+              <div class="column">
+                <img src="{{ img }}">
+              </div>
+            {% endfor %}
+            </div>
        {% endfor %}
-    </div>
+
 </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>
+#}