search

Cosmic-Chatter / Exhibitera

Free and open-source software for building and controlling museum exhibits.
MIT License
1 stars 1 forks source link

Images won't maintain aspect ratio when scaling in InfoBrowser text field #3

Closed David-S-Morgan closed 3 weeks ago

David-S-Morgan commented 3 weeks ago

"Oh look, it's that guy again..." :-)

I've noticed an issue with the horizontal scaling of images in InfoBrowser text fields. For example, I have the following in a text field:

![left](content/Wyer_William-cropped.png =80x98 "William Wyer")

The original image is at 160x195, so scaling to 80x98 should maintain the proper aspect ratio. However, the image is horribly stretched in the x direction (Inspecting it in-browser shows it is 376x98). I do see the correct HTML rendered though (<img src="..." alt="left" "width="80" height="98", so that doesn't seem to be the issue. Not sure if it is the Showdown MD<->HTML library you're using or something else. I've tried different scaling options but the x axis scaling seems to be ignored completely.

David-S-Morgan commented 3 weeks ago

I found a section in InfoStation.css that seems to control this.

@media (orientation: landscape) {
  .float-right, .float-left {
    width: 35%;
  }

Not sure what the proper value should be for my use case, but I'll play around with it.

forceflow1049 commented 3 weeks ago

@David-S-Morgan I appreciate the feedback! InfoStation hasn't been a heavily-used app thus far, so this is all great testing.

I will try to reproduce what you're seeing. In the meantime, any valid HTML should be passed right through any Markdown converter, so you ought to be able to just give an <img> tag specifying the behavior you want.

David-S-Morgan commented 3 weeks ago

I will try that -- thanks!

forceflow1049 commented 3 weeks ago

@David-S-Morgan, I was able to reproduce this issue. I also noticed that my <img> tag suggestion doesn't seem to work with Showdown. Weird.

Thanks for the specific feedback on the offending CSS—it resulted in the final feature add for Exhibitera 5. I've added improved support for Markdown image sizing and greatly expanded the InfoStation setup help screen to detail the options.

By the way, your best bet to maintain image aspect ratio is to use a wildcard (*) for the height. E.g.,

![left](content/Wyer_William-cropped.png =80x* "William Wyer")

David-S-Morgan commented 3 weeks ago

Yeah, it doe seem that the CSS is overriding the options in <img>. Glad my suggestion led to a feature enhancement, and thanks for the tip on using a wildcard to avoid having to manually calculate the proper aspect ratio.