Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance image display in detail pages

Browse Source
This commit is contained in:
Greg 2025-05-25 20:11:07 +02:00
parent e7a125e4d9
commit 3113329037
1 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
layouts/_default/single.html
View File

@ -9,7 +9,9 @@
<div class="detail-content"> <div class="detail-content">
<div class="detail-top"> <div class="detail-top">
{{ if .Params.image }} {{ if .Params.image }}
<div class="detail-image" style="background-image: url('{{ .Params.image }}');"></div> <div class="detail-image-container">
<img src="{{ .Params.image }}" alt="{{ .Title }}" class="detail-image">
</div>
{{ else }} {{ else }}
<div class="detail-image-placeholder" style="background-color:{{ if eq .Params.category "Books" }}#004d40{{ else if eq .Params.category "Movies" }}#01579b{{ else if eq .Params.category "TV Series" }}#4a148c{{ else if eq .Params.category "Recipes" }}#b71c1c{{ else if eq .Params.category "YouTube" }}#f44336{{ else }}#546e7a{{ end }}"> <div class="detail-image-placeholder" style="background-color:{{ if eq .Params.category "Books" }}#004d40{{ else if eq .Params.category "Movies" }}#01579b{{ else if eq .Params.category "TV Series" }}#4a148c{{ else if eq .Params.category "Recipes" }}#b71c1c{{ else if eq .Params.category "YouTube" }}#f44336{{ else }}#546e7a{{ end }}">
<div class="placeholder-initial">{{ substr .Title 0 1 }}</div> <div class="placeholder-initial">{{ substr .Title 0 1 }}</div>
@ -103,23 +105,43 @@
flex-direction: row; flex-direction: row;
} }
} }
.detail-image, .detail-image-placeholder { .detail-image-container {
height: 300px;
width: 100%; width: 100%;
background-size: cover; display: flex;
background-position: center; justify-content: center;
align-items: center;
padding: 20px;
background: #f5f5f5;
border-radius: 8px 8px 0 0;
overflow: hidden;
} }
@media (min-width: 768px) { .detail-image {
.detail-image, .detail-image-placeholder { max-width: 100%;
width: 40%; max-height: 400px;
height: auto; object-fit: contain;
} border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
} }
.detail-image-placeholder { .detail-image-placeholder {
height: 300px;
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
border-radius: 8px 8px 0 0;
}
@media (min-width: 768px) {
.detail-image-container {
padding: 40px;
}
.detail-image {
max-height: 500px;
}
.detail-image-placeholder {
width: 40%;
height: 350px;
}
} }
.placeholder-initial { .placeholder-initial {
font-size: 5rem; font-size: 5rem;