forked from Ponysearch/Ponysearch
c416464949
Images should include dimension attributes. Without `width` and `height` specified, image dimensions are 0×0 pixels at first. ... In this case the browser determines that all of them are visible to the user and decides to load everything [1]. In CSS the `width` is set to a value and the `height` is unsed to scale the image proportional in both dimensions. [1] https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes [2] https://caniuse.com/loading-lazy-attr Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
28 lines
2.9 KiB
HTML
28 lines
2.9 KiB
HTML
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
|
|
<a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
|
|
<img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
|
|
<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
|
|
</a>{{- "" -}}
|
|
<div class="detail">{{- "" -}}
|
|
<a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
|
|
<a class="result-detail-previous" href="#">{{ icon('chevron-left') }}</a>{{- "" -}}
|
|
<a class="result-detail-next" href="#">{{ icon('chevron-right') }}</a>{{- "" -}}
|
|
<a class="result-images-source" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">
|
|
{%- if result.thumbnail_src -%}
|
|
<img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}">
|
|
{%- else -%}
|
|
<img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">
|
|
{%- endif -%}
|
|
</a>{{- "" -}}
|
|
<div class="result-images-labels">{{- "" -}}
|
|
<h4>{{ result.title|striptags }}</h4>{{- "" -}}
|
|
<p class="result-content">{%- if result.content %}{{ result.content|striptags }}{% else %} {% endif -%}</p>{{- "" -}}
|
|
<hr>{{- "" -}}
|
|
<p class="result-author">{%- if result.author %}<span>{{ _('Author') }}:</span>{{ result.author|striptags }}{% else %} {% endif -%}</p>{{- "" -}}
|
|
<p class="result-format">{%- if result.img_format %}<span>{{ _('Format') }}:</span>{{ result.img_format }}{% else %} {% endif -%}</p>{{- "" -}}
|
|
<p class="result-source">{%- if result.source %}<span>{{ _('Source') }}:</span>{{ result.source }}{% else %} {% endif -%}</p>{{- "" -}}
|
|
<p class="result-engine"><span>{{ _('Engine') }}:</span>{{ result.engine }}</p>{{- "" -}}{{- "" -}}
|
|
<p class="result-url"><span>{{ _('View source') }}:</span><a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.url }}">{{ result.url }}</a></p>{{- "" -}}
|
|
</div>{{- "" -}}
|
|
</div>{{- "" -}}
|
|
</article>
|