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

Add jpg fallback images

Browse source
This commit is contained in:
Tanguy Gérôme 2025-03-08 13:29:29 +02:00
parent 14cff1b306
commit cb70ffb3bb
3 changed files with 56 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app.rs
View file

@ -85,11 +85,14 @@ pub fn Header() -> impl IntoView {
<A href="/gallery">{t!(i18n, gallery)}</A> <A href="/gallery">{t!(i18n, gallery)}</A>
</div> </div>
</div> </div>
<picture>
<img <img
class="image" class="image"
src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=avif" src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=avif"
alt="Banner" alt="Banner"
/> />
<source srcset="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=jpg"/>
</picture>
</div> </div>
<LanguageSwitcher/> <LanguageSwitcher/>

16
src/routes/gallery.rs
View file

@ -69,9 +69,13 @@ pub fn GalleryEntry() -> impl IntoView {
None => view! { <div/> }, None => view! { <div/> },
Some(image) => { Some(image) => {
let display_url = format!("https:{}?w=2400&h=2400&q=80&fm=avif", &image.image_with_watermark.file.url); let display_url = format!("https:{}?w=2400&h=2400&q=80&fm=avif", &image.image_with_watermark.file.url);
let jpg_display_url = format!("https:{}?w=2400&h=2400&q=80&fm=jpg", &image.image_with_watermark.file.url);
view! { view! {
<div class="open-entry"> <div class="open-entry">
<picture>
<img src=display_url alt=image.title.clone()/> <img src=display_url alt=image.title.clone()/>
<source srcset=jpg_display_url/>
</picture>
<h3>{image.title.clone()}</h3> <h3>{image.title.clone()}</h3>
<p>{image.description}</p> <p>{image.description}</p>
</div> </div>
@ -109,8 +113,18 @@ pub fn Gallery() -> impl IntoView {
{gallery.images.into_iter() {gallery.images.into_iter()
.map(|image| { .map(|image| {
let thumbnail_url = format!("https:{}?w=800&h=800&q=80&fm=avif", &image.image_without_watermark.file.url); let thumbnail_url = format!("https:{}?w=800&h=800&q=80&fm=avif", &image.image_without_watermark.file.url);
let jpg_thumbnail_url = format!("https:{}?w=800&h=800&q=80&fm=jpg", &image.image_without_watermark.file.url);
let link_url = format!("/gallery/{}", &image.slug); let link_url = format!("/gallery/{}", &image.slug);
view! { <li><A href=link_url><img src=thumbnail_url alt=image.title/></A></li> } view! {
<li>
<A href=link_url>
<picture>
<img src=thumbnail_url alt=image.title/>
<source srcset=jpg_thumbnail_url/>
</picture>
</A>
</li>
}
}).collect::<Vec<_>>() }).collect::<Vec<_>>()
} }
</ul> </ul>

11
style/main.scss
View file

@ -118,6 +118,9 @@ body {
} }
} }
picture {
display: contents;
.image { .image {
max-width: 800px; max-width: 800px;
width: 100%; width: 100%;
@ -128,6 +131,7 @@ body {
flex-shrink: 1; flex-shrink: 1;
} }
} }
}
.language-switcher { .language-switcher {
@include top-level-padding; @include top-level-padding;
@ -209,6 +213,9 @@ body {
align-items: flex-start; align-items: flex-start;
margin-top: 32px; margin-top: 32px;
picture {
display: contents;
img { img {
object-fit: contain; object-fit: contain;
width: 100%; width: 100%;
@ -216,6 +223,7 @@ body {
max-width: 1232px; max-width: 1232px;
align-self: center; align-self: center;
} }
}
h3 { h3 {
margin-bottom: 8px; margin-bottom: 8px;
@ -243,6 +251,8 @@ body {
li { li {
picture {
display: contents;
img { img {
height: 400px; height: 400px;
width: 400px; width: 400px;
@ -256,4 +266,5 @@ body {
} }
} }
} }
}
} }