An optional banner on top of the page
Page continues here
Pompous photos presentations and slideshows are the perfect splash screen for your website home page.
This is an example of embedding a pompous photos presentation in a web page, by displaying it in an iframe.
Try to resize the browser window (on a phone, flip it's orientation). The presentation always stays at 100% of the available width, right? Probably that's what you want, yes :) Basically, the presentation layout adapts (shrinks or expands) to the browser viewport, which is called responsive design. Also: the presentation ratio (Width:Height) always remains constant; this is by design; the ratio was chosen in the pompousphotos editor. If the presentation height cannot fit the browser window height, there will be a vertical scrollbar.

How to embed your presentation on your web page? It's super easy. The "share" buttons on the edit page and "my dashboard" page have a menu "Embed in a web page" that generates html code to get you started.

Or save a copy of this html file into a new web page, and host it on your web site; then make the following changes:

Change the iframe src attribute to your presentation's url. To find it, play your presentation at pompousphotos.com in a new tab, and copy the URL from the browser address bar. All pompous photos presentations are stored on the Google Cloud Storage service, and are highly available across the world.

Change the CSS style "padding-bottom: 50%" to a new value (note the % sign).
Here is how to calculate it: Take the presentation ratio from the pompousphotos editor (for this presentation it's 2:1), and calculate : 100*1/2, which gives you 50. If you don't know your presentation ratio, view the iframe source code in your browser, and find these two numbers: designWidth: 1920, designHeight: 960. Then calculate: 100*designHeight/designWidth = 100*960/1920 = 50, again. Here is the value for the most popular presentation ratios (Width:Height):
For 16:9 use 56.25%
For 9:16 use 177.78%
For 4:3 use 75%
For 3:4 use 133.33%
For 2:1 use 50%
For 1:2 use 200%
For 1:1 use 100%

Tips for creating the best splash screen for your website home page: Want your presentation to fit the whole page window (width AND height)? It's a bit more complicated, but possible. Take a look here. But first, think twice of what you want. People may be viewing your web page on varieties of screen sizes. If the presentation is taller than a given screen size, there will be vertical "bands" on each side, which may not look good.

Want to go wild? Create two presentations : one with a ratio of 2:1 and another with 1:2 (you can use the "clone presentation" feature in your PompousPhotos dashboard to create the 2nd presentation). Show one or the other, based on the window size. Take a look at an example here.

Create great slideshows at www.pompousphotos.com !