Bases Table View: Keep aspect ratio of images

[Peptino]

Use case or problem

I made a Wine Cellar Tracker and want to see the images of the labels in the first column of a table view with Bases. I added the image with the image() function. The problem is that currently the image is always fitted to the width of the column. As long as the height of the row is larger than the scaled image everything is fine.
When the height of the image is larger than the height of the row the image got stretched.

The picture shows the problem. On the left side everything is fine. On the right side the column width is so large that the scaled image height is larger than the row height and the image is stretched.

Proposed solution

Please keep the aspect ratio of the images and don’t stretch them.

[Peptino]

I discovered that the problem is only there, if you use a bases view inside another note. I made the table view and in the original bases file the aspect ratio stays constant. As soon as I integrate the bases view in another note (with ![[name.base]]) the view acts differently. Now the aspect ratio is not constant (as described in my original post above).

So maybe it’s a feature request or a bug report?

[WhiteNoise]

I can’t reproduce this problem. Please, open a bug report and provide a minimum reproducible example in the sandbox vault.

[Peptino]

I tested the problem in a sandbox vault. The problem is the “Minimal Theme”. With the default theme everything works as expected. With the Minimal Theme the picture aspect ratio is not constant when you integrate a base with images in a note. You can switch the behaviour on and off by changing the theme.

[ariehen]

I haven’t checked, but it could be Minimal’s “Maximize media” setting (in Minimal Theme Settings). I’d let them know on their GitHub page if you have time.

[solumath]

I can confirm this is a Minimal Theme issue. After disabling the “Maximize media” it works as intended.

[Peptino]

It worked as expected with disabling the “Maximize Media” setting. I’ve posted the topic on the Github pages of the Minimal Theme and someone wrote this hint, too.

Thanks!

[awiklendt]

I’ve been trying to figure out how to get images to display in bases table view just like Peptino has in the first post, but can’t get it to work - i either get “invalid formula” or when it’s valid the column is just blank. what’s the secret??

[ariehen]

You can open a new topic and share what steps you have done so far, but the simplest example would be a formula of image(property)

and then in the individual note YAML/Properties:

---
bookCoverURL: 'https://images.alphacoders.com/279/279953.jpg'
---

Images in our vault can be used as well:

---
bookCoverURL: "[[submarine.jpg]]"
---

[awiklendt]

thanks ariehen, putting the YAML property name (in your case bookCoverURL, in my case, just “image”) is the trick. Not being a coder/programmer myself i could not interpret what the documentation meant when it said ‘string’ how all those pipes functioned (Functions - Image()). From using formulas in excel i wrongly guessed the pipes were arguments and some had to be kept empty.

[ariehen]

Gotcha! Yeah, it can be confusing at first.

And properties with spaces or hyphens (the hyphen is read a minus symbol for subtraction), while totally valid property names, need special care in formulas. e.g.

image(bookCoverURL)
image(bookCover_URL)
image(note["bookCover URL"])
image(note["bookCover-URL"])

[awiklendt]

Something interesting now: my image property is a list and for some records i have more than one image listed. In Bases Cards view, the image ‘cover’ pulls the first image from the image property even though that property is a list. In the Table view, the image function cannot handle a list property and won’t pull any image (will instead error, saying the function expected a string but got a list). I’ll have to rethink how i store multiple images for a record. But at least i’m getting closer!