Hi,
I have a new workflow and a new CSS & HMTL for adding images to my Anki deck that I would like to share and maybe get your feedback on it.
My aim was to achieve a tile design, within each tile an image gets parsed in. The tiles have a fixed width and their size is not changing responsively as I find such elements rather irritating. The only way I could find a solution for a tile design was using the CSS codes “background-size: cover” and “background-position: center center”. I tried my best with an img src and CSS “object-fit: cover” but I couldn’t get it to work. The image wouldn’t cover the entire thumbnail frame.
I also looked at the solutions listed in this article: css - How can I fill a div with an image while keeping it proportional? - Stack Overflow
Again, it didn’t work.
Why do I combine a regular with a random image?
I choose the regular image because it is the one that is closest to my association of the meaning of the word. It is also a backup image because it seems like you cannot store the previously fetched random images in Anki’s library, so it comes handy if I don’t have wifi.
The random image has the advantage that it gives me a new visual cue every time I study the card. So I don’t get bored or visually fed up with the “old” regular image over time.
This is the workflow and the solution I came up with:
A field for the random image fetched from unsplash.com using a visual keyword in English:
field: {{visual}}
example keyword: read
(or reading)
A field for the regular image containing an image that is stored in the media collection:
field: {{image}}
I use this addon to download multiple images from unsplash.com:
Batch Download Pictures From Google Images: Batch Download Pictures From Google Images - AnkiWeb
These are the settings for the addon:
I select a single image of my liking (cut), delete all the remaining (cmd + A) and paste the selected image back into the field (paste).
The HTML and CSS only work with a single regular image due to the javascript currently in use.
CSS on the card layout (Front or Back):
<style>
@media only screen and (min-width: 1240px) {
.container {
grid-template-columns: 1fr 8fr 1fr;
}
.band {
grid-column: 2/ span 1;
}
}
.band {
width: 100%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 10px;
justify-content: center;
}
{{#image}}
@media only screen and (min-width: 800px) {
.band {
grid-template-columns: 1fr 1fr;
}
}
{{/image}}
.img-wrapper {
display: inline-block;
}
/* img-container */
.img-container {
min-height: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
position: relative;
top: 0;
transition: all .1s ease-in;
}
.img-container .thumb {
padding-bottom: 100%;
background-size: cover;
background-position: center center;
min-width: 400px;
}
</style>
HTML and Javascript:
<html>
<div class="img-wrapper"> <div class="band">
<div class="item-1">
<a class="img-container">
<div class="thumb" style="background-image: url(https://source.unsplash.com/random/400x400/?{{visual}});"></div>
</a>
</div>
{{#image}}
<div class="item-2">
<a class="img-container">
<div id="img">{{image}}</div>
</a>
{{/image}}
</div> </div> </div>
</html>
<script>
var imgsrc = document.getElementById('img');
var newimage = imgsrc.innerHTML.replace(/.*<img src\=./, "").replace(/.>.*/, "");
imgsrc.innerHTML = '<div class="thumb" style="background-image: url(' +newimage+ ');">'
</script>
Narrow view:
Broad view:
The CSS and HTML is a result of a lot of trial and error, so it could be somewhat messy.
If you have any suggestions for improvement, I’d be grateful.
I couldn’t figure out so far how to suppress 404 error images from unsplash:
bajo-el-olmo provided a solution and it does work on the first card but the code stops working on all consecutive cards on a Mac. I assume that the javascript code only gets executed once. I don’t know how to force Anki to refresh the code on every card. So currently, you would see in case of an error message something like this:
