Preview aspect ratio

Hoi Wim, @utillis..

All previews are currently 16:9 (or 9:16 portrait). But the actual Foyer display uses the full screen area that is available. So yes, when your Foyer display’s screen is not 16:9 the content will not be wrapped / cropped the same as in the preview.

( Still thinking about a smart way to tackle this. Probably a setting, that’s 16:9 by default… )

But for now you could change the preview with some CSS to match the 16:10 ratio. I did the calculations for you:

.foyer-preview.foyer-preview-9-16 {
  width: calc(60vh - 48.125px);
  height: calc(96vh - 77px);
}
@media screen and (max-width: 782px) {
  .foyer-preview.foyer-preview-9-16 {
    width: calc(60vh - 56.875px);
    height: calc(96vh - 91px);
  }
}
.foyer-preview.foyer-preview-16-9 {
  width: calc(96vh - 77px);
  height: calc(60vh - 48.125px);
}
@media screen and (max-width: 782px) {
  .foyer-preview.foyer-preview-16-9 {
    width: calc(96vh - 91px);
    height: calc(60vh - 56.875px);
  }
}

Hope this helps!

Just curious: what made you decide to use 1920×1200? And placing a screen in an elevator sounds smart.. Care to share a photo of the setup? Private if you want:
https://foyer.tv/send-info/

By the way, if you’re interested you can find the LESS source here. I’ve just changed everything ‘9 / 16′ to ’10 / 16’ and the same for portrait, the compiled to CSS.
https://github.com/mennolui/wp-foyer/blob/master/raw/less/public/foyer-public-preview.less

Hi @utillis, did this help?

Hoi @utillis,

Did that CSS help make the preview of slides 16:10, and exactly the same as when viewed inside the slideshow on your 1920×1200 display? Let me know, your feedback might help me when implementing a display aspect ratio setting/feature.

And thanks for sharing that elevator slideshow, really nice to see Foyer is use in creative ways!

Hi, it’s been a bit hectic. I sent some data and a video a while ago.

Yes the aspect ratio settings work, however the display is viewed differently when the browser is not exactly the same size as the display. The aspect ratio is correct, but actual size also matters for font sizes and margins/paddings.

For a preview function I would prefer to see an option to exactly enter a resolution.

I’ve also been wondering if I should build a custom view so I can properly set font sizes and page margins/paddings. But I don’t want to make too many thinks custom as I would mis updates or things might break in the future.

Hi @utillis, thanks for that video, watched it a while back. Sorry for the late reply. Nicely integrated into that elevator!

All font sizes, margins and paddings that are set by Foyer are relative to the size of the viewport. So the preview and the actual display should look perfectly identical, as long as the viewports of both have the exact same aspect ratio (the CSS I sent you should fix that for your case).

But yes, if the display’s browser is not full screen (viewport exactly covering the whole display area) then it will still not have the same aspect ratio as the preview. And will look slightly different. I think the best way forward would be to make sure the display’s browser is in full screen mode, making the viewport 1920×1200 pixels exactly. If all works well, you shouldn’t need any other adjustment apart from the CSS I sent you.

Also, if you want to redefine font sizes, margin or padding yourself, just because you like bigger/smaller fonts than the Foyer default: Make sure to use ‘rem’ as unit or other relative units, not absolute units like ‘px’. This will make sure all sizes remain relative to the viewport and the small preview will look identical to the actual display (only smaller). By the way you don’t need to edit the template or other Foyer files for this, just add the CSS to your theme, or through the WordPress customizer.

Hope that helps ??