iT邦幫忙

0

Day 24|加入作品封面圖片

  • 分享至 

  • xImage
  •  

封面能讓作品卡片更有辨識度。今天先讓使用者輸入圖片網址,不做圖片上傳,避免增加檔案儲存與安全管理的複雜度。
步驟 1:確認資料庫欄位
Day 8 已經在 media 資料表建立 cover_url 欄位,因此不用再修改資料庫。
步驟 2:修改新增表單
在 templates/add.html 加入:
封面圖片網址

在編輯表單 templates/edit.html 加入:
封面圖片網址

步驟 3:在新增路由保存網址
在 add_media() 讀取其他表單欄位的位置加入:
cover_url = request.form.get("cover_url", "").strip()

修改 INSERT 語句,加入 cover_url:
INSERT INTO media (
title, media_type, year, genre,
status, rating, notes, cover_url
)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)

並在參數清單最後加上:
cover_url

在 edit_media() 中也要讀取 cover_url,並在 UPDATE 語句加入:
cover_url = ?

同樣要把 cover_url 放進參數清單,位置必須與 SQL 的問號一致。
步驟 4:顯示封面
在 collection.html 的每個 開頭加入:
{% if item["cover_url"] %}

{% endif %}

步驟 5:加入圖片樣式
.media-cover {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 8px;
margin-bottom: 14px;
background: var(--bg);
}

安全提醒: 只允許 https:// 或 http:// 形式的圖片網址。若要公開部署,後續還應限制允許的網域並防範不安全的外部資源。


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言