generating document html pages with images in 4 columns rows

itempage
Castro0o 5 years ago
parent 2636d37b97
commit e5bcb3ab91

@ -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 = []

@ -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%;}

@ -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>
#}
Loading…
Cancel
Save