tanguy/tanguy.gerome.fi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make gallery images clickable to display full-sized image

Browse source
This commit is contained in:
Tanguy Gérôme 2025-08-31 12:57:52 +03:00
parent 47e4cccb5d
commit af93cd1f00
Signed by untrusted user who does not match committer: tanguy
GPG key ID: 10B2947233740B88
2 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/gallery.rs
View file

@ -118,7 +118,9 @@ pub fn GalleryEntry() -> impl IntoView {
view! { view! {
<div class="main-width gallery-open-entry"> <div class="main-width gallery-open-entry">
<h2 class="gallery-title">{image.title}</h2> <h2 class="gallery-title">{image.title}</h2>
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/> <a class="gallery-image-details-link" href=format!("https://directus.gerome.fi/assets/{}?format=auto&quality=95", image.watermarked.id)>
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
</a>
{if subtitle.len() > 0 { {if subtitle.len() > 0 {
Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>}) Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>})
} else { } else {

21
style/main.scss
View file

@ -289,9 +289,13 @@ body {
.blog-illustration { .blog-illustration {
position: relative; position: relative;
height: min(60vh, 75vw);
display: flex;
img { img {
max-height: 60vh; max-height: 60vh;
height: 100%;
width: 100vw; width: 100vw;
max-width: 100vw; max-width: 100vw;
object-fit: cover; object-fit: cover;
@ -395,12 +399,17 @@ body {
align-items: flex-start; align-items: flex-start;
margin-top: 32px; margin-top: 32px;
img { .gallery-image-details-link {
object-fit: contain; display: block;
width: 100%; margin: auto;
max-height: 90vh;
max-width: 1232px; img {
align-self: center; object-fit: contain;
width: 100%;
max-height: 90vh;
max-width: 1232px;
align-self: center;
}
} }
.gallery-title { .gallery-title {