Use images multiple times / palette with standard images

[tighthunter]

Hello,

is there an option or a plugin to maange images that i need often ?
For example i would love to have a palette with all country flags and want to select the needed map with one click.
The copy pasting from other cards is very tedious and i dont want to have 1000 replicates of the same item.

kind regards

[tighthunter]

Hey,

i thought about using https://ankiweb.net/shared/info/2040501954 this add-on and manage a list with images and insert them via img src.
But unfortunately the html here is not getting translated.

e.g.
With the Key ::bold:: and value bold it just pastes the raw code.
Im using the newest version 2.1.65, is this the problem?

[jcznk]

Do you have any specific use case in mind? E.g. regarding the flags maybe you could try some tag-based workaround.

[tighthunter]

Hi @jcznk

I am learning various historic people with this program and would like to tag them with their national flag in the hope of being able to remember this assignment more easily.
Can this work with tags?

[jcznk]

It may or may not be possible, depending on the complexity of your desired outcome.

For example, the following is my personal approach.
It allows me to automatically show the appropriate flag(s) depending on the tags the Note has. The flags are always displayed in the same fixed position, such as the top of the card.

Let’s say I add a note with the tags Languages::Mandarin and Languages::English . This could be the result:

The method is based on customizing the Card template for each Note type you want to use it with. After the initial setup, the process only involves copying and pasting a few lines of code.

Here’s my personal version of the code:

Front/Back template:

<div class="{{Tags}}"> (at the very top of the template)
</div> (at the very bottom of the template)

Front/Back template (wherever you prefer):

<span class="language_flags">
 <img src="_ChinaFlag.png" id="ChinaFlag"> 
 <img src="_SpanishFlag.png" id="SpanishFlag">
 <img src="_GermanFlag.png" id="GermanFlag">
 <img src="_UkFlag.png" id="UkFlag">
 <img src="_RussiaFlag.png" id="RussianFlag">
 <img src="_JapanFlag.png" id="JapanFlag">
</span>

Styling section:

[id*="Flag"] {
 height: 20px; 
 width: 35px;
 border-radius: 0px; 
 margin-top: 0.5em;
 display: none; 
}
[class*="Languages\:\:Mandarin"] #ChinaFlag {display: unset;}
[class*="Languages\:\:English"] #UkFlag {display: unset;}
[class*="Languages\:\:German"] #GermanFlag {display: unset;}
[class*="Languages\:\:Spanish"] #SpanishFlag {display: unset;}
[class*="Languages\:\:Russian"] #RussianFlag {display: unset;}
[class*="Languages\:\:Japanese"] #JapanFlag {display: unset;}

The logic behind the code is quite simple:

• The Front/Back template section of the code contains the actual flags that need to be manually added to your Anki. The placement of the code will determine where the flags appear.
• The selector [id*="Flag"] targets all elements with an ID containing the word “Flag” (e.g., ChinaFlag, SpanishFlag, etc.). It is used to apply styling and, most importantly, hide the flags using display: none .
• The selector [class*="Languages\:\:Mandarin"] checks if the note contains the tag Languages::Mandarin , using \ to escape the : characters. This part of the code shows/unhides the flags when the note contains the respective tag.
  Note that [class*="Languages\:\:Mandarin"] also works with other tag variations like @::Languages::Mandarin or Languages::Mandarin::Grammar due to the partial match nature of *=

Of course, you would need to set your personal flags, ids, and tags.

As mentioned above, you need to manually add the flag images to your Anki.
[Then, to copy-paste the code (e.g. <img src="_ChinaFlag.png">) to the Front or Back template and add an id (e.g. <img src="_ChinaFlag.png" id="ChinaFlag"> )]

To add the flags to the media folder, I usually simply paste the image into Anki, then use this add-on to Rename the file: OpenInExternalEditor,Rename,Duplicate for Image,Audio,Video - AnkiWeb
It is important to add an underscore symbol at the beginning of the name (e.g. _ChinaFlag.png, _SpanishFlag.png), to ensure Anki won’t delete the file when Checking Media.