wger-project/wger
1
0
Fork 0
mirror of https://github.com/wger-project/wger.git synced 2026-02-17 16:07:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add AVIF images for landing page and update HTML to use them as sources

Browse Source
This commit is contained in:
hangy
2025-05-26 01:15:30 +02:00
parent 34c60249fa
commit 9e1ef3ba15
7 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitattributes vendored
View File

@@ -2,6 +2,7 @@
* text eol=lf
# These files are binary and should be left untouched
*.avif binary
*.png binary
*.jpg binary
*.jpeg binary

BIN
wger/software/static/images/community.avif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
wger/software/static/images/hero.avif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
wger/software/static/images/screens-1.avif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
wger/software/static/images/screens-2.avif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
wger/software/static/images/screens-3.avif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

48
wger/software/templates/features.html
View File

@@ -98,9 +98,12 @@
<section
class="row px-3 mb-5 d-flex align-items-center justify-content-center gap-2 flex-row-reverse">
<div class="col-lg-7 col-sm-6 col-12 d-flex px-5 flex-column align-items-center">
<img src="{% static 'images/hero.png' %}"
alt="a man with a dumbbell"
class="header-hero-image">
<picture>
<source srcset="{% static 'images/hero.avif' %}" type="image/avif">
<img src="{% static 'images/hero.png' %}"
alt="a man with a dumbbell"
class="header-hero-image">
</picture>
</div>
<div class="col-lg-3 col-sm-5 col-11 d-flex py-3 flex-column align-items-start">
<h1 class="font-bebas-neue display-3 uppercase">
@@ -155,9 +158,12 @@
class="row row-cols row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center flex-reverse gy-3">
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative">
<img src="{% static 'images/screens-1.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
<picture>
<source srcset="{% static 'images/screens-1.avif' %}" type="image/avif">
<img src="{% static 'images/screens-1.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
</picture>
</div>
<div
@@ -190,9 +196,12 @@
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative"
style="overflow: hidden;">
<img src="{% static 'images/screens-2.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
<picture>
<source srcset="{% static 'images/screens-2.avif' %}" type="image/avif">
<img src="{% static 'images/screens-2.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
</picture>
</div>
<div
class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center">
@@ -226,10 +235,12 @@
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative"
style="overflow: hidden;">
<img src="{% static 'images/screens-3.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
<picture>
<source srcset="{% static 'images/screens-3.avif' %}" type="image/avif">
<img src="{% static 'images/screens-3.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
</picture>
</div>
<div
class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center py-2">
@@ -280,10 +291,13 @@
<div class="row w-100 gy-3">
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center">
<img src="{% static 'images/community.png' %}"
width="500"
alt="list of human faces"
class="img-fluid">
<picture>
<source srcset="{% static 'images/community.avif' %}" type="image/avif">
<img src="{% static 'images/community.png' %}"
width="500"
alt="list of human faces"
class="img-fluid">
</picture>
</div>
<div class="col-lg-5 col-sm-12">
<h1 class="display-3 uppercase font-bebas-neue header-community">