updated the decks coooool

main
suzan 1 year ago
parent 791f416b49
commit 67d8ba8cd1

@ -11,13 +11,20 @@
<section> <section>
<div class="card"> <div class="card">
<h2>1.png</h2> <h2>body</h2>
<p><img src='./images/1.png'></p> <p class = 'image'><img src='./images/1.jpg'></p>
<p class = 'text'>Some text of this card</p>
</div> </div>
<div class="card"> <div class="card">
<h2>1.png</h2> <h2>panopticon</h2>
<p><img src='./images/2.png'></p> <p class = 'image'><img src='./images/2.png'></p>
<p class = 'text'>The panopticon is a design of institutional building with an inbuilt system of control!</p>
</div>
<div class="card">
<h2></h2>
<p class = 'textnoimage'>2. Ilkyaz agini degerlendirmek ve beslemek Genç yazarlarla iletişim kurmak ve İlkyazi tanitmak, <br> davet etmek.Edebiyat ve sanat çevrelerini ortaklaştirmak adina fikir verme ve oluşturma.</p>
</div> </div>
</section> </section>

@ -2,11 +2,16 @@
"cards" : [{ "cards" : [{
"name" : "body", "name" : "body",
"text" : "Some text of this card", "text" : "Some text of this card",
"image": "1.png" "image": "1.jpg"
}, },
{ {
"name" : "panopticon", "name" : "panopticon",
"text" : "The panopticon is a design of institutional building with an inbuilt system of control!", "text" : "The panopticon is a design of institutional building with an inbuilt system of control!",
"image": "2.png" "image": "2.png"
},
{
"name" : "",
"text" : "2. Ilkyaz agini degerlendirmek ve beslemek Genç yazarlarla iletişim kurmak ve İlkyazi tanitmak, <br> davet etmek.Edebiyat ve sanat çevrelerini ortaklaştirmak adina fikir verme ve oluşturma.",
"image": ""
}] }]
} }

@ -1,37 +1,37 @@
import os import os , json
folder = "./images/" folder = "./images/"
#defining as a list #load the json information
images = [] with open ("cards.json", "r") as collage:
titles = [] cards = json.load(collage)
#shows all the images
os.listdir(folder)
for image in os.listdir(folder):
print(image)
print(folder + image)
print("---")
images.append(folder + image)
titles.append(image)
#html #html
counter = 0
all_cards = "" all_cards = ""
for image in images: for card in cards["cards"]:
print(card)
#html image element #html image element
img = f"<img src='{ image }'>" img = f"<img src='{ folder + card['image'] }'>"
#img = "<img src="' + image +"'>" #img = "<img src="' + image +"'>"
#define title #define title
title = titles[counter] title = card['name']
#printing to inspect #printing to inspect
print(img) print(img)
#mini template for card #mini template for card
if card['image'] == "":
card = f"""
<div class="card">
<h2>{ title }</h2>
<p class = 'textnoimage'>{ card['text'] }</p>
</div>
"""
else:
card = f""" card = f"""
<div class="card"> <div class="card">
<h2>{ title }</h2> <h2>{ title }</h2>
<p>{ img }</p> <p class = 'image'>{ img }</p>
<p class = 'text'>{ card['text'] }</p>
</div> </div>
""" """
#printing to inspect mini template #printing to inspect mini template
@ -41,7 +41,6 @@ for image in images:
all_cards = all_cards + card all_cards = all_cards + card
#we add +1 to our counter #we add +1 to our counter
counter = counter + 1
html = f""" html = f"""
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>

@ -9,7 +9,7 @@
margin: 2mm; margin: 2mm;
position: relative; position: relative;
} }
.card > p > img { .card > p.image > img {
width: 80mm; width: 80mm;
height: 80mm; height: 80mm;
position: absolute; position: absolute;
@ -22,3 +22,19 @@
left: 5mm; left: 5mm;
margin: 0; margin: 0;
} }
.card > p.text {
width: 80mm;
height: 20mm;
position: absolute;
top: 95mm;
left: 5mm;
text-align: center;
}
.card > p.textnoimage {
width: 80mm;
height: 20mm;
position: absolute;
top: 25mm;
left: 5mm;
text-align: center;
}
Loading…
Cancel
Save