Custom img attributes (not classes) & links

Help
1

I am a little confused by the .attrs function of anydirective. I tried using the function to add HTML5 lazy loading to my image by setting .attrs("loading", "lazy") but it just adds classes to the image.

Is there another way to add custom properties, or am I just using the function wrong? Has anyone experiences adding custom attributes and not classes?

Edit: I also recognized, that custom links for images are not possible atm. I have a lot of linked images, this could become a problem. I tried putting the link in the figure caption, but I cannot place a md link there, other markdown syntax works.

2

OK, I just checked the renderer. Should have done this before asking stupid questions :smiley:

Looks like attrs = classes and there are no custom attributes atm.

3

All valid questions, to be fair today, in Zine, SuperMD is the least polished part. It didn’t use to be the case, but as other parts of Zine improved, now it kinda is.

So SuperMD has a couple of ideas in it that have yet to be developed to a point where they either start to make sense or I realize it’s a flop and it should be abandoned.

So ‘attrs’ is not called ‘classes’ because one goal for SuperMD is to be a content markup format that can be used to target not just HTML. I would like to be able use Zine to publish a book for example, which means targeting PDF and maybe ePub.

For this reason I’m trying to find a balance between making common operations feasible, while not overfitting on HTML.

Ok, back to your point. I don’t think I have support for adding lazy loading attributes but if you’re interested in sending a PR, I would merge it. You would have to modify kristoff-it/supermd and also the renderer to make it happen. The change itself is trivial but you would have to figure out at the very least how to rely on your local checkout of supermd, so overall it will require a bit of effort. If you’re interested I can help you land it, othewrise just let me know I can do it myself.

Would your use case be solved by $image.linked(true)? If not, could you give me some more context?

1 Like
4

I will try to implement it and send you a PR :)!

Would your use case be solved by $image.linked(true)? If not, could you give me some more context?

Its more about linking the image to another page, not to itself. So the image rather needs an option to specify the linked(true) link.

Maybe $image.asset('zine.svg').link('https://zine-ssg.io/').linked(true) or setting the link implicitly sets linked to true.

5

I see, then let me give you a bit more context on current limitations of SuperMD. Because we’re relying on a markdown parser, it means that link syntax cannot be nested. This is wrong:

[foo [bar]($text) baz]($link)

But image syntax can be nested inside of a link:

[![](foo.jpg)]($link)

So if your images can be expressed using vanilla image syntax, then you can bypass the current limitation. Related docs: