Can't resize image in anki 2.1.51

Anki Help
1

I just switched to the newest anki version (2.1.51) and I am having trouble changing the image sizes.

I wanted to resize images to make them small enough so that 4 images will all appear in a row but when I go into the editor, double click on an image and drag so that each image is small enough to all fit in a row, once I close the editor it appears as if nothing changed at all (aka original size). Can anyone help me?

I want something like this:

image
image1920Ă—346 56.5 KB

But I end up getting this:

image
image1920Ă—1044 62.1 KB

Even though this is what the editor after changing the sizes of the image shows me:

image
image1920Ă—548 74.1 KB

2

You probably have inline styles in your img HTML tags that interfere with the native resizing method. E.g. when you got this image:

image

with the following HTML:

<img style="width: 1068px; height: 723px;" src="image_src" width="214">

The style will overrule the width attribute set by Anki’s resize handle, thus rendering it useless.

Please open the field HTML editor with Ctrl+Shift+X while the field is focused, and then attach a screenshot of the content.

4

image
image1920Ă—586 94.6 KB

5

If you often need to quickly resize many images at once, and you want them all to have the same exact height, you could try this alternative method, which uses the card template to resize the images

  1. Open the Add card/Edit card menu
  2. Add two new fields, one called Img_minheight, the other called Img_maxheight
  3. Open the template editor (“Cards” button) and add this code to the Front and Back template of your cards:
<style>
img {
min-height: {{Img_minheight}}px;
max-height: {{Img_maxheight}}px;
}
</style>
  1. Write a number in the Img_maxheight field, e.g. 200
    If all your images had a height ≥ 200 pixels, they will now all have a height of 200 pixels (or better: they will be displayed as having an height of 200 px)
  2. If some of them are smaller than 200 pixels, you can write 200 in the Img_minheight field to make them larger

The images will be resized only while reviewing, not in the editor
You can do and undo the resizing as many times as you want

1 Like
6

Unfortunately, I want to have different image sizes depending on the card. Would it be possible to use your method and have preset card settings in order to fit 1, 2, 3 or 4 images in a row? That way I could toggle between the different card size settings for each card.

7

Also even if I do change the sizes of each image in the HTML editor, I get something like this

image
image1920Ă—1047 99.3 KB

Is there a way to make it so that they all appear on the same line?

8

This resizing method is card/note specific!
Each card/note will have its own maximum height for images, depending on what you write in its Img_maxheight field

(I personally use this method to quickly resize all the images of a card/note at once, then I want to make some images smaller than the others I use this addon: https://ankiweb.net/shared/info/1593969147)

Please post a screenshot of what you see after opening the HTML editor, and also a screenshot of your card templates (Front, Back, Styling section)

1 Like
9

image
image1920Ă—714 147 KB

image
image1890Ă—1074 168 KB

image
image1882Ă—980 171 KB

Styling:
.card {
font-family: georgia;
font-size: 30px;
text-align: center;
color: black;
background-color: white;
word-wrap: break-word
/* background: url(“image.png”) repeat; */
margin: 0;
margin: 1ex 0em;
}

.textstyling {
margin: .75ex 1.15em
}

.mobile .night_mode .textstyling {
margin: 1.5ex .75em;
color: #00aaff !important;

}

img {
display: block;
margin: auto;
width: 100%;
}

.card img {max-width: 50%; max-height: none;}
.mobile .card img {max-width: 100%; max-height: none;}
.mobile .card {margin: 0ex 0em;}
.mobile #content {margin: 0ex 0em;}

/* The glorious king wishes you the best as you prepare for boards! Stay strong my friends!*/

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
/*background: transparent; optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}

a {
color: #2f4f4f;
text-decoration: inherit;
font-family: Times New Roman;
font-size: 9px;
font-style: normal !important;
font-weight: lighter !important;
}

body, div
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(“image.png”) repeat;
}

img#star { max-width: 50px; }

.entiresketchstyle {
}

.card.night_mode {
color: #0f0;
background-color: black;
font-weight: bold !important;
margin: 0;
margin: .25ex 0em;
}

.cloze.night_mode {
color: #F4F406;
}

.entiresketchstyle {
font-size: 12px;
font-style: italic !important;
font-weight: lighter !important;
}
/*Start of style added by resize image add-on. Don’t edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset !important; width:unset !important;}
/End of style added by resize image add-on/

10

Try this: go to the styling section, search for this code:

img {
display: block;
margin: auto;
width: 100%;
}

Then delete display: block;

2 Likes
11

That worked! Thank you!!

1 Like
12

If you delete that width line, your resizing should take effect, too.

You can also delete that part:

1 Like
13

For some reason the resizing still does not work

This is the new styling section:
.card {
font-family: georgia;
font-size: 31px;
text-align: center;
color: black;
background-color: white;
word-wrap: break-word
/* background: url(“image.png”) repeat; */
margin: 0;
margin: 1ex 0em;
}

.textstyling {
margin: .75ex 1.15em
}

.mobile .night_mode .textstyling {
margin: 1.5ex .75em;
color: #00aaff !important;

}

img {
margin: auto;
}

.card img {max-width: 100%; max-height: none;}
.mobile .card img {max-width: 50%; max-height: none;}
.mobile .card {margin: 0ex 0em;}
.mobile #content {margin: 0ex 0em;}

/* The glorious king wishes you the best as you prepare for boards! Stay strong my friends!*/

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
/*background: transparent; optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}

a {
color: #2f4f4f;
text-decoration: inherit;
font-family: Times New Roman;
font-size: 9px;
font-style: normal !important;
font-weight: lighter !important;
}

body, div
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(“image.png”) repeat;
}

img#star { max-width: 50px; }

.entiresketchstyle {
}

.card.night_mode {
color: #0f0;
background-color: black;
font-weight: bold !important;
margin: 0;
margin: .25ex 0em;
}

.cloze.night_mode {
color: #F4F406;
}

.entiresketchstyle {
font-size: 12px;
font-style: italic !important;
font-weight: lighter !important;
}

.extrastyle img {
display: inline;
width: 50%;
}