fix(search): Add alternative text to images and lazy load them

The alternative text used is "SONG by ARTISTS", where SONG and ARTISTS
are placeholders for their relevant properties.

Lazy loading attribute must be placed currently as the first one of img
elements for Firefox, see
https://bugzilla.mozilla.org/show_bug.cgi?id=1647077.
This commit is contained in:
AudricV 2024-02-22 09:26:14 +01:00
parent 4a36d03d64
commit 2594192ae7
No known key found for this signature in database
GPG Key ID: DA92EC7905614198

View File

@ -12,14 +12,16 @@
<h1>results for {{ query }}! ✅</h1> <h1>results for {{ query }}! ✅</h1>
{% for result in results %} {% for result in results %}
{% set array = result['title']|split('-') %} {% set array = result['title']|split('-') %}
{% set artist = array[0] %}
{% set song = array[1] %}
<div> <div>
<div> <div>
artist : {{array[0]}} artist : {{artist}}
</div> </div>
<div> <div>
song : {{array[1]}} song : {{song}}
</div> </div>
<img src={{result['cover_image']}}></img> <img loading="lazy" src={{result['cover_image']}} alt="{{song ~ ' by ' ~ artist}}" />
</div> </div>
{% endfor %} {% endfor %}
<a href="/search?q={{query}}&page={{previous_page}}">previous page</a> <a href="/search?q={{query}}&page={{previous_page}}">previous page</a>