2594192ae7
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.
32 lines
992 B
Twig
32 lines
992 B
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %} results for {{ query }} !{% endblock %}
|
|
|
|
{% block body %}
|
|
<style>
|
|
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
|
|
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
|
|
</style>
|
|
|
|
<div class="example-wrapper">
|
|
<h1>results for {{ query }}! ✅</h1>
|
|
{% for result in results %}
|
|
{% set array = result['title']|split('-') %}
|
|
{% set artist = array[0] %}
|
|
{% set song = array[1] %}
|
|
<div>
|
|
<div>
|
|
artist : {{artist}}
|
|
</div>
|
|
<div>
|
|
song : {{song}}
|
|
</div>
|
|
<img loading="lazy" src={{result['cover_image']}} alt="{{song ~ ' by ' ~ artist}}" />
|
|
</div>
|
|
{% endfor %}
|
|
<a href="/search?q={{query}}&page={{previous_page}}">previous page</a>
|
|
<p>{{page}}</p>
|
|
<a href="/search?q={{query}}&page={{next_page}}">next page</a>
|
|
</div>
|
|
{% endblock %}
|