Anki Forums

Asset Manager [Official support]

This is the official support thread for the add-on Asset Manager. If you have any questions, or suggestions, you can leave them here.

If you’re familiar with GitHub, you can also leave an issue in the official repository instead.

2 Likes

Hi,
Very interesting discussion re the css/html question below. And I am super happy to discover the Asset Manager plugin.

Just wondering if you can give me a suggestion/clarification to get me kickstarted with this. I have already entered a bunch of snippets. But I do want to determine the best strategy to stitch them all together. Just to simplifiy a bit… Say I have 4 snippets, (A, B, C D) and 4 cards. I want to (at least initially) acheive:

        card1 card2 card3 card4
Front:    A     B     C     D
Back:     B     A     A     A
          C           B     B
          D           D     C

I also have optional notes, examples and hints! But thats included in the snippets already.
Am I right in thinking that I could do this two ways? 1) Have a FrontSide and Backside main card including redundant snippets with (and my brain already hurts) conditions in the snippets to display (D for example) only on Card4 Front and Card1,Card3 Back. Or 2) Maintain Front-1, Front-2, Front-3, Front-4 etc. with corresponding Back. And then include the snippets in each one.

What would be the way to proceed?

@hengiesel and @kleinerpirat

ttps://forums.ankiweb.net/t/editing-anki-css-html/7480](Editing Anki CSS/html)

ok… It looks like I should probably be doing stuff like this with the fragments:

["|",
["&", ["card", "=", "Card 1"], ["side", "=", "back"]], 
["&", ["card", "=", "Card 2"], ["side", "=", "back"]], 
["&", ["card", "=", "Card 3"], ["side", "=", "back"]], 
["&", ["card", "=", "Card 4"], ["side", "=", "front"]
]
]
1 Like

Since you have very dynamic templates, I’d suggest creating eight “entry fragments”, like FrontSide1FrontSide4, which all have the label Front, restricted to their card type (["card", "=", "Card X"]), plus BackSide1BackSide4, which all have label Back, restricted to their card type.

Additionally, you create one fragment for each component ComponentAComponentD, which also have label names ComponentAComponentD.

Now from within the entry fragments, you can include those components like {{%ComponentA}}

@dae Could you merge this thread with Asset Manager [Official support]? Thanks :slight_smile:

2 Likes

Somewhat unrelated to your specific case, but maybe helpful nonetheless:

Asset Manager allows for some very creative use of HTML-fragments.

Examples:

Check for backside within JS (to avoid duplicate scripts)

For example, if you have some JavaScript that is shared between front- and backside (e.g. an initiation script for your functions), but maybe the backside has additional functionality, to avoid writing two almost identical JS-snippets, you can create a check like this:

HTML-fragment named “Front”, condition [“card”, “=”, “front”]

false

HTML-fragment named “Back”, condition [“card”, “=”, “back”]

true

and then wrap backside functions with

if({{%Front}}{{%Back}}) {
       // backside-code
}

This could also be done with a variable and changing it with a backside-only snippet, but I think you get the gist :wink:

Dynamically change field names in your scripts

You can also use HTML-fragments for your field names. Mine are pretty complicated and changed frequently during development, so having one single place to change them is really helpful.

My question-field is currently called
:thought_balloon: Frage | Titel”,
but internally (in Asset Manager scripts) I use
{{{{%Question}}}}

I just put :thought_balloon: Frage | Titel as content inside an HTML-fragment called Question.

I also use HTML-fragments to keep my JS-scripts clean (e.g. to include a huge dictionary that would make it cumbersome to scroll through).

1 Like

@hengiesel and @kleinerpirat. Thanks very much for these suggestions. I have a few note types to work on, but the most complexe one is already done, It feels much more solid with Asset Manager, which has just become an essential piece of my Anki workflow. Much appreciated!

2 Likes

You’re very welcome!
Always glad when Henrik’s Addons get more attention, since they’re very underused still.

Trough the usage of Closet I actually managed to reduce all my Anki notes into one note type (which is why I have to smile every time I see someone mentioning multiple note types).

If you got some spare time, you should definitely check it out.

1 Like

Hi,

ok… After a while I have discovered a couple of issues… I came back to my deck a couple of days later and making a change found that I could no longer save the templates. I would get:

Error
Debug info:
Anki 2.1.38 (355e4cd5) Python 3.8.1 Qt 5.15.1 PyQt 5.15.1
Platform: Linux
Flags: frz=True ao=True sv=2
Add-ons, last update check: 2021-02-20 18:40:06
Add-ons possibly involved: ⁨Asset Manager⁩

