Making note previews within note folder show images fit perfectly to the note preview. And Also increasing cards per row.

[whyeverythingsohard]

I have a bunch of books/comic books with their cover at the top as a image file like a jpg but the issue is it doesn't fit or shows very small or shows a extremely zoomed in to the image preview. Is there a way to make the images in the note cards show perfectly as in fit perfectly? And also from resizing is there a way to add more cards per row or just dynamically fit the sizing of the image to show in the note preview and the amount cards in a row?

[dosubot[bot]]

You can improve image fitting and increase the number of note cards per row in Trilium by adding custom CSS. There aren't built-in UI settings for this, but you can create a CSS code note with the appCss attribute to override the default styles. For example, to make images fit perfectly (not cropped or zoomed) and show more cards per row, try this CSS:

/* Make images fit inside note cards without cropping */
.note-card-image {
  object-fit: contain !important;
  width: 100% !important;
  height: 200px !important; /* Adjust as needed */
  background: #fff; /* Optional: adds a background for images with transparency */
}

/* Increase cards per row by adjusting the grid */
.note-list {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important; /* Adjust spacing between cards */
}

To apply this:

1. Create a new note of type "code" and set its language to CSS.
2. Add the appCss attribute to the note.
3. Paste the CSS above into the note.
4. Press CTRL-R to reload the Trilium frontend and see the changes.

You can tweak the height in .note-card-image and the minmax value in .note-list to get the look you want. For more inspiration, check out user-created themes in the Theme Gallery or read more about custom CSS in the Trilium themes documentation.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[dosubot[bot]]

The best way to get a recognizable preview for SingleFile notes in Trilium is to add a screenshot (image) of the web page at the very top of your note, above the SingleFile HTML content. Trilium's preview cards in the grid view always show the first image in the note clearly and reliably, but they can't generate a thumbnail from the HTML content itself—especially for complex web pages imported with SingleFile, which often don't fit or scale well in the preview card due to technical limitations in Trilium's rendering logic (details).

Here's a simple workflow:

1. Use SingleFile to save the full web page into Trilium as usual.
2. Take a screenshot of the web page (for example, with your browser's screenshot tool).
3. In Trilium, edit the note and insert the screenshot image at the very top, before the HTML content.
4. The preview card in the folder/grid view will now show the screenshot as a thumbnail, making it easy to recognize at a glance.

This method is reliable and doesn't require coding. There are no plugins or built-in features in Trilium to automate this or to make the preview card show a thumbnail of the HTML content directly (source). Using only SingleFile HTML will almost always result in previews that are hard to recognize or don't fit the card.

If you want step-by-step help with screenshots or inserting images, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[whyeverythingsohard]

@dosu how about if the images or single files are wider then they are longer? so for book covers their length is longer then width. is it possible to dynamically have different card size depending on the first image of the notes aspect ratio? can trilium notes have note cards with different aspect ratio card in the same row?

[eliandoran]

@whyeverythingsohard , the size of the cards is not adjustable.

[whyeverythingsohard]

Is there a way to to force specifically for a specific folder lets say "books" which have taller then wider book cover images then lecture videos which are wider then taller. is there a way for just the books folder to have a aspect ratio that fits that and the lecture folder to have the aspect ratio that fits it? @dosu

[whyeverythingsohard]

@whyeverythingsohard , the size of the cards is not adjustable.

the dosu recommendation allowed manual control over the card size so I wanted to try something new where I manually set book note cards as a certain size and the other stuff as the wide aspect size. Is there a way for me to ask @dosu more? it doesn't seem to work anymore :*(.