Adding Image to Field Buttons

[JohnnyDoeson]

Hello,

I’m new to card design. I have a little background in programming and have been referencing the Anking cards for some ideas of making custom card types. My question is how do I add an image to a card button like Anking? I found the line of code where it says ref=“image_name.png” but where do I add my own images so that they appear on the button?

Thank you!

[NielegalneApfelschor]

What button are you talking about? can you please send a screenshot?

[JohnnyDoeson]

The highlighted line is the name of the image used on the buttons. The fields of the card have been coded to be buttons. I’m just wondering how I can insert my own custom image and where I put the image so that Anki knows to load it.

[NielegalneApfelschor]

To use an image in a card template you have to manually put in the anki media folder ( Managing Files - Anki Manual ) and remember to name it something starting with _, or else anki will consider it unused media since it’s not used in any notes.
After that, adding a simple <img src="_your_icon.png" alt="" /> to your template should work.
You might need to check media for the image to sync properly to ankiweb.

[JohnnyDoeson]

That worked. Is there a way to max it’s size?

[NielegalneApfelschor]

You can increase it size by adding a width and height attribute like this: <img src="[...]" alt="" width="200" /> or you can add an id parameter to the image ( id="something") and then use the styling tab of the template editor:

#something{
  width: 100%; /* or 200px */
}