I’m using a variety of cards to teach myself health-related concepts of the reproductive system. As a visual learner, I put images on the back of the card to aid in my learning. Sometimes, of course, these images can be sensitive and not something you want visible immediately when you flip the card (until you click on the image again). How do I blur images on the back of the card so that I can’t view them until I flip the card and click on the image?
If the field containing the image is {{xyz}} in your template, you could change that to {{hint:xyz}}
That won’t blur the image, but it will display a clickable “xyz” link instead. When you click it, the image will appear.
1 Like
I am not familiar with CSS or script. But I do not have anything in my template other than edits for font size or color.
Is there any other way to do this?
Whatever you do to change this, you’ll probably have to do it on the template.
It sounds like you might be looking at the “Styling” tab.
Check the “Back Template” again for text wrapped in {{DoubleCurlyBraces}}. Field Replacements - Anki Manual
I added the following code to the back template page:
for (const image of document.querySelectorAll(".blur")) { image.classList.add("tappable"); image.addEventListener("click", () => { image.classList.toggle("blur"); }); } But nothing happens.But which field contains the image? And where is that field referenced in the Back template?
To do what I described, you don’t need JavaScript.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.