cannot couple Image Occlusion Enhanced
Closed this issue · 7 comments
Hello
Thanks for your add-on. Great it can change all the blocks on Image Occlusion Enhanced.
It can work properly on normal pictures that when I modify the width or height of the pictures, they can flex correspondently.
But if I paste the picture onto Image Occlusion Enhanced and add some blocks, then resize this picture with Image Style Editor, the picture cannot morph correspondently (aspect ratio) even though I have set 'auto' in the config.
To be more detailed, if I change the width of the picture, the width, along with the blocks, will change but the height will not do automatically (aspect ratio) and vice versa.
How to fix this?
Anki 2.1.20
Image Style Editor 2.4
Image Occlusion Enhanced for Anki 2.1 (alpha) 1.3.0-alpha5
Besides, hopefully you can add options to change the real size (storage) of the pictures while modifying them to have a better manageable anki :D
As you know, the more media you add to anki, the more space it will take up, especially noticeable on mobile.
Thanks for the detailed bug report. I looked into it, and it works fine on my computer, so I suspect that our note type css is different. Could I ask you to share the Styling of your note type? You can find it in Tools > Manage Note Types > Image Occlusion Enhanced > Cards...
Regarding image compression, I'm afraid it's not on my to-do list at the moment.
Thanks for your reply.
Sure, here it is.
Well, would you please tell me how you keep the size of anki manageable, as the more media you add, the more space anki will consume?
/* GENERAL CARD STYLE */
.card {
font-family: "Helvetica LT Std", Helvetica, Arial, Sans;
font-size: 150%;
text-align: center;
color: black;
background-color: white;
}
/* OCCLUSION CSS START - don't edit this */
#io-overlay {
position:absolute;
top:0;
width:100%;
z-index:3
}
#io-original {
position:relative;
top:0;
width:100%;
z-index:2;
visibility: hidden;
}
#io-wrapper {
position:relative;
width: 100%;
}
/* OCCLUSION CSS END */
/* OTHER STYLES */
#io-header{
font-size: 1.1em;
margin-bottom: 0.2em;
}
#io-footer{
max-width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 0.8em;
font-style: italic;
}
#io-extra-wrapper{
/* the wrapper is needed to center the
left-aligned blocks below it */
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
}
#io-extra{
text-align:center;
display: inline-block;
}
.io-extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}
.io-field-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}
#io-revl-btn {
font-size: 0.5em;
}
/* ADJUSTMENTS FOR MOBILE DEVICES */
.mobile .card, .mobile #content {
font-size: 120%;
margin: 0;
}
.mobile #io-extra-wrapper {
width: 95%;
}
.mobile #io-revl-btn {
font-size: 0.8em;
}
Sorry, but I still cannot reproduce this issue... Do you perhaps have some other addons that might be interfering(one that modifies the reviewer or the editor)? The aspect ratio isn't preserved in the desktop Anki(not AnkiMobile), correct?
If you don't have any other such addons, in the reviewer with the problem image, could you press Ctrl + Shift + ; which pops up the debug console, copy paste the following code into the console, Ctrl + Enter to execute, and copy paste here the text that shows up?
from aqt.utils import showText
print(mw.web.page().toHtml(lambda a: showText(a)))
As for keeping the size of the media manageable, I haven't yet run into such problem (<50mb), but ImageResizer or using ImageMagick(requires some terminal stuff) may work.
Thanks. I solved it.
Wow, how do you do that (<50mb), as you add pictures as well?
I only have like 300 pictures, so maybe that is the reason. I myself am not quite sure how people get 1gb+ media.
There is also this recent reddit thread about compressing media folder you might be interested in https://www.reddit.com/r/Anki/comments/feu0tx/if_you_have_a_lot_of_pictures_in_your/
Thank you.