Combining a regular and a random image aligned within a CSS Grid


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 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

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):

@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;

@media only screen and (min-width: 800px) {
.band {
grid-template-columns: 1fr 1fr;

.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;

HTML and Javascript:


<div class="img-wrapper"> <div class="band">

<div class="item-1">
<a class="img-container">
<div class="thumb" style="background-image: url({{visual}});"></div>

<div class="item-2">
<a class="img-container">
<div id="img">{{image}}</div>
</div> </div> </div>

var imgsrc = document.getElementById('img');
var newimage = imgsrc.innerHTML.replace(/.*<img src\=./, "").replace(/.>.*/, "");
imgsrc.innerHTML = '<div class="thumb" style="background-image: url(' +newimage+ ');">'

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:

1 Like