Different replay-button formats in the same card

Anki Card Design
1

I use different sources to obtain audios that I later use in my cards.

I would like to be able to identify said source when playing.

I store each audio in a specific field according to source, and, through conditional replacement, I show only the reported field.

I would like to be able to use a specific icon (e.g. with the logo of the source website) for each field so that when I study I can know which audio source I am listening to.

I have seen that the image associated with the replay-button can be modified in general in the application, but I don’t know if I can have different formats in the same card.

Thanks

1 Like
2

I store each audio in a specific field according to source, and, through conditional replacement, I show only the reported field.

This is good as you’re already half-way there. Having separate fields for each audio source will let you add specific html in your template for each source.

Do this:

Wrap each audio field in the template with additional <div> or <span> with a css class identifying the audio source:

{{#Audio-source-1}}
<div class="audio-source-1">
  {{Audio-source-1}}
</div>
{{/Audio-source-1}}

Then, in the card Styling, you can add css for each specific audio source type by targeting the audio button within the specific class you added. For example, adding some text to would be simplest:

.replay-button::before{
    position: relative;
    top: 24px;
    left: 35px;
    font-size: 10px;
    font-weight: bold;
    background: white;
    color: red;
    height: fit-content;
}
.audio-source-1 .replay-button::before {
  content: "Forvo"
}

What this looks like:

image
image124Ă—119 2.26 KB

Using an icon you copy from each website should be possible by using content: url(...); or maybe content: ""; background-image: url(...); instead… I couldn’t get an example working right now so I used text. Usage of url()

You can hide the default replay button svg entirely with

.replay-button svg {
  display: none;
}

Alternatively, instead of css, you could use javascript to replace the svg in replay-button:

var replayButton = document.querySelector(".audio-source-1 .replay-button");
// Replace with some other svg that you copy from somewhere...
replayButton.innerHTML = `<svg class="playImage" viewBox="0 0 64 64" version="1.1">
        <!--- svg paths here -->
    </svg>`
3 Likes
3

You can mark the audios by enclosing them in HTML elements with different classes:

<span class="apple">{{Audio1}}</span>
<span class="orange">{{Audio2}}</span>

then use these classes to apply different styling for audio buttons inside them. If the images you want to use are simple monochromatic shapes, this can be done purely with CSS. For example, applying the following styling

.apple svg circle {
    fill: none;
    stroke: none;
}
.apple svg path {
    d: path("M45.595,28.383c0-4.093,1.409-7.817,3.714-10.59-2.408-2.27-5.601-3.688-9.141-3.746-2.943-.045-5.681.829-7.946,2.354-1.534,1.03-3.554,1.03-5.088,0-2.265-1.525-5.003-2.399-7.946-2.354-7.563.12-13.564,6.461-13.636,14.024-.111,12.682,5.23,20.454,8.017,24.155,2.756,3.665,4.909,4.789,8.517,4.789,2.051,0,3.96-.62,5.543-1.686,1.235-.825,2.863-.825,4.093,0,1.587,1.066,3.491,1.686,5.547,1.686,3.607,0,5.757-1.124,8.517-4.789,1.641-2.176,4.165-5.766,5.939-10.934-3.697-2.796-6.131-7.531-6.131-12.909ZM38.424,9.435c2.616-2.761,3.999-6.178,4.109-9.435-3.246.285-6.584,1.849-9.2,4.61-2.616,2.761-3.999,6.178-4.109,9.435,3.246-.285,6.584-1.849,9.2-4.61Z");
    fill: red;
}

.orange svg circle {
    fill: orange;
    stroke: none;
}
.orange svg path {
    d: path("M32.157,6.834c-13.558,0-24.587,11.242-24.587,25.061s11.03,25.061,24.587,25.061,24.587-11.242,24.587-25.061S45.714,6.834,32.157,6.834ZM10.102,28.88c.507-3.91,2.007-7.642,4.347-10.79.314-.418.791-.679,1.308-.718h.121c.478,0,.936.192,1.274.541l9.645,9.88c.531.541.671,1.288.386,1.992-.29.703-.907,1.126-1.655,1.126h-13.64c-.521,0-1.018-.231-1.361-.629-.338-.393-.492-.89-.425-1.402ZM15.757,46.412c-.516-.034-.994-.295-1.308-.713-2.34-3.147-3.841-6.88-4.347-10.79-.068-.511.087-1.013.425-1.407.343-.398.835-.625,1.356-.625h13.645c.748,0,1.365.418,1.655,1.126.285.703.145,1.451-.386,1.992l-9.645,9.88c-.367.379-.878.575-1.394.536ZM31.192,52.677c0,.531-.227,1.038-.618,1.387-.386.344-.873.497-1.375.428-3.812-.516-7.45-2.061-10.523-4.46-.41-.325-.661-.797-.695-1.328-.034-.526.154-1.043.521-1.416l9.625-9.87c.352-.359.791-.546,1.25-.546.236,0,.473.049.709.148.695.29,1.105.925,1.105,1.687v13.971ZM31.192,25.078c0,.767-.41,1.402-1.105,1.692-.695.29-1.428.143-1.959-.403l-9.625-9.865c-.367-.374-.555-.89-.521-1.416.034-.531.285-1.003.695-1.328,3.073-2.4,6.711-3.944,10.523-4.465.082-.01.159-.015.236-.015.415,0,.815.152,1.139.443.396.354.618.856.618,1.387v13.971ZM48.44,17.372c.043,0,.082,0,.121.005.521.034.994.295,1.308.713,2.34,3.147,3.841,6.88,4.342,10.79.068.511-.082,1.008-.42,1.402-.347.398-.84.629-1.361.629h-13.635c-.753,0-1.37-.423-1.66-1.126-.285-.703-.14-1.451.386-1.992l9.645-9.88c.338-.349.796-.541,1.274-.541ZM33.122,11.112c0-.531.227-1.038.622-1.392.323-.29.724-.443,1.139-.443.077,0,.154.005.232.015,3.816.521,7.459,2.065,10.528,4.465.415.325.661.797.7,1.328.034.526-.159,1.043-.521,1.416l-9.63,9.87c-.531.541-1.264.693-1.959.398-.695-.29-1.11-.925-1.11-1.687v-13.971ZM45.642,50.031c-3.069,2.4-6.711,3.944-10.528,4.46-.502.069-.989-.084-1.37-.428-.396-.349-.622-.856-.622-1.387v-13.971c0-.767.415-1.397,1.11-1.687.236-.098.473-.148.704-.148.463,0,.902.187,1.254.546l9.63,9.87c.362.374.555.89.521,1.416-.039.531-.285,1.003-.7,1.328ZM54.211,34.909c-.502,3.91-2.002,7.637-4.342,10.785-.314.423-.786.684-1.308.718-.516.039-1.028-.157-1.394-.536l-9.645-9.88c-.526-.541-.671-1.288-.386-1.992.289-.708.907-1.126,1.66-1.126h13.635c.521,0,1.013.231,1.361.629.338.393.487.89.42,1.402Z");
    fill: white;
}

will give you these buttons:

image
image210Ă—103 2.02 KB

For general-case vector images (and also for working with iOS, which does not support the CSS properties used above) the same can be done using CSS pseudo elements or simple JS

Not sure about external files from collections, but raw svg code can be used inside URL. I used to use this in one of my templates, so it certainly works:

.replay-button::after {
    content: url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>...SVG CODE...</svg>");
}
3 Likes
4

Is there a site / IDE / … where this can be visually created? Or did you take it from somewhere?

Also: Is this more computationally expensive compared to using images (maybe especially for more complex icons)?

2 Likes
5

Cool! I didn’t know you could define svg paths in css like this.

and also for working with iOS, which does not support the CSS properties used above …

Of course Safari doesn’t support a cool browser feature :roll_eyes:

2 Likes
6

I use Illustrator to make vector images, then save it to .svg and open it with a text editor to get the source code. If you are looking for free online alternatives, VectorPea or Figma should work for that purpose just as well.

I don’t think so. That CSS is basically SVG, which is a format of vector images, so I would assume it renders using the same pipeline.

2 Likes