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

13
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>
<img <picture>
class="image" <img
src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=avif" class="image"
alt="Banner" src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=avif"
/> 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/>

18
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">
<img src=display_url alt=image.title.clone()/> <picture>
<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>

53
style/main.scss
View file

@ -118,14 +118,18 @@ body {
} }
} }
.image { picture {
max-width: 800px; display: contents;
width: 100%;
max-height: 300px; .image {
height: 100%; max-width: 800px;
object-fit: cover; width: 100%;
object-position: top; max-height: 300px;
flex-shrink: 1; height: 100%;
object-fit: cover;
object-position: top;
flex-shrink: 1;
}
} }
} }
@ -209,12 +213,16 @@ body {
align-items: flex-start; align-items: flex-start;
margin-top: 32px; margin-top: 32px;
img { picture {
object-fit: contain; display: contents;
width: 100%;
max-height: 90vh; img {
max-width: 1232px; object-fit: contain;
align-self: center; width: 100%;
max-height: 90vh;
max-width: 1232px;
align-self: center;
}
} }
h3 { h3 {
@ -243,14 +251,17 @@ body {
li { li {
img { picture {
height: 400px; display: contents;
width: 400px; img {
object-fit: contain; height: 400px;
width: 400px;
object-fit: contain;
@media all and (max-width: 1000px) { @media all and (max-width: 1000px) {
height: 300px; height: 300px;
width: 300px; width: 300px;
}
} }
} }
} }