mirror of
https://github.com/searxng/searxng.git
synced 2024-12-29 12:40:30 +00:00
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>
88 lines
4 KiB
HTML
88 lines
4 KiB
HTML
<!-- Draw favicon -->
|
|
{% macro draw_favicon(favicon) -%}
|
|
<img width="14" height="14" class="favicon" src="{{ url_for('static', filename='themes/simple/img/icons/' + favicon + '.png') }}" alt="{{ favicon }}">
|
|
{%- endmacro %}
|
|
|
|
{% macro result_open_link(url, classes='') -%}
|
|
<a href="{{ url }}" {% if classes %}class="{{ classes }}" {% endif %}{% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>
|
|
{%- endmacro %}
|
|
|
|
{%- macro result_close_link() -%}
|
|
</a>
|
|
{%- endmacro %}
|
|
|
|
{%- macro result_link(url, title, classes='') -%}
|
|
{{ result_open_link(url, classes) }}{{ title }}{{ result_close_link() }}
|
|
{%- endmacro -%}
|
|
|
|
<!-- Draw result header -->
|
|
{% macro result_header(result, favicons, image_proxify) -%}
|
|
<article class="result {% if result['template'] %}result-{{ result.template|replace('.html', '') }}{% else %}result-default{% endif %} {% if result['category'] %}category-{{ result['category'] }}{% endif %}{% for e in result.engines %} {{ e }}{% endfor %}">
|
|
{{- result_open_link(result.url, "url_wrapper") -}}
|
|
{%- for part in get_pretty_url(result.parsed_url) -%}
|
|
<span class="url_o{{loop.index}}"><span class="url_i{{loop.index}}">{{- part -}}</span></span>
|
|
{%- endfor %}
|
|
{{- result_close_link() -}}
|
|
{%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" title="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{ result_close_link() }}{% endif -%}
|
|
{%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{ result_close_link() }}{% endif -%}
|
|
<h3>{{ result_link(result.url, result.title|safe) }}</h3>
|
|
{%- endmacro -%}
|
|
|
|
<!-- Draw result sub header -->
|
|
{%- macro result_sub_header(result) -%}
|
|
{% if result.publishedDate %}<time class="published_date" datetime="{{ result.pubdate }}" >{{ result.publishedDate }}</time>{% endif %}
|
|
{%- if result.metadata %} <div class="highlight">{{ result.metadata|safe }}</div>{% endif -%}
|
|
{%- endmacro -%}
|
|
|
|
<!-- Draw result sub footer -->
|
|
{%- macro result_sub_footer(result, proxify) -%}
|
|
<div class="engines">
|
|
{% for engine in result.engines %}<span>{{ engine }}</span>{% endfor %}
|
|
{{ result_link("https://web.archive.org/web/" + result.url, icon_small('ellipsis-vertical-outline') + _('cached'), "cache_link") }}‎ {% if proxify and proxify_results %} {{ result_link(proxify(result.url), icon('link') + _('proxied'), "proxyfied_link") }} {% endif %}
|
|
</div>{{- '' -}}
|
|
<div class="break"></div>{{- '' -}}
|
|
{%- endmacro -%}
|
|
|
|
<!-- Draw result footer -->
|
|
{%- macro result_footer(result) -%}
|
|
</article>
|
|
{%- endmacro -%}
|
|
|
|
<!-- -->
|
|
{%- macro tabs_open() -%}
|
|
<div class="tabs" role="tablist">
|
|
{%- endmacro -%}
|
|
|
|
{%- macro tab_header(name, id, label) -%}
|
|
<input type="radio" name="{{ name }}" id="tab_{{ id }}"/>
|
|
<label for="tab_{{ id }}" role="tab"
|
|
aria-controls="panel{{ id }}">{{ label }}</label>
|
|
<section id="tab-content{{ id }}" role="tabpanel"
|
|
aria-labelledby="{{ label }}" aria-hidden="false">
|
|
{%- endmacro -%}
|
|
|
|
{%- macro tab_footer() -%}
|
|
</section>
|
|
{%- endmacro -%}
|
|
|
|
{%- macro tabs_close() -%}
|
|
</div>
|
|
{%- endmacro -%}
|
|
|
|
{%- macro checkbox_onoff(name, checked) -%}
|
|
<div class="checkbox-onoff">{{- '' -}}
|
|
<input type="checkbox" value="None" id="{{ name }}" name="{{ name }}" {% if checked %}checked{% endif %}/>{{- '' -}}
|
|
<label for="{{ name }}"></label>{{- '' -}}
|
|
</div>
|
|
{%- endmacro -%}
|
|
|
|
{%- macro checkbox(name, checked, readonly, disabled) -%}
|
|
<div class="checkbox">{{- '' -}}
|
|
{%- if checked == '?' -%}
|
|
{{ icon_small('warning') }}
|
|
{%- else -%}
|
|
<input type="checkbox" value="None" id="{{ name }}" name="{{ name }}" {% if checked %}checked{% endif %}{% if readonly %} readonly="readonly" {% endif %}{% if disabled %} disabled="disabled" {% endif %}/>{{- '' -}}
|
|
<label for="{{ name }}"></label>{{- '' -}}
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endmacro -%}
|