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

18
src/routes/gallery.rs
View file

@ -69,9 +69,13 @@ pub fn GalleryEntry() -> impl IntoView {
None => view! { <div/> },
Some(image) => {
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! {
<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>
<p>{image.description}</p>
</div>
@ -109,8 +113,18 @@ pub fn Gallery() -> impl IntoView {
{gallery.images.into_iter()
.map(|image| {
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);
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<_>>()
}
</ul>

53
style/main.scss
View file

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