pagination fonctionnelle
This commit is contained in:
parent
0d008656e7
commit
89a46ed5aa
Binary file not shown.
45
src/myalbum/app.py
Executable file → Normal file
45
src/myalbum/app.py
Executable file → Normal file
@ -1,24 +1,49 @@
|
|||||||
import os
|
import os
|
||||||
|
|
||||||
from flask import Flask, render_template
|
from flask import Flask, render_template, request
|
||||||
from PIL import Image
|
from PIL import Image
|
||||||
from os import listdir
|
from os import listdir
|
||||||
from myalbum.models import Photo
|
from myalbum.models import Photo
|
||||||
|
|
||||||
PHOTO_DIR = "./static"
|
PHOTO_DIR = "./static/photos"
|
||||||
|
NUM_PHOTO_PER_PAGE = 9
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/")
|
@app.route("/")
|
||||||
def hello_world():
|
def index():
|
||||||
|
requested_page = request.args.get('page', '1')
|
||||||
|
|
||||||
|
if requested_page.isnumeric():
|
||||||
|
requested_page = int(requested_page)
|
||||||
|
else:
|
||||||
|
requested_page = 1
|
||||||
|
|
||||||
photos = []
|
photos = []
|
||||||
paths = listdir(PHOTO_DIR)
|
paths = sorted(listdir(PHOTO_DIR), reverse=True)
|
||||||
for path in paths:
|
page = max(1, requested_page)
|
||||||
|
|
||||||
|
first_index = (page - 1) * NUM_PHOTO_PER_PAGE
|
||||||
|
last_photo_index = page * NUM_PHOTO_PER_PAGE
|
||||||
|
|
||||||
|
photos_to_show = paths[first_index:last_photo_index]
|
||||||
|
if len(photos_to_show) == 0 and len(paths) >= NUM_PHOTO_PER_PAGE:
|
||||||
|
photos_to_show = paths[0:NUM_PHOTO_PER_PAGE]
|
||||||
|
|
||||||
|
for path in photos_to_show:
|
||||||
|
if not path.lower().endswith(('.png', '.jpg', '.jpeg')):
|
||||||
|
continue
|
||||||
|
|
||||||
|
|
||||||
img = Image.open(os.path.join(PHOTO_DIR, path))
|
img = Image.open(os.path.join(PHOTO_DIR, path))
|
||||||
print(img.filename)
|
|
||||||
exif_data = img.getexif()
|
exif_data = img.getexif()
|
||||||
wid, hgt = img.size
|
wid, hgt = img.size
|
||||||
brand = exif_data[271]
|
brand = exif_data.get(271, "Inconnu")
|
||||||
model = exif_data[272]
|
model = exif_data.get(272, "Inconnu")
|
||||||
photos.append(Photo(path, str(wid) + "x" + str(hgt),brand, model))
|
|
||||||
return render_template("index.html", photos=photos, str=str)
|
|
||||||
|
photos.append(Photo(path, f"{wid}x{hgt}", brand, model))
|
||||||
|
|
||||||
|
|
||||||
|
return render_template("index.html", photos=photos, num_page=requested_page, str=str)
|
||||||
61
src/myalbum/static/styles/style.css
Normal file
61
src/myalbum/static/styles/style.css
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
:root {
|
||||||
|
/* color-scheme: light dark; */
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-link {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
width: calc((100% / 3) - 2rem);
|
||||||
|
transition: transform .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-link:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 80rem) {
|
||||||
|
.img-link {
|
||||||
|
width: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 40rem) {
|
||||||
|
.img-link {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,14 +1,54 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link
|
||||||
<title>Document</title>
|
rel="stylesheet"
|
||||||
</head>
|
href="{{ url_for('static', filename='styles/style.css') }}"
|
||||||
<body>
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Guams's album</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="banner">
|
||||||
|
<div class="banner-header">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="banner-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<p>Note : Toutes les personnes présentes sur les photos consentent à apparaître sur cette page</p>
|
||||||
|
<div class="pictures">
|
||||||
{% for photo in photos %}
|
{% for photo in photos %}
|
||||||
<img src="{{ url_for('static', filename=photo.name) }}">
|
<a class="img-link" href="{{ url_for('static', filename='photos/' + photo.name) }}" target="_blank">
|
||||||
<p>{{ str(photo) }}</p>
|
<img
|
||||||
|
src="{{ url_for('static', filename='photos/' + photo.name) }}"
|
||||||
|
alt="{{ photo.name }}"
|
||||||
|
title="{{ photo.name }}"
|
||||||
|
class="picture"
|
||||||
|
/>
|
||||||
|
<p>{{ photo | string }}</p>
|
||||||
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</body>
|
</div>
|
||||||
|
<div class="main-footer">
|
||||||
|
<div class="pagination">
|
||||||
|
{% if num_page > 0 %}
|
||||||
|
<a href="/?page={{ num_page - 1 }}"><</a>
|
||||||
|
{% endif %} {% for i in range(10) %}
|
||||||
|
<a
|
||||||
|
href="/?page={{ i + 1 }}"
|
||||||
|
class="{{ 'active' if i == num_page else '' }}"
|
||||||
|
>
|
||||||
|
{{ i + 1 }}
|
||||||
|
</a>
|
||||||
|
{% endfor %} {% if num_page < (10) %}
|
||||||
|
<a href="/?page={{ num_page + 1 }}">></a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user