How to stack images side by side rather than on top of each other (default Anking)?

The category for general support questions related to using AnkiHub.

Things not to ask about here:

Please include supporting information and documents such as screenshots, recordings, etc.

Thinking

Read topic
Reading: How to stack images side by side rather than on top of each other (default Anking)?

It looks like you may have pasted the category description into your post instead of your actual question.

To help you with โ€œhow to stack images side by side rather than on top of each other (default AnKing)?โ€, could you please add:

  1. A screenshot of the card showing the images stacked on top of each other.
  2. Whether youโ€™re using:
    • The AnKing Overhaul (and which version, e.g. v12, v13), and
    • AnkiHub to keep it synced.
  3. Where the images are:
    • Are you pasting them directly into the card editor (front/back field)?
    • Or are they part of a field that AnKing uses for media (e.g. Extra, Image Occlusion, etc.)?

In the meantime, here are two common approaches people use with AnKing-style cards:


1. Use HTML in the field (quick and simple)

In the cardโ€™s field (e.g. Extra), switch to the HTML editor (Ctrl+Shift+X on desktop), and wrap the images like this:

<div style="display:flex; gap:10px;">
  <img src="image1.png" style="max-width:45%;">
  <img src="image2.png" style="max-width:45%;">
</div>

Replace image1.png and image2.png with your actual filenames (you can copy them from the existing <img> tags Anki generates).

This will place the images side by side.


2. Use a reusable CSS class (cleaner for repeated use)

If youโ€™re editing the card template of an AnKing note type:

  1. In the card template editor, open the Styling tab and add:

    .side-by-side {
      display: flex;
      gap: 10px;
    }
    .side-by-side img {
      max-width: 45%;
    }
    
  2. Then, in the field content (HTML editor), wrap your images:

    <div class="side-by-side">
      <img src="image1.png">
      <img src="image2.png">
    </div>
    

This is better if youโ€™ll be doing this frequently on AnKing cards (including those synced via AnkiHub).


Once you share a screenshot and confirm your exact setup, I can tailor the steps specifically to your AnKing note type and make sure they play nicely with your AnkiHub-synced templates.

Hello,

Could you please explain in a bit more detail? What do you mean by stacking images? Screenshots would be ideal so I can better understand the issue! :blush:

hi lets say make it so the images in the extra section are side by side - so you donโ€™t have to scroll down to look at all he images - attached is an example of the usual anking cards where u have o scroll down to see them all

Hello,

Unfortunately, this is our standard formatting for adding images to cards. The vast majority of the time, they are stacked on top of each other. In most cases, even if they are side by side in the Edit view (which is the view in the screenshot you sent), their width will cause them to stack on top of each other in the Review view when you are actually studying the flashcard.

The only way to make them appear side by side in the Edit view is to manually format them that way. This would also require you to protect the field, but doing so means you would no longer receive any future updates for it. Alternatively, you could submit a suggestion to change the layout, but it likely would not be accepted since our standard is to stack images vertically. Furthermore, even if the suggestion were accepted, there is no guarantee the images would appear side by side during reviews, as this is highly dependent on the image width and your deviceโ€™s screen size.

I am sorry to say that what you are trying to achieve is not currently possible with the AnKing Step deck. However, we are always working on delivering the best study experience possible. We value your feedback, so please feel free to submit a feature request for this: ๐Ÿฅบ Feature Request - AnkiHub Community

Let me know if you need help with anything else! :blush:

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