Caught exception:
Traceback (most recent call last):
  File "/var/home/bkelly/.local/share/Anki2/addons21/656021484/gui_config/config.py", line 58, in writeBackCurrentSetting
    self.write_back_callback(*self.export_data())
  File "/var/home/bkelly/.local/share/Anki2/addons21/656021484/src/models.py", line 22, in write_back
    setup_model(model_id, html_data, script_data)
  File "/var/home/bkelly/.local/share/Anki2/addons21/656021484/src/model_editor/__init__.py", line 9, in setup_model
    setup_full(model_id, html, scripts)
  File "/var/home/bkelly/.local/share/Anki2/addons21/656021484/src/model_editor/setup_html.py", line 200, in setup_full
    if unminified := evaluate_fragment(
  File "/var/home/bkelly/.local/share/Anki2/addons21/656021484/src/model_editor/setup_html.py", line 143, in evaluate_fragment
    text = base.code
AttributeError: 'NoneType' object has no attribute 'code'

I had to start from scratch twice only to finally get back to the same result. But I have found the following: It seems that if you don’t have one fragment labled ‘front’ and ‘back’ you will get this error.
Since I have 4 front cards I ended up having:

Fragment Name > Label
_________
FrontSide > Front      <<<<<   was Front-1> Front-1
Front-2 > Front-2
Front-3 > Front-3
Front-french > Front-4
BackSide > Back       <<<<<< was Back-1> Back-1
etc...

That seemed to work, I could save the templates again. But then I need to add back some conditions. I have the following conditions (that validate correctly) for Front and Front-2:

Front:  ["&", ["card", "=", "Card 1"], ["side", "=", "front"]]
Front-2: ["&", ["card", "=", "Card 2"], ["side", "=", "front"]]

But strangely the conditions for Front (Card 1) will cause the same error above when writing to templates, but the corresponding conditions for Front-2 will not cause the error.

Hopefully we will get to the bottom of this. Let me know if there is any other info I can provide.
Awesome plugin!

The Labels Front and Back will serve as the Entry point for constructing the Template. However you can also have multiple fragments with the same label. So you could have

Fragment Name > Label :: Conditions
_________
Front-1 > Front :: ["&", ["card", "=", "Card 1"]]
Front-2 > Front :: ["&", ["card", "=", "Card 2"]]
Front-3 > Front :: ["&", ["card", "=", "Card 3"]]
Front-french > Front :: etc...
BackSide > Back

Awesome. Thank you. Its all good now!

1 Like

Hello,
I am usinig Multiple Choice questions using [mc0::]]
[[mc0::::]]. It work great on Windows
but on Ankidroid it doesn’t work like on youtube video. Card on ankidroid look something like this

Question…

[[mc0::right answer]]
[[mc0::::wrong]]
[[mc0::::wrong]]
[[mc0::::wrong]]

How I can make this addon work so I can make multiple questions on Android?

@pemo4422
I’m sorry Closet doesn’t work yet on AnkiDroid. I’ve already patched AnkiDroid, but there was no release since, so we have to wait patiently :sweat_smile:

1 Like

If you’re in a hurry, you could of course download the latest alpha release of AnkiDroid.

1 Like

I had downloaded the alpha version and it’s still not working, same problem and I forgot to mention before that there info about error something “couldn’t load closet.js”

Any solutions :sweat_smile: ?

Could someone point me to information about making CSS injection work? I would love to let Asset Manager manage my template CSS, but I cannot get it to work. I’ve selected CSS as the “Javascript” type and entered the CSS as I would in any .css document and selected “Into Template”. Asset Manager injects the CSS into the document in a <script></script> block but of course it’s not a script, it’s a style. Shouldn’t the template injection be done as a <style> block? In fact, if I manually change the card template in this way (<script><style>) the CSS is applied correctly.

What am I missing here?

Is there a reason why you want to include that styling with Asset Manager?

The CSS in the “Styling” section of the card editor will apply to all card templates anyway.


No. Here’s why:

Asset Manager supports HTML snippets (which can be any text string) and JS snippets, which always get wrapped with a <script> tag.

If for some reason you still really want to use Asset Manager for your CSS, put it inside of an HTML snippet and wrap it with <style>.

Is there a reason why you want to include that styling with Asset Manager?
Asset Manager supports HTML snippets (which can be any text string) and JS snippets

@kleinerpirat

Only because I assumed it was possible, given that the JS asset editor offers “CSS” as a type. See below.

Otherwise, I’m happy to continue to manage it via the Styling section of the template editor. But the documentation is silent on why “CSS” is given as a choice.

1 Like

Good point! Forgot about that :sweat_smile:

I have a fix for Asset Manager that allows bare CSS to be inserted in a <style> block when the CSS option is selected. After I test it for a bit, I’ll send a pull request.

1 Like

@OjisanSeiuchi
That would be great!
The reason why I that option exists in the first place, that at one point I wanted to add support for SCSS, however I then realized that that wouldn’t work, because SCSS cannot be compiled from a Web environment, only Node.