AnkiWeb addon 1467205853
Creates image carousels from grouped images defined in field text, letting users navigate with buttons, input boxes, or bracket keys and add optional descriptions.
Open on AnkiWeb GitHub Find alternatives
abandoned
| Min Anki | Max Anki | Updated |
|---|---|---|
| 2.1.0 | 2.1.16+ | 2020-11-03 |
Loading…
Moves all field contents up or down using hotkeys, with configurable step size, fixed relative positions, and optional field splitting.
Generates customizable kanji grids from Anki decks, with grouping, sorting, historical views, configurable colors/fonts/search actions, and image, PDF, JSON, or TXT export.
Adds customizable Markdown sticky notes to card review screens with live preview, images/GIFs, presets, templates, image/JSON export, and automatic grid layout.
Replaces cluttered hierarchical tags in the editor with a customizable, clickable list using bolded nicknames, middle truncation, wildcard rules, custom ordering, hover highlighting, and JSON import/export.
Creates screenshot-based occlusion cards that reveal hidden sections one step at a time, supporting grouped or sequential reveals for ordered, long-form answers and diagrams.
Generates AI text, text-to-speech audio, and images for individual Anki fields or entire decks in bulk, using configurable prompts and multiple model providers.
This addon allows you to step through images that belong together. For example, if you want images A,B and C to be in a carousel, place the following somewhere in the field value text editor:
!steps
{imgA}
{imgB}
{imgC}
!steps
When Anki renders a card, it passes the generated HTML to this addon. This addon will then look for the above pattern and replace it with HTML/Javascript to make a carousel possible. You may step through the images in the carousel a few different ways.
If there is more than one carousel in the rendered card:
[ in the input box displayed for that carousel to go to the previous image in the carousel.] in the input box displayed for that carousel to go to the next image in the carousel.Otherwise, if there is only one carousel in the rendered card, in addition to the above you may:
[,] anywhere to go to the previous/next image in the carousel, respectively.You may add an optional description for any number of the images in the field value text editor like so:
!steps
{imgA}
!stepd this is a description for imgB !stepd
{imgB}
!stepd this is a description for imgC !stepd
{imgC}
!steps
Note the description must be placed above the image you want it for and below the previous image.
You may override the default styling for different components of the carousel to your liking. The css classes you can override are:
stepImagesWrapper
stepImagesCtrlRow
stepImagesCounter
stepImagesPrevBtn
stepImagesNextBtn
stepImagesInput
stepImagesImg
stepImagesDescription
The following is the html structure used for the carousel. This may help if you do want to customize the style.
<div class="stepImagesWrapper">
<div class="stepImagesCtrlRow">
<span class="stepImagesCounter"></span>
<button class="stepImagesPrevBtn">prev</button>
<button class="stepImagesNextBtn">next</button>
<input class="stepImagesInput"/>
</div>
<img class="stepImagesImg">
<p class="stepImagesDescription"></p>
</div>
Given the following (partial) entered into a field value text area:
the following carousel will be generated:
Make changes and then run python build.py test. This will work for Anki 2.1 on OSX. If you have a different OS you will need to modify ./build.py accordingly.
To generate knot-demo.gif, I used quicktime screen recording to create a .mov file and then converted it to gif via
ffmpeg -i knot-demo.mov -s 400x526 -r 10 knot-demo.gif
python build.py dist
the .addon file you need to upload will be placed in dist/. for the description you enter @ https://ankiweb.net/shared/upload paste this README and edit accordingly.