必要なもの一覧
写真一覧画面
photos.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>メインページ</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="pythonとdeta.shのサンプルページです" >
<meta name="keywords" content="プログラム,教育,python,deta.space,bootstrap,flask" >
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/style.css')}}">
<style>
img {
width: 100%;
height: 225;
object-fit:cover;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar w-100 navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Event Photos</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">操作</a>
<ul class="dropdown-menu" aria-labelledby="dropdown03">
<li><a class="dropdown-item" href="/event">イベント追加</a></li>
<li><a class="dropdown-item" href="/logout">ログアウト</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div id="wrapper">
<header class="d-flex justify-content-end">
<p>ID: {{id}} </p>
</header>
<header class="d-flex justify-content-start">
<a class="badge" href="{{url_for('top')}}" ><button type="button" class="btn btn-primary mx-4"><Home</button></a>
</header>
<div class="py-3 text-center">
<h2>イベント写真一覧: {{edata.items[0].eventname}}</h2>
<p class="lead">イベントの写真一覧を表示します <a href="{{ url_for('newPhoto',ekey=edata.items[0].key,photoFlag=photoFlag) }}"><button class="btn btn-primary mx-4">写真追加</button></a><span class="text-danger">{{errmess}}</span></p>
</div>
<div class="album py-5 bg-light">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
{% if pdata != None %}
{% for photo in pdata %}
<div class="col">
<div class="card shadow-sm">
{% if photo['photoImage']!="" %}
<img class="card-img-top" src="data:image/jpeg;base64,{{photo['photoImage'] | safe }}" >
{% endif %}
<div class="card-body">
<p class="card-text">{{photo['comments']}}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
{% if photo['photoImage']!="" %}
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modal{{loop.index|e}}">View</button>
{% else %}
{% if photo['fromid']==id %}
<a class="badge" href="{{url_for('deletePhoto',ekey=edata.items[0].key,pkey=photo['key'],filename=photo['filename'])}}" ><button type="button" class="btn btn-sm btn-outline-secondary">Delete</button></a>
{% endif %}
{% endif %}
</div>
<div class="modal" id="modal{{loop.index|e}}" tabindex="-1" role="dialog" aria-labelledby="modal{{loop.index|e}}label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal{{loop.index|e}}label">{{photo['comments']}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="card-img-top" src="data:image/jpeg;base64,{{photo['photoImage'] | safe }}" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
<small>{{photo['datetime']}}</small>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div><!--row-->
</div><!-- album -->
</div><!--wrapper-->
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap5のalbumのサンプルをそのまま頂いています。
画像の表示で < src="url" ができないので、 src="data:image/jpeg;base64,.."を使っています。写真の中身を少しづつDriveから受信してbase64に変換して表示しています。ここで１０秒以上かかるとタイムアウトして表示できません。そのときには１つ前に戻ってください。
また一覧がその状態になると、もう２度と写真が見れなくなってしまうので、消すモードを作りました。ここでは写真表示は行わず自分がuploadした写真だけ削除できるようにしています。大きな写真を削除すればまた一覧が見れるようになると思います。
この画面もモードが２つに分かれているので、そのモードをphotoflagというパラメータで引き継ぎます
写真を拡大するには Viewボタンを押してください。これもBootstrap5のモーダルのサンプルを使っています。
main 写真一覧部分
main.py(抜粋)
@app.route("/photos/<ekey>/<string:photoFlag>", methods = ["GET"])
def dirPhotos(ekey,photoFlag):
# イベント一覧の入り
if "id" in session:
if ekey:
events = event.Event()
edata = events.getEvent({"key":ekey})
pdata = events.dirEventPhotos(ekey,photoFlag)
errmess = "" if pdata == None or len(pdata) <= 10 else "写真が満杯です"
return render_template("photos.html", id=session["id"],edata=edata,pdata=pdata,photoFlag=photoFlag,errmess=errmess)
else:
return render_template("login.html")
@app.route("/photo/<ekey>/<pkey>/<filename>", methods = ["GET"])
def deletePhoto(ekey,pkey,filename):
# イベント一覧の入り
if "id" in session:
if pkey:
drives = driveFile.DriveFile()
photos = photoBase.PhotoBase()
events = event.Event()
drives.deleteFile(filename)
photos.deletePhoto(pkey)
edata = events.getEvent({"key":ekey})
pdata = events.dirEventPhotos(ekey,False)
return render_template("photos.html", id=session["id"],edata=edata,pdata=pdata,photoFlag=False)
else:
return render_template("login.html")
dirPhotosが写真の一覧、ただしphotoFlagがTrueの時は写真表示、そうでなければ削除モードです。