Hello everyone, I currently use the extension “imagine Resizer” to insert images into reply fields and automatically resize them. Unfortunately I have the problem that the image quality is very bad after that. I can’t find a way to change this in the settings. Is there another solution?
Is there a better add-on?
My settings look like this:
The purpose of this add-on is to reduce file size by reducing the pixel size of sometimes unnecessarily big images. Information (quality) loss is unavoidable here.
If you just want to constrain image dimensions without losing quality, you’re probably better off using CSS in your templates:
img {
max-height: 50vh; /* half of the screen height */
}
or install 2.1.50 and use the new image resize handle, which won’t affect the original image but apply styling to the img HTML tag.
Ah ok, thank you very much!
I do not know now where to copy the CSS command? In the “Style” option under my template?
Like this:
Yes, that’s the right place.
You can of course also use pixel values with px. The advantage of vh and vw (for width) is that they’re responsive.
Sorry, but unfortunately this does not work. The images are still in the original size…even if I set “10vh”.
What am I doing wrong?
I get it…the images are only shown resized in the final map and not in the edit overview!
One more question: Is it also possible to do this differently for each card? There are maps where I would like to have a larger image and on another I would like to have a smaller image.
With your setting it is changed for all cards of a card type.
I used to have the add on “Resize images in editor”. This was perfect, but it does not exist for the current Anki version. Is there a similar alternative?
CSS is applied to all cards of a notetype and that’s a good thing, because styles can be scoped very specifically anyway. For more info on CSS selectors, I recommend this list.
Anki applies the class cardX (X = index) to the body, so you can use
.card1 img {
max-height: 500px;
}
.card2 img {
max-height: 200px;
}
I don’t know whether AnkiDroid applies the .cardX class too, but you could also wrap your templates with a <div card="{{Card}}"> and use an attribute selector like [card$=1], which definitely works on all clients.