mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Add a warning for potential image map scaling issues + responsive alternative with SVG (#8044) 

* Add a warning for potential image map scaling issues + alternative with SVG

* Update ImageWidget.tid

fix phrasing
This commit is contained in:
Télumire 2024-03-09 15:39:15 +01:00 committed by GitHub
parent a90b1dbb49
commit 35d1609a2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
editions/tw5.com/tiddlers/widgets/ImageWidget.tid
View File

@ -25,6 +25,38 @@ Any content of the `<$image>` widget is ignored.
The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image. The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
! Responsive images and `<map>`
[[Image maps area|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area]] coordinates are numbers of CSS pixels, therefore they do not scale. If you want to use responsive images, you can use a `svg` and `foreignObject`:
<svg viewBox="0 0 330 333" xmlns="http://www.w3.org/2000/svg" width="50%">
<foreignObject width="100%" height="100%">
[img[Tiddler Fishes.svg]]
</foreignObject>
<g transform="translate(-216 -290)" >
<a href="#:[[Orange fish]]">
<title>Orange fish</title>
<path opacity="0" d="m309.4 403.5c-2.3-1.6-4-3.3-5.3-5.2-.4-.9-.7-1.8-1-2.8-.9-3.4-1.4-7.5-.9-11.3.1-1 .3-1.9.5-2.8.8-2 1.8-3.9 2.9-5.7.3-.3.6-.6.9-.8.4-.4.9-.7 1.4-1l1.3-.6 5-.3c4.1-.3 8-.9 11.9-1.7 10.9-2.3 20.8-6.6 29.5-13.1 2.4-1.8 4.7-3.9 6.8-6.1-1.6 6.2-2.5 11.8-9 19.5 5.7 1.6 11.6 4 13.6-6 3.8 5.9 8.9 3.1 9.8-5.3 5.4 6.7 8.4 3 8.4-4.3 6.4 5.2 10.6.8 12.2-5.5-4.9-1.1-20 2.4-25.1-6.7.1 0 .2-.1.3-.1 3-1.3 6.6-2.1 10.2-2.4 1.5-.1 3-.1 4.5-.1l2.5-.2c1.5-.1-.3-.1 1.1-.2.6 0 1.3-.1 1.9-.1.8-.1 1.6-.2 2.4-.3.7.1 1.5.2 2.2.3 1.4.1 3.1.2 4.2-.5.4-.2.5-.6.6-1.1.1-.4.1-.7.2-1.1.6-4.3.1-8.7-1.4-12.3-.5-1.1-1.1-2.1-1.7-3.1-3.5-5.1-9.1-8.1-14.9-9.6-1.4-.4-2.9-.6-4.5-.8-2.1-.2-4.3-.3-6.4-.2-6.9.3-13.2 2.1-18.8 4.9.9-4.4 4.8-10.5 7.7-14.5-.7-.3-1.5-.4-2.3-.4-5.5-.2-11.8 5.4-13.8 10.9-4.2-4.5-13.8.9-12.9 5-7.8-2.9-11.5 2.7-9.6 9.3-4.6-.2-9.6 3-9 8.1 8.3-5.1 13.4.8 15.3 6.6-1.1 1.3-2.2 2.6-3.4 3.8-4.4 4.6-9.4 8.3-14.6 11.3-5.3 3-10.9 5.4-17.1 6.5-2.9.5-6.1.8-9.1.3-3.4-1-6.2-3-8.6-6.3-.5-.8-1.1-1.8-1.4-2.4l-1 .8c-1.7 1.9-3.2 3.8-4.4 6-.9 1.7-1.8 3.5-2.1 5.6-.4 2.9.4 5.5 2.1 7.4 2.4 2.6 5.8 3.9 9.1 4.7 1 .2 2 .5 3 .6l2 .3-.5 1.9c-.4 1.4-.6 2.8-.8 4.3-.6 5 .6 9.7 4.2 12.8 1 .9 2.2 1.6 3.4 2.2 1.6.7 3.3 1.2 5.1 1.5 2.1.3 4.6.4 6.8 0 1 .1 2.1.2 3.8.2 1.3 0 1.9.1 2.6.1z"/>
</a>
<a href="#:[[Cyan fish]]">
<title>Cyan fish</title>
<path opacity="0" d="m273.6 408.6c-3.2-.2-6.1 2.4-7.2 5.5-4.8-3.6-10.5-2.3-10.6 5-3.1-2-10.5 4.1-8.1 9-5.8 0-13.5 4.5-13.5 10 .8-.2 1.6-.4 2.4-.6 5.4-1.3 12.3-2.2 14.6 0-.6.5-1.2.9-1.9 1.4-2.3 1.9-4.6 3.8-6.9 5.9-5.1 4.8-9.3 10-12.3 15.9-.8 1.5-1.3 3.1-1.9 4.7-.7 2.2-1.4 4.5-1.9 6.9-.5 2.2-.8 4.5-1 6.9-.1 1.7-.2 3.5-.1 5.3.3 10.7 4.6 19.5 11.6 26.8 1.2 1.3 2.6 2.5 3.9 3.7.7.6 1.5 1.2 2.3 1.8 1 .8 2 1.6 3 2.4 2.9 2.4 5.6 4.9 8.3 7.6 5.6 5.5 10.4 11.5 15.3 17.4.8 1 1.6 2 2.4 3 .5.6 1.2.5 1.6.1 2.2-1.6 1.7-4.8 1.2-7.2-.1-.6-.3-1.3-.5-1.9-.7-2.1-1.5-4.2-2.2-6.3-.6-3.1-1.1-6-1.7-9.6-1.6-1.9-1.2-4 .1-6.3-.3 1.1-.1 2.3.4 3.2.2.3.5.8.8 1-.9-1-1.2-2.6-.7-4 .3-1.1 1.1-2.1 1.9-3 2.2-2.5 4.9-4.6 7.3-6.8 1.8-1.6 3.6-3.4 4.5-5.5.1-.1.1-.3.2-.4l.1-.1c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.2-.3-.3 0 0 0 0 0 0 0 0 0-.1.1-.1 0 0-.1 0-.1.1-.3-.2-.5-.5-.8-.7l-.1 0c-.1 0-.4.3-.5.3-.7.4-1.4.8-2.1 1.2-3 1.8-6.1 3.5-9.3 4.9-2.6 1.1-5.3 2.3-8.2 2.9-1.6.4-3.3.7-5.1.8-2.5.1-4.6-.2-6.6-1.1-.5-.2-1.1-.5-1.6-.9-3.1-2.2-4.8-5.5-5.8-9.1l-.7-3.5 0-.1c.1-1.2.3-2.4.7-3.5.9-2.8 2.6-5.4 4.6-7.7 4-4.3 8.6-7.6 13.3-10.6l2.1-1.3c-1.7 2.6-3.9 5.3-7.7 8.2 4.5 2.4 9.2 5.6 12.7-2.5 2.2 5.8 7 4.4 9.4-2.7 3.3 6.7 6.6 4.2 8-2.1 4.5 5.7 8.9 2.7 11.4-2.4-2.8-1.3-10.1-1.6-15.3-4.6l5.4-1.1.2 0c.1 0 .3 0 .4 0 .5 0 .9-.1 1.4-.1 1-.1 2-.1 3-.2 3.2-.2 6.5-.3 9.7-.4 4.1-.2 8.2-.3 12.3-.7 3.1-.3 6.1-.7 9-1.2.3-.1.7-.2 1.1-.4 1.1-.4 2.2-1 3.2-1.6-.4.2-.8.3-1.2.4.6-.3 1.1-.6 1.5-1 .2 0 .3 0 .5-.1.2-.1.5-.3.7-.4.7-.4 1.4-.8 2-1.2 1-.7 2-1.7 1.9-3 0-.2-.1-.5-.2-.7-.4-1.1-1.6-1.8-2.6-2.4l-4.8-2.5-.1-.2c-1.1-1.3-2.1-2.6-3.4-3.9-3.8-3.9-8.1-7.2-12.4-10-5.5-3.6-11.3-6.4-17.6-8.3-3.1-.9-6.3-1.5-9.7-1.7-1.4-.1-2.8-.1-4.2.1-.3 0-.6.1-1 .1-.1-.1-.3-.2-.4-.3-4.6-3.2-9-9.7-1.7-15.4-.7-.4-1.5-.6-2.2-.6z"/>
</a>
<a href="#:[[Purple fish]]">
<title>Purple fish</title>
<path opacity="0" d="m426 385.2c-2.2 0-4.3 1.7-5.4 4.5-2.7-2.3-7.3-2.8-9.4.5 7.5.9 7.8 6.9 6.2 11.4-1.6.4-3.1.8-4.7 1.4-3.1 1.1-6.4 3-9.1 4.9-3.4 2.4-6.4 5.1-9.1 8-2.4 2.6-4.6 5.3-6.5 8.2-1.6 2.4-3 4.7-4.3 7.2l-1.2 2.9-2.2 2c-.8.7-1.5 1.5-2.1 2.3-.3.5-.8 1.1-.8 1.8 0 .2 0 .4 0 .6.3 1.2 1.4 1.8 2.4 2.1.7.2 1.4.4 2 .5.3 0 .5.1.7.1.3.1.6 0 .9-.1.7.2 1.3.3 2 .4l-2 0c1.3.3 2.8.7 4.2.5 2.7-.3 5.3-.7 8-1.2 3.6-.7 7.1-1.6 10.7-2.5 2.8-.7 5.6-1.5 8.4-2.1.9-.2 1.8-.4 2.6-.6.3-.1.7-.1 1-.2.6-.1 1.2-.1 1.9-.2.2 0 .3 0 .5 0-3.4 4.6-10.7 7-12.9 8.9 3.5 3.7 8 5.2 10.4-.8.9 1.7 2 3 3 3.7.1.1.2.1.3.2 1.8 1 3.4 0 4.2-4.1 3.8 5.4 8.3 5.4 8.7-.1 5.1 6.1 8.3 2.2 11.5-1-5.6-2.2-8.4-4.7-11-7.3.6 0 1.3 0 1.9 0 .5 0 1.1 0 1.6.1.1 0 .5 0 .6 0l2.6.4c.9.1 1.9.2 2.8.2 2.5.1 5 .2 7.5.2 3.1.1 6.2.2 9.4.5 2.9.2 5.7.5 8.5 1 7.9 1.4 16.3 4.1 21.2 10.5 4.7 6.2 5 13.6 4 20.3-.2 1.5-.5 3-.8 4.5-.2.7-.3 1.4-.5 2 0 .1-.1.2-.1.3.1.4.4.9.6 1.3 0 0 .2.1.2.1.3.2.6.3.9.4 1.8.6 3.8.6 5.6-.3 2.6-1.2 4.1-3.2 5.5-5.4 2.6-4 4.1-9.1 4.3-13.9 0-.6 0-1.1 0-1.7-.1-1.8-.4-4.1-1.8-5.7-.7-.8-1.4-1.1-2.4-1.4-.6-.6-1.3-1.2-2-1.8 1.8-.8 3.4-1.6 4.9-2.4.2-.1.4-.2.6-.2 1.9-.8 3.9-1.9 5.4-3.1 2-1.5 3.7-3.5 4.8-5.7.1-.2.2-.3.2-.5.1-.3.3-.6.4-1 0-.1.1-.2.1-.4.2-.6.4-1.3.6-2 .3-1.6.4-3.2.2-4.8-.2-1.4-.5-2.8-1.3-4.2-.4-.7-.9-1.3-1.6-1.6-1.5-.6-3.3-.3-4.9-.1-.9.1-1.9.3-2.8.5-1.3.3-2.7.6-4.1.9-5 1.1-10.2 2.3-15.2 2.1-2.3-.1-5-.3-7.1-1.5-1.7-1-3-2.4-4.5-3.7-1.3-1.1-2.6-2.2-3.9-3.2-6.1-4.9-12.7-9-19.8-12.5-3.6-1.8-7.6-3.2-11.6-4.2-.7-.2-1.5-.3-2.2-.5.1-3.4 8.3-6.3 13.4-7.8-2.5-4.2-10.5-4.2-14.9-1.5-.4-4.8-8.8-6.2-10.3-3.2-1.5-2.4-3.2-3.5-5-3.5z"/>
</a>
<a href="#:[[Green fish]]">
<title>Green fish</title>
<path opacity="0" d="m358.4 492.9c1-2.3 1.8-4.5 2.3-6.7.6-1.7.9-3.4.7-5.2-.1-.5-.1-1.3-.4-1.7-.5-.6-1.2-.7-1.9-1-.5-.2-.9-.3-1.4-.5-5-1.6-10.2-2.7-15.6-2.7-.8 0-1.5 0-2.3.1-2.6.2-5.5.8-8.1 1.7-4.6 1.7-8.4 4.6-11.4 8.2-3.7 4.3-6.3 9.6-8.2 14.9-.1-.2-.1-.3-.2-.5-1.7-4.5-1.7-12.1-1.5-17.4-6.6 1.5-10 11.8-8.4 18.7-6.4-1.6-11.8 8.8-8.6 12-8.7 1.9-8.8 9.1-3.2 13.9-4.2 2.5-6.8 8.3-3.4 12.5 4.3-8.8 11.6-7.3 16.7-3.6-0 .1-.1.3-.1.4-1 4.7-2 9.3-3.5 13.9-1.4 4.7-3.2 9.5-6.2 13.7-1.6 2.2-3.4 4.1-5.5 5.6-1.4 1-2.9 1.8-4.7 2.4-5.3 1.8-10.5 1.4-15.3.4-.9-.2-1.8-.4-2.7-.6-.9-.2-1.9-.4-2.8-.9-.2-.1-.3-.2-.5-.3-3.1-2.4-5.8-5.8-7.7-10.3-0-.3-.1-.6-.1-.9-0 .3 0 .5 0 .8-.2-.6-.5-1.2-.7-1.8-6 3.5-5.4 14.4 3.7 29.2-1.2 8.8.1 17.4 4 25.7-.1.3-.2.6-.3.9 2.2-6 5.3-12 9.4-17.2 4.5-5.7 10.1-10.1 16.3-13.6 10.3-5.8 22.4-9.4 32.9-15 7.1-3.8 13.4-8.3 18.6-14.4 2.1-2.4 4-5.1 5.7-8 1-1.8 1.9-3.5 2.6-5.4.4-1.1.7-2.3 1.1-3.5 1.2 3.2 2.1 7 2.4 12.1 5.6-2.9 12-5.3 6.3-14.6 7.3 1.8 9.3-4.1 3.8-11.3 9.1 1.3 8.8-3.8 3.5-9.5 8.8-.6 8.9-7.1 5.5-13.2-3.4 2-9.3 10-16.5 12.7-.3.1-.6.2-.8.3.3-1.5.5-3 .8-4.5.4-1.9.8-3.8 1.4-5.6.6-1.9 1.2-4 2.1-5.9.3-.4.6-.9.9-1.3.2-.5.4-1 .6-1.5zm-89.3 80.9c0 0 .1 0 .1 0 .7.2 1.3.3 2 .4-.7-.1-1.4-.3-2.1-.5zm-.2 22.4c-1.5 2.3-2.9 4.8-4.1 7.3-.6 1.3-1.1 2.6-1.6 4 1.3-3.7 2.8-7.4 5.8-11.3z"/>
</a>
<a href="#:[[Blue fish]]">
<title>Blue fish</title>
<path opacity="0" d="m411 458.4c-1.1 0-2.2.2-3.1.7 3.4 3.7 8.3 9.9 8.6 13.7-.2 0-.3-.1-.4-.2-2.6-1.5-5.3-2.9-8.1-4.1-2.3-1-4.6-2-7.1-2.7-2.8-.8-5.9-1.1-8.8-1.3-4.8-.4-9.6-.4-14.1.2-1.1.2-2.3.3-3.4.8-.2.1-.5.4-.5.7 0 .1 0 .1 0 .2-.4 2.7-.1 5.9.6 9.3-.3-.9-.6-1.7-.9-2.6.2.9.5 1.7.8 2.6.1.5.3 1 .5 1.5.6 2.7 1.5 5.6 2.5 8.5.5 1.3 1.3 3.1 2.3 5 1.7 3.4 3.6 6.7 6 9.8.6.8 1.2 1.6 1.9 2.4 0 0 0 0 0 0-.4.1-.8.2-1.2.3-2 .4-4.1.5-6.1.3-.2 0-.3 0-.4 0-2.5-.2-4.8-.6-6.8-.9 0 0 0 0 0 0-.1 0-.1 0-.1 0-.6-.1-1.1-.1-1.5-.2-.2 0-.3 0-.5 0-.5 0-.9 0-1.3 0 .1.7.2 1.4.4 2.1.1.6.3 1.2.6 1.8.1.3.2.6.4.9.1.2.3.4.4.7 0 0 0 0 .1 0 .1.3.3.5.5.7.3.4.7.7 1.2.9.5.3 1 .5 1.5.6.3 0 .6 0 .9 0 .3 0 .6-.1.9-.1.6-.1 1.3-.4 2-.7.4-.2.8-.4 1.2-.7-.1.9-.2 1.6-.2 2.3 0 .7 0 1.4.1 1.9.1.3.1.6.2.9.1.2.1.5.2.7 0 0 0 0 0 0 .1.2.2.4.4.6.1.1.2.3.3.4.2.1.3.3.5.3.2.1.4.2.6.2 0 0 0 0 0 0 .2 0 .4.1.6 0 .2 0 .4 0 .7-.1.2-.1.5-.2.7-.3 0 0 0 0 .1 0 .2-.2.5-.3.8-.5 0 0 0 0 0 0 .3-.2.6-.4.9-.7 0 0 0 0 0 0 .4-.3.7-.6 1-.9 0 .5 0 .9 0 1.4 0 .4.1.8.1 1.2.1.4.1.8.2 1.2.1.3.2.7.3 1 .1.3.2.6.3.9.2.2.3.5.5.7.1.3.3.5.5.6.1.2.3.4.5.5.2.2.4.3.6.4 0 0 0 0 0 0 .2.1.4.1.6.2.3 0 .5 0 .7 0 .2 0 .5 0 .7-.1.2-.1.5-.2.7-.3 0 0 .1 0 .1 0 .2-.1.4-.3.7-.4 0 0 0 0 0-.1.3-.1.5-.3.8-.6 0 0 0 0 0 0 0 0 0 0 0 0 .2-.2.5-.5.7-.8.1.6.1 1.1.2 1.6 0 0 0 0 0 0 0 0 0 0 0 0 .1.5.1.9.3 1.4.1.4.2.7.3 1.1.2.3.3.6.5.9.2.3.3.5.5.8.2.2.4.4.6.5.1.1.1.1.1.1.2.1.4.3.7.4.2.1.4.2.7.3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3.1.5.2.8.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3.1.6.1.9.1 0 0 0 0 0 0 .6.1 1.2 0 1.8 0 .6-.1 1.3-.1 1.9-.2.7-.1 1.3-.2 2-.3-.5-.7-.8-1.3-1.2-2 0 0-.1-.1-.1-.1-.3-.6-.6-1.1-.8-1.6-.1-.2-.2-.5-.3-.7-.2-.3-.4-.7-.5-1.1-.1-.2-.2-.4-.2-.5-.2-.4-.3-.8-.5-1.2 0-.1-.1-.3-.1-.5-.2-.4-.3-.8-.4-1.2-.1-.1-.1-.2-.1-.3-.4-1.6-.7-3.2-.9-4.7 2.6 1 5.5 1.7 8.4 2.2 4.7.9 9.5 1.5 13.3 3.6 3.2 1.7 5.3 5 6.3 8.4.4 1.1.7 2.3.9 3.5.1.5.1.9.2 1.4l.1.3-1.1 1.7c-2.9 5.7-3.5 13.6-2.9 19.8.1 1.4.4 2.8.6 4.2.4 1.8.9 3.5 1.5 5.1.8 2.2 1.8 4.4 2.9 6.5 1.5 2.6 3.2 5.3 5.1 7.7 1.6 2 3.3 3.8 5.1 5.5 1.2 1.1 2.5 2.1 4 2.9 1 .5 2.4 1 3.5.6l.2 0c.1-.3.2-.6.2-1 .1-.3.2-.6.2-.9.1-.2.1-.3.2-.5 0 0-.3-.2-.4-.3-.2-.2-.4-.5-.6-.8-1.1-1.4-1.8-2.9-2.4-4.5-1.4-3.4-2.3-7-2.5-10.7-.1-2.5.2-5.9 2.1-7.5l.6-.4 2.2 2c2.9 2.3 6.3 4.2 10.4 4.3.5 0 1 0 1.5 0 .6-.1 1.1-.2 1.6-.3.2 0 .5-.1.7-.2 2.8-.6 5.7-1.9 8.4-4.1l1.4-3.1c.3-.5.6-1 .9-1.5-.2.3-.4.6-.6.9l.5-1.1c.2 0 .4 0 .6-.1-.2 0-.4.1-.6.1l0-.1c-.3.1-.6.1-.9.2-1.3 0-2.6.1-3.9-.1-11.9-1.3-19-11.9-22-22-.3-1.1-.6-2.2-.8-3.3l-.6-3 .3-1.2c.3-1.2.6-2.4.7-3.6.5-3.4.6-6.7.2-9.8-.7-6.6-3.1-12.8-6.7-18.5-.2-5.8 3.5-15.6 13.2-11.1 0-4.5-4.7-6.8-8.7-6.2 1.1-6-2.8-10.6-9.4-7.3.4-3.7-8.5-7.6-11.8-3.2-2.2-4.3-7.6-8.3-12.2-8.3z"/>
</a>
</g>
</svg>
! Image Status Classes ! Image Status Classes
<<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time. <<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time.