diff options
| author | Alexandre Flament <alex@al-f.net> | 2021-10-02 11:57:08 +0200 |
|---|---|---|
| committer | Alexandre Flament <alex@al-f.net> | 2021-10-28 08:28:21 +0200 |
| commit | fd374d6322c6f0919832b6465bc311dac68bb753 (patch) | |
| tree | 0bf1ca8edff21ce04ca48dcb0522d3d732f19883 /searx/templates | |
| parent | 2624034cd6f417b52ed3f9f3f5226720fa0b53a1 (diff) | |
| download | searxng-fd374d6322c6f0919832b6465bc311dac68bb753.tar.gz searxng-fd374d6322c6f0919832b6465bc311dac68bb753.zip | |
[enh] simple theme: image detail
When an image is selected, the detail with the full size image is displayed
on the right side of the screen (or full screen on tablet and phone).
When Javascript is disabled, the thumbnail is a linked to the full size image,
as it was before.
When the image proxy is enabled, the full size image is also proxied,
in consequence this commit increases the bandwidth usage of instances.
The detail can be closed by the close button or the Esc key.
It is possible to go to the next and previous images using the j and k keys
or the button on the top right of the screen.
Diffstat (limited to 'searx/templates')
| -rw-r--r-- | searx/templates/simple/result_templates/images.html | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/searx/templates/simple/result_templates/images.html b/searx/templates/simple/result_templates/images.html index f756acbe3..0f3069c98 100644 --- a/searx/templates/simple/result_templates/images.html +++ b/searx/templates/simple/result_templates/images.html @@ -1,4 +1,28 @@ -<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}"> - <a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><img class="image_thumbnail" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" /></a> - <span class="url"><a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="small_font">{{ result.parsed_url[0] }}://{{ result.parsed_url[1] }}</a></span> +<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" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" />{{- "" -}} + <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_small('chevron-left') }}</a>{{- "" -}} + <a class="result-detail-next" href="#">{{ icon_small('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"> + {%- 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> |