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:
- Fit the presentation to the window width only, as shown on this web page. Do not fit both width and height as in the linked example further down, as that may create black "bands" on both sides of the presentation.
- Use a presentation ratio of 2:1, which is a bit wider than the 16:9 ratio of most smart phones and TVs.
Mobile browsers have an address bar on top of the page, which reduces the vertical viewable area in horizontal phone orientation;
this ratio ensures that the presentation will fully appear on such screen, and it also leaves some space for an optional header above it.
- Make sure the texts (if any) are large enough to be readable on most eyes (young and old) and screen sizes (large and small).
- Use "auto start" and "auto loop" in the presentation options; disable the "share presentation" button.
You can achieve all of these suggestions by appending the following to your presentation URL: "?auto-start=true&auto-restart-at-end=true&hide-share-button=true".
Make the last slide's duration longer than the rest, so there will be a reasonable delay before restarting the presentation.
- You may add a nice music sound track, but don't use a voice recording: modern browsers will not allow you to play the audio at page load; the user must click on the "mute/unmute" button to hear the audio. If you really want users to hear your audio, disable "auto start"; users will have to click on "play", in which case the browser will allow the audio to be played. But even then, the user may have turned down the speakers or the volume, and they won't hear it.
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