[2.1.55] Image size problem in Editor

In the latest version (2.1.55), the images are shown too small in the editor (by default).
Upon turning off the “Shrink images” option, the images become too large.

I want the size that was there in 2.1.54. Any suggestions?

1 Like

My memory may be incorrect here, but I don’t think we intentionally changed the size images appear when shrunk. Can you post screenshots of .54 and .55 showing the difference?

I think you misunderstood my problem. My problem is with how images appear when enlarged. Now, the enlarged image is too large as compared to that in 2.1.54.

Also, now that I have installed 2.1.55, how do I install 2.1.54 for sending the screenshots?

If you still have the installer in your Downloads folder, open that and Anki 2.1.54 will be installed over your current 2.1.55 install. This is safe and you won’t lose any data.

Otherwise download 2.1.54 from the official download site again. It is labelled as the “previous stable release”.

Here are the screenshots:

Anki 2.1.54


Anki 2.1.55

Note that this is not the only card that is affected. Many cards are affected, with some using SVG images and some using JPGs.

To me, it seems that .54 limits the width of the image to the width of the editor (with some other rules to limit the height) but .55 does not do that.

The add-on I am using to view editor side-by-side with the browser should not be responsible for the issue because it is disabled on .55 anyway.

2 Likes

Thank you for the screenshots, that helped. When a new beta becomes available, please let me know if it doesn’t address the issue for you.

Thanks for the quick intervention.

As I am not very comfortable with installing betas, I will wait for the next stable release. I hope it happens soon.

Maybe you could use this add-on in the meanwhile: CSS Injector - Change default editor styles - AnkiWeb

Adding this code to field.css should limit the width of the images to that of the editor

img {
--editor-default-max-width: 100%;
}
2 Likes

Thanks for the suggestion. It worked.

Be aware that this approach is not without any side effects. I noticed that when I copy images from the editor and paste them this code is added to their HTML:

style="--editor-default-max-width: 100%;"

This HTML should do nothing except pollute the code a little bit and marginally increase storage usage. You can remove it from all the notes using Find and Replace.

Thanks for this information too.

That might cause the image resizing toggle in the editor to stop working. Maybe it could be avoided by applying it to the html element instead of img?

I don’t think there is such risk, unless you also override --editor-default-max-height?
The width will not be capped to 250px anymore, but the images will still be shrunk. Or am I missing something else?
I tried using html and :root and neither seemed to work.

OT: maybe it could be reasonable to add some class to the root element, to indicate whether the editor is shrunk or not? Kind of like the night-mode class.
It would certainly be very helpful when injecting custom CSS and it would probably also have some other uses. In general, as far as I understand, it seems like a fairly simple change which would make the code more orderly and thus easier to interact with.

I think we apply it to individual images because we allow users to contract/expand each image independently.

The issue has been fixed in the latest release (2.1.56).

My thanks to Damien for developing such a great app and for resolving issues so fast.

It’s not just me that deserves thanks, but thank you for the kind words in any case :slight_smile:

I also had the same image resizing problem as @vaibhav on 2.1.55 (Intel, Qt5) on macOS. This prompted me to downgrade back to 2.1.54 (Intel, Qt5) on macOS. I tried the 2.1.56 on macOS.

■ For 2.1.56 beta and stable release (Intel, Qt5): Automatically shrunken images failed to resize to window width when image shrinking disabled. In other words, they would remain the same size (shrunken) irrespective of whether image shrinking is enable or disabled.
■ For 2.1.56 beta and stable release (Intel, Qt6): Automatically shrunken images failed to be constrained to window width when image shrinking disabled. In other words, they would be oversized.

Any ideas?

A fix for this is coming in the next update, thanks to @hkr.

4 Likes

Awesome sauce, thanks @dae and @hkr

1 Like

Tried 2.1.57 beta for macOS (Intel, Qt5) and I am no longer experiencing image resizing issues. Thank you!

However, my Note Type uses lots of fields and they take a noticeable while to load in the browser and editor, relative to 2.1.54 for macOS (Intel, Qt5). Wanted to relay this experience.