[BUG] data-tags not added to image tiddlers

[ittayd]

Describe the bug

I have an SVG tiddler with a tag 'foo'. The rendered content is not added the data-tag attribute (which I need for styling)

Expected behavior

No response

To Reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

No response

TiddlyWiki Configuration

• Version [e.g. v5.2.2]

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Chrome
• Version: latest

Additional context

No response

[pmario]

Can you provide the tiddler?

I did test with: https://tiddlywiki.com/#Motovun%20Jack.svg and the data-tag attribute is assigned there.

[ittayd]

Perhaps I'm confused, but inspecting the image you linked doesn't seem to have a data-tag attribute

[pmario]

It's way further up the DOM tree.

I'm not sure what you want to "style". ... BUT you can't style any SVG elements like eg: fill, if the SVG is shown as a IMG data element.

If you want to style the IMG html element with width and height and so on, it's OK.

[pmario]

If that info is not enough, it probably would be more efficient if you could explain, what you want to achieve in plain text.

[ittayd]

This is for the tiddler itself, I need to style when used through [img[...]].

[pmario]

Have a closer look at: https://tiddlywiki.com/#Images%20in%20WikiText ... You can add classes to the image-link as described there

[ittayd]

Yes, of course, which is what I'm currently doing, but it means that everywhere I include the image I need to include the class attribute in order for styling to work.

[pmario]

Yes, of course, which is what I'm currently doing, but it means that everywhere I include the image I need to include the class attribute in order for styling to work.

That's right. ... The image-link basically is a link-wikitext definition [[link]] with some special behaviour, to create an html IMAGE tag.

I could think of a global macro, that you can call instead of the core image-link. eg: <<img "url or titddler-title">>. Then the macro code can do the styling. There is an additional advantage here. There is only 1 place to change the styling.

Something similar to this. .. The macro definition would be in a tiddler tagged: $:/tags/Macro so it can be used in every tiddler. The "alt" text is important for screen readers ..

\define img(src, alt:"an image") 
<$image source=<<__src__>> class="test" alt=<<__alt_>>/>
\end

<<img "Motovun Jack.svg" "TiddlyWiki's mascot">>

For additional info have a look at: https://tiddlywiki.com/#ImageWidget

[ittayd]

I wrote this macro. But would have been nicer to not need to write it.

[pmario]

I wrote this macro. But would have been nicer to not need to write it.

How should TW know, to add a class foo to the image, where foo is derived from a tag, without telling it how to do so?

For me as a different user foo may be a value in a field named: something ... Can I expect, that TW knows about this relation? .. Not really ... right?

I did modify the code to get the class info from the SVG tiddler something field.

This would also work using tags.

But tags with spaces would look like this in the class attribute [[tag with spaces]] .. I'm pretty sure that doesn't work with CSS styles. .. So I'd go with an extra field, that makes it much simpler to handle.

\define img(src, alt:"an image") 
<$image source=<<__src__>> class={{{ [<__src__>get[something]] }}} alt=<<__alt_>>/>
\end

<<img "Motovun Jack.svg">>

---

If the <$image widget would allow additional attributes, it would be possible to create something like this:

<$image src="xx" data-tags={{{ [<__src__>get[tags]] }}} /> ... with an HTML output like this <img data-tags="[[tag with spaces]]/> ... similar to the data-tags for tiddlers. ... BUT ...

This would be a new feature added to the image-widget, which would need to be discussed, if it would make sense ...

[ittayd]

IMHO, TW should just add data-tags attribute to the transcluding HTML tag in the same way it does so on the tiddler itself.

The idea is that I can then include this tiddler in standard ways rather than a macro.

It's just a usability issue: in the same way that data-tags are added to help styling on the tiddler, add them when it is transcluded. There are ways to do it myself as you have shown. Just not standard.

[CodaCodr]

@ittayd That sounds like a legacy-code breaking change, to me. If a data-with-tags=yes (default, no) was supplied, then yes, could be useful.

[Jermolene]

IMHO, TW should just add data-tags attribute to the transcluding HTML tag in the same way it does so on the tiddler itself.

The transclude widget does not generate any HTML elements, and so there wouldn't be anywhere to assign the data-tags attribute. (If the transclude widget did generate HTML elements then it would make it impossible to have transclusions in between <ol> and <li> tags).

But I think that we could address the OP for some situations by making the <$image> widget (and thus the [img[foo]] shortcut syntax) apply the data-tag attribute to the image tag. There is an annoying inconsistency in that it wouldn't work for image tiddlers that were transcluded with the <$transclude> widget or {{foo}} shortcut syntax (without a prohibitive amount of refactoring).

[ittayd]

Yes, $image/img would be great!