Layout with/without an image

Anki Card Design
1

Hi Anki-Community,

I have the following problem:

  1. In a deck I have cards with and without an image. Underneath the image there are two text fields. (see Image “1”)
  2. I would love the text of the first field to always start at the same position of the card regardless of whether there’s an image at the top.
  3. Right now the text is starting way higher when there’s no image (see Image “2”) which is kind of disturbing when you are flicking through the cards.

Can someone help me out?

Thank you so much.

Mark

1
11920×1019 86.2 KB

2
21916×1016 84.6 KB

2

Sorry I can give only vague instructions.

So you can use wrap anything with {{^Image}} {{/Image}} so that only if the Image field is not empty it will be rendered. So use that and put in some <br> tags in between and you’ll be done.

I learned these through observing templates others share for specific decks, or the ones I find in shared decks section. I think observation is a good way of learning for us non-coders. You’ll find interesting things people do.

One more thing, you can also use {{#Image}}
{{/Image}} which will render what’s in between only when Image is there. I think these will come in handy. Tell us if you need further help.

1 Like
3

Put that into the front and back of your card:

<div class="container">
<div class='imagefoo'>{{Image}}</div>
<div class='clozebox'>{{cloze:Text}}</div>
<div class="Transl">{{Translation}}</div>
</div>

And that into the styling section of your card:

.container 
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}

.imagefoo 
{
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 50px;
}

.imagefoo img 
{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.clozebox 
{
  margin-top: 10px;
}

.Transl 
{
  margin-top: 50px;
}

This will help you. I can’t get into details here, how everything works. But you should start reading into CSS and HTML. There are probably also easier ways with the “position” styling.

Here is a link for this type of stuff:

4 Likes
4

Thank you so much :slight_smile:

1 Like
5

Thank you :slight_smile:

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.