Commit Graph

9 Commits

Author SHA1 Message Date
Alexandre FLAMENT
0063427309 Template images.html: lazy by JS the full size image
Remove lazy loading by browser / width / height:
JS is required to display this HTML fragment anyway.

Simplify the HTML template.
2022-05-18 07:29:31 +00:00
mrpaulblack
169f8d9988 [simple theme] add netloc to image result articles 2022-04-06 15:07:05 +02:00
Markus Heiser
c416464949 [fix] lazy loading of <img> tags
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>
2021-12-15 10:39:55 +01:00
Markus Heiser
c7bb6945d1 [fix] simple theme: img tile, shows duplicate information on screen
Remove global title attribute from img tag[1][2] .  In the image result, the
title is already shown from span class title::

    <span class="title">{{ result.title|striptags }}</span>

See commit: 8fbffb1409

    [fix] simple-theme templates: polish HTML <img> elements

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-title

Reported-by: @dalf https://github.com/searxng/searxng/pull/545#issuecomment-980531215
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-29 20:47:37 +01:00
Markus Heiser
8fbffb1409 [fix] simple-theme templates: polish HTML <img> elements
- <img> [1] element does not have an end tag, no need for a leading `/>`
- add global attribute title[2] to result_templates/images.html (result-images-source)
- in jinja macro 'macro result_header' remove duplicate of class="image"
- in jinja macro 'macro result_header' remove alt attribute (fix [3])::

    alt="{{ result.title|striptags }}"

  the result.title is already shown in::

    <h3>{{ result_link(result.url, result.title|safe) }}</h3>

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-title
[3] https://github.com/searxng/searxng/issues/523

Closes: https://github.com/searxng/searxng/issues/523
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-25 12:07:57 +01:00
MrPaulBlack
566dfe3330 [simple theme] update to ion icons 5 and drop webfont
* update from ionicons-npm to ionicons ver.5
* drop the webfont built by grunt for icons
* built icons.html template for inlining icons with jinja2 into html
* update icon to use mostly the outline version
* add icons to categories and do not display them on mobile to save space
* remove all legacy ion icon font files from simple theme
* icons.html is added in this commit since make statc.build.restore requires git to know the file already
* cleanup error-dialog
2021-11-13 10:42:07 +01:00
Alexandre Flament
3167d645e8 [fix] simple theme: fix open in a new tab preference 2021-11-05 09:36:19 +01:00
Alexandre Flament
fd374d6322 [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.
2021-10-28 08:28:21 +02:00
Alexandre Flament
10a24bdc2c [enh] add simple theme (WIP) 2017-08-06 16:04:21 +02:00