Option to resize image occlusion card image

Anki Suggestions
1

I recently started using the native image occlusion cards, a feature that was added in 23.10. Thanks for adding this. I have a suggestion.

When I make a card, the image takes up the whole screen on my Windows desktop. So if I have added some “back extra” material, I have to scroll down the page to see it while I’m reviewing. It would be nice to have the option to resize the card to be smaller so I don’t have to scroll down. Perhaps a good implementation would be to have the option to select the whole card ((1) something quickly done like shift+click or alt+click or double click and (2) a button on the side), then click and drag from any of the now-selectable corners to increase or decrease the size of the card.

1 Like
2

I think that is a reasonable idea.

Also, maybe you could try this workaround. I did not test it extensively, but it seems to work fine on my Anki Desktop 23.12.1.

  1. Create two new fields: IO_MaxHeight, IO_MinHeight.
  2. Add this code to the Front and Back templates:
<style>
#image-occlusion-container {
  max-height: {{text:IO_MaxHeight}}px;  
  min-height: {{text:IO_MinHeight}}px;
}
</style>

Basically, this workaround allows you to set a maximum/minimum height for your image occlusion cards, on a note to note basis, depending on the content of the IO_MaxHeight and IO_MinHeight fields.

For example, you can write 200 in the IO_MaxHeight field to set a maximum height of 200 px. Or you can write 800 in the IO_MinHeight to increase the minimum height to 800 px.
Since this does not affect the actual size of the images, there is no loss of quality and you can change the resizing as many times as you want.

If this does not work for you and/or you have any questions, please ask.

1 Like
3

I tried but I couldn’t get it to work. I know next to nothing about coding so I’m sure I messed something up. That’s OK though, I appreciate the suggestion. :slightly_smiling_face:

Hopefully the devs will take my suggestion into consideration.

4

@devs

Would like to hear your thoughts on this idea, please. Is it a possibility?

5

You can adjust your card template to control how big the image gets:

6

Thank you for responding. I tried the code you posted in that thread and it didn’t work: see the screenshot below. I don’t know anything about coding so I can’t figure this out on my own. Can you please type out what I should put instead so I can just copy-paste it?

image
image1717×978 155 KB

7

It needs to be pasted into the bottom of the styling section, not the front/back template. Please also bear in mind that it will only affect AnkiMobile, so the preview inside the computer version will not change.

8

On mobile, I don’t have this issue because the screen is small already. Anything I put in Back Extra fully appears when I answer the card. Please see the screenshots below of what the desktop version looks like vs what the mobile version looks like for the same card being answered.

Desktop:

image
image1920×1033 70.6 KB

Mobile:

image
image602×1220 83.9 KB

So my problem is with the desktop version specifically. Basically, I want to make it appear similar to how it does on mobile, with the Back Extra content being immediately visible without having to scroll down. Can that code be modified to work with the desktop version? I tried changing “.mobile” to “.desktop” but it didn’t do anything:

image
image2559×1376 385 KB

Thanks.

9

If what you want is to be able to see all of the Header and Back Extra without scrolling, even if the IO image appears a bit smaller, you can try the following:

  • Replace the contents of <script></script> in both the Front and Back templates with the following code:
function onDidDrawShapes() {
    if (window.innerWidth > document.documentElement.clientWidth) {
        const container = document.querySelector("#image-occlusion-container");
        const diff = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        container.style.maxHeight = `${container.clientHeight - diff}px`;
    }
}

try {
    anki.imageOcclusion.setup({ onDidDrawShapes });
} catch (exc) {
    document.getElementById("err").innerHTML =
        `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}

Note

  • The above code will not work as intended in the Qt5 versions. If we wanted to achieve the same behavior in the Qt5 versions, we would probably need to write a bit more complex code.
  • If you want to revert to the default template after trying the above code, you can use the Restore to Default command in the Options button in the upper right corner of the template editing window.
4 Likes
10

That works! I appreciate it, thank you.