Image Style Editor
0.01MB. Updated 2021-12-17.
The author has shared 9 other
item(s).
Description
Image Style Editor
This is an addon for resizing image width and height.
How to use
Right click on an image in editor(Add cards, or in card browser), click on 'Image Styles'.
Accepted formats are: `300`, `240px`, `20em`, `60%`, `auto`,`--somestring`, empty, etc. Plain numbers(eg. `300`) are automatically converted to `300px`. Values starting with `--` (eg. `--name`) are automatically converted to `var(--name)`. Trailing and leading spaces are removed.
You can set either only the width or the height, leave the other blank, and the image should retain its aspect ratio. If it doesn't, try going into addon config, and change `empty_means` to `auto`. If that still does not work, probably something in your note type styling is overwriting what this addon does, and will need to be modified.
*Note: Please be aware that there is a bug that removes backslashes from the field when you resize an image.
Differences from ImageResizer
* Uses css height and width properties to resize images, so there is no loss of quality.
* You can modify width and height for each image individually
* Can't automatically resize images on paste.
* Can set min-width, max-width, as well as use many other css features.
Image Occlusion Support
This addon supports Image Occlusion notes fully. You can choose to apply style changes to all occlusion cards of the same image, or to all image/mask fields of the card. The previous version (<=v2.1) had a critical bug regarding this feature, view github file to see how to apply the fix.
AnkiDroid Users
* Due to a bug in AnkiDroid, if the note type uses conditional replacement, the note may become blank. Setting `hidden-div-for-image-only-field` to `true` before using editing image style should fix the issue.
Github
https://github.com/BlueGreenMagick/image-style-editor
This is also where you can post issues if you encounter a bug.
Credits
Credits to searene, developer of the addon ImageResizer. Some of the code for gui were reused in this addon.
Also to glutanimate(Aristotelis P.) and others who made the addon Image Occlusion Enhanced, which was how I figured this addon would be possible to make.
Thanks to AnKing for several feature suggestions.
Updated last at 2020-10.17 v2.6. All past releases and changelogs can be viewed here
How to use
Right click on an image in editor(Add cards, or in card browser), click on 'Image Styles'.
Accepted formats are: `300`, `240px`, `20em`, `60%`, `auto`,`--somestring`, empty, etc. Plain numbers(eg. `300`) are automatically converted to `300px`. Values starting with `--` (eg. `--name`) are automatically converted to `var(--name)`. Trailing and leading spaces are removed.
You can set either only the width or the height, leave the other blank, and the image should retain its aspect ratio. If it doesn't, try going into addon config, and change `empty_means` to `auto`. If that still does not work, probably something in your note type styling is overwriting what this addon does, and will need to be modified.
*Note: Please be aware that there is a bug that removes backslashes from the field when you resize an image.
Differences from ImageResizer
* Uses css height and width properties to resize images, so there is no loss of quality.
* You can modify width and height for each image individually
* Can't automatically resize images on paste.
* Can set min-width, max-width, as well as use many other css features.
Image Occlusion Support
This addon supports Image Occlusion notes fully. You can choose to apply style changes to all occlusion cards of the same image, or to all image/mask fields of the card. The previous version (<=v2.1) had a critical bug regarding this feature, view github file to see how to apply the fix.
AnkiDroid Users
* Due to a bug in AnkiDroid, if the note type uses conditional replacement, the note may become blank. Setting `hidden-div-for-image-only-field` to `true` before using editing image style should fix the issue.
Github
https://github.com/BlueGreenMagick/image-style-editor
This is also where you can post issues if you encounter a bug.
Credits
Credits to searene, developer of the addon ImageResizer. Some of the code for gui were reused in this addon.
Also to glutanimate(Aristotelis P.) and others who made the addon Image Occlusion Enhanced, which was how I figured this addon would be possible to make.
Thanks to AnKing for several feature suggestions.
Updated last at 2020-10.17 v2.6. All past releases and changelogs can be viewed here
Download
As add-ons are programs downloaded from the internet, they are potentially malicious. You should only download add-ons you trust.
Supported Anki versions:
- 2.1.14-2.1.50+ (Updated 2021-12-17)
To download this add-on, please copy and paste the following code into Anki 2.1:
1593969147
If you were linked to this page from the internet, please open Anki on your computer, go to the Tools->Add-ons menu item, then click on Get Add-ons and paste in the code.
All Anki 2.1.x Add-Ons Contact Author
Reviews
on
Good
on
It's good! I wish it could be auto from paste though
on
great add-on
on
Saved me a lot of fiddling with files. Thank you!
on
Great add-on. The image quality is still perfect, even after the resize!
on
Very useful, thank you
on
Love it baby
on
the best
on
Fantastic add-on; resizes images without sacrificing quality in seconds. Exactly what I was looking for
on
like it
on
It (sort of) works! 😋
It generally does its job great. However, when there is some LaTeX math (separated using \( \) ), it has the bad habit of removing all backslashes, which is rather annoying to fix :(.
It generally does its job great. However, when there is some LaTeX math (separated using \( \) ), it has the bad habit of removing all backslashes, which is rather annoying to fix :(.
on
Great add-on. The image quality is still perfect, even after the resize!
on
Awesome!
on
Easy to use. Absolute must have.
Thank you for your work.
Thank you for your work.
on
Should be implemented in Anki
Must have add-on
Must have add-on
on
Awesome
on
Awesome add on
on
Keeps aspect ratio when adjusting just the width for me, but not for height. Otherwise works well enough
on
Very helpful!
on
Useful
on
Thank you!
on
Works very well and keeps image quality. Sometimes does not work and requires a restart to start up again.
on
doesn't work
on
Great!
If any of you is having trouble using the "apply to all fields/notes" for IO enhanced: check if you have moved any fields or created new ones so that you messed up the original field order, fix it and try again; or you can also edit the addon's configuration
If any of you is having trouble using the "apply to all fields/notes" for IO enhanced: check if you have moved any fields or created new ones so that you messed up the original field order, fix it and try again; or you can also edit the addon's configuration
on
Great addon.
However I'm still having trouble with IO cards. "apply to all fields" is working, but if I select "apply to all notes" the addon doesn't do anything.
I never messed around with the fields of the IO cards. I still checked them to make sure, they are all default.
However I'm still having trouble with IO cards. "apply to all fields" is working, but if I select "apply to all notes" the addon doesn't do anything.
I never messed around with the fields of the IO cards. I still checked them to make sure, they are all default.
on
Awesome. Honestly, way easier to use than ImageResizer and the lack of quality loss is a game-changer. Thank you!
on
Really good, except for the fact that "apply to all notes" function for IO cards isn't working
on
Very convenient! thanks!)
on
Absolutely great! I use this all the time
EDIT: If I try to edit any of the masks in a image occlusion enhanced while "apply to all fields" is selected I get this error message
Debug info:
Anki 2.1.22 (0ecc189a) Python 3.8.0 Qt 5.14.1 PyQt 5.14.1
Platform: Windows 10
Flags: frz=True ao=True sv=1
Add-ons, last update check: 2020-07-09 21:48:29
err#TypeError: Cannot read property 'style' of nullerr#TypeError: Cannot read property 'style' of null
EDIT2: SOLVED. I had created a custom field which messed up the position of the "mask" fields. Moving the custom field to the last position fixed it
EDIT: If I try to edit any of the masks in a image occlusion enhanced while "apply to all fields" is selected I get this error message
Debug info:
Anki 2.1.22 (0ecc189a) Python 3.8.0 Qt 5.14.1 PyQt 5.14.1
Platform: Windows 10
Flags: frz=True ao=True sv=1
Add-ons, last update check: 2020-07-09 21:48:29
err#TypeError: Cannot read property 'style' of nullerr#TypeError: Cannot read property 'style' of null
EDIT2: SOLVED. I had created a custom field which messed up the position of the "mask" fields. Moving the custom field to the last position fixed it
on
exactly what I needed! thanks a lot
on
Great add-on!
Only thing really missing from this add-on is a keyboard shortcut!
Only thing really missing from this add-on is a keyboard shortcut!
on
Amazing add-on. It works perfectly. Thank you.
on
Awesome!
on
This add on is absolutely fantastic and I use it all the time! I did encounter one issue just today, and I was hoping I could get some help.
I copy/pasted an image in the card editor as usual and when I right clicked to resize it, this message popped up
Error
An error occurred. Please start Anki while holding down the shift key, which will temporarily disable the add-ons you have installed.
If the issue only occurs when add-ons are enabled, please use the Tools > Add-ons menu item to disable some add-ons and restart Anki, repeating until you discover the add-on that is causing the problem.
When you've discovered the add-on that is causing the problem, please report the issue on the add-on support site.
Debug info:
Anki 2.1.23 (de9543ff) Python 3.8.0 Qt 5.13.1 PyQt 5.14.1
Platform: Mac 10.15.4
Flags: frz=True ao=True sv=1
Add-ons, last update check: 2020-05-02 17:31:40
err#TypeError: Cannot read property 'complete' of null
I copy/pasted an image in the card editor as usual and when I right clicked to resize it, this message popped up
Error
An error occurred. Please start Anki while holding down the shift key, which will temporarily disable the add-ons you have installed.
If the issue only occurs when add-ons are enabled, please use the Tools > Add-ons menu item to disable some add-ons and restart Anki, repeating until you discover the add-on that is causing the problem.
When you've discovered the add-on that is causing the problem, please report the issue on the add-on support site.
Debug info:
Anki 2.1.23 (de9543ff) Python 3.8.0 Qt 5.13.1 PyQt 5.14.1
Platform: Mac 10.15.4
Flags: frz=True ao=True sv=1
Add-ons, last update check: 2020-05-02 17:31:40
err#TypeError: Cannot read property 'complete' of null
on
an alternative add on that helps to resize images is: https://ankiweb.net/shared/info/1103084694
on
hey this is great. but i have been having a problem. if i copy a picture that i resized using this addon and try to copy that resized image it pastes in the original size instead of the one i applied using this addon? any workaround this?
Comment from author
You could copy paste the HTML. (Ctrl + Shift + X after focusing on a field in the editor)
on
I love this add-on! Would it be possible to make it work on PNG files?
Comment from author
It should work on png files as well
on
One of my favourite essential add-ons! Highly recommended. 5/5
on
Great addon! Would be a dream if you could edit images during review.
Could it work in combination with the addon Edit Field During Review (Cloze)?
Again, thanks for your work!
Could it work in combination with the addon Edit Field During Review (Cloze)?
Again, thanks for your work!
Comment from author
Sorry, but due to the way this addon works, it was just too much effort for a slim benefit (I estimate 10s/card). I'd recommend you to press 'E' to go into the editor and edit there.
on
Right click during card editing no longer works after update.
Anki 2.1.15
Edit: works again, Thanks for the speedy response!
Anki 2.1.15
Edit: works again, Thanks for the speedy response!
Comment from author before post was edited
If you have Night Mode addon, can you disable night mode addon and see if it works? Currently due to a bug on night mode, they are to most people not compatible.
on
Thanks!
on
Great! Thanks!
on
Trying to resize images, tried right clicking, no dialog option is present for resizing?
Comment from author
I am sorry to hear that you are experiencing issues with the addon. If you have time, could I know in more detail what is wrong? (Either at https://github.com/BlueGreenMagick/image-style-editor/issues or https://anki.tenderapp.com/discussions/add-ons)
Could you also check that the addon still doesn't work in these conditions:
1) You are right clicking with mouse cursor on top of the image
2) You are using Anki 2.1.15 non-beta/alpha version
3) All other addons are disabled
Could you also check that the addon still doesn't work in these conditions:
1) You are right clicking with mouse cursor on top of the image
2) You are using Anki 2.1.15 non-beta/alpha version
3) All other addons are disabled
on
It would be great if this add-on could work without having to go to browser/edit screen. i.e when you're reviewing cards, press spacebar, and then right-click image and click image styles.
would save a lot of time, but of course might not be possible.
Thanks!
would save a lot of time, but of course might not be possible.
Thanks!
on
good
on
really cool idea, easy to use!
on
Highly necessary add-on and works great. Thank you.
Edit: the new Image Occlusion option is extremely useful.
Edit: the new Image Occlusion option is extremely useful.
on
very useful
on
A suggestion from my side: An option to reduce the real size of the image would be useful with very large pictures, to save space.