MacOS Anki 2.1.51 Qt5 Incorrect image resizing

[mjh]

I just upgraded to 2.1.51 since one of my favorite add-ons, Resize Images in Editor, is no longer supported and the functionality was added to newer versions of Anki. However, the editor only seems to change the width of the image, not the height - despite the image size showing a change in both width and height.

Example: I tried making this image smaller via the editor. Per the banner in the bottom right of the image, it was changed from 525x512px to 387x377px. The image becomes distorted as the height does not change which makes sense since the height attribute is unchanged in the CSS. This behavior is not corrected by making height a separate attribute outside the style tag similar to width.

[kleinerpirat]

Did you add that inline style yourself?

Resizing images only sets the width attribute. The height will adjust according to the original aspect ratio and doesn’t need to be set explicitly.

May I ask why the original image resizing add-on was one of your favorites? I still don’t quite get the purpose of that feature. Using CSS in the template seems to be much more efficient

(no judgement, just genuinely curious)

[mjh]

No, the inline style was there already. Not sure if it was set by the image resizing add-on.

I often have images of different sizes to supplement text answers. At times, I want a larger image because there’s additional text or detail that I would like to have easily visible. Other times I want a smaller image overview that can be included below text to limit the need to scroll when answering cards. Either way, it’s the only add-on besides hierarchical tags that is pretty integral to my workflow. I’ve downgraded to an older version until this hopefully is fixed in future releases.

[kleinerpirat]

The inline style interferes with the native resizing method. You can use RegEx to remove it from all your notes.

Find	(<img.+)style=".*?"(.*?>)
Replace with:	$1$2

Treat input as regular expression

This will of course reset all your manually set sizes. It’s also possible to carry over the height value from each of your images, but Anki uses width, so it won’t be of much use.

[mjh]

Ah I see what the issue is, it looks like the previous add-on sets the parameters differently. I have thousands of cards with images so I’m trying to carry over the height value (which is set in most images using the style tag). I’m having a bit of an issue though so any help would be appreciated:

Regex:

Find: (<img.+)style=".*?width: (.*?)"(.*?>)
Replace with: $1width="$2"$3

This works when I test it online (regexr) and paste the result into Anki. However, when I use the Anki find and replace feature using regex, the result is different.

Original:

- Notch of squamous temporal bone superiorly<br>
- Fibrous annulus deficient here<br>
- Pars flaccida attaches directly to squamous temporal bone<br><br>
<i>Pars flaccida retraction -&gt; cholesteatoma in Prussak's space</i><br>
<img src="315e008072be3cdc8802605768181ad5.png" style="height: 445.594px; width: 527px;" class="">

Regexr result (works when pasted into Anki):

- Notch of squamous temporal bone superiorly<br>
- Fibrous annulus deficient here<br>
- Pars flaccida attaches directly to squamous temporal bone<br><br>
<i>Pars flaccida retraction -&gt; cholesteatoma in Prussak's space</i><br>
<img src="315e008072be3cdc8802605768181ad5.png" width="527px;" class="">

Anki result:

- Notch of squamous temporal bone superiorly<br>
- Fibrous annulus deficient here<br>
- Pars flaccida attaches directly to squamous temporal bone<br><br>
<i>Pars flaccida retraction -&gt; cholesteatoma in Prussak's space</i><br>=527px; class=""&gt;

Does Anki process regex differently?

[kleinerpirat]

@mjh

Does Anki process regex differently?

Indeed. Anki uses Rust’s regex engine and there are some differences to more common engines.

The issue seems to be in the “Replace with” input. A space after $1 solved it for me:

Find	(<img.+?)style=".*?width:\s*([^;]+)[;.]*?"(.*?>)
Replace with:	$1 width="$2"$3