Because a large proportion of RapidWeaver users are building responsive websites, Photo Album Pro is responsive by default. When you first add a Photo Album Pro stack to your page, it will be configured to scale responsively. This means that the slideshow will attempt to scale itself to fit different screen sizes. Therefore this avoids the slideshow getting cropped off the edge of a page or ugly scroll bars displaying.
We use a series of ‘breakpoints’ to determine the height of the slideshow at different screen sizes. A breakpoint is basically a determined screen width, at which something should happen.
In this instance, we use various screen width breakpoints to determine the height of our visible slideshow. Therefore we can adapt the slideshow size at different screen widths, and step it down in size, as the browser window becomes smaller.
9 breakpoints are specified, in 100px increments. These range from screens 400px wide up to screens 1200px wide. These responsive settings are pictured below.
Photo Album Pro responsive settings
As you can see from this screenshot, the slideshow is set to be 200px tall, on screens up-to 400px wide (like mobile devices). Whereas on large monitors 1200px wide or greater, the slideshow is set to be 800px tall. All the time, we step-up the slideshow height in 75px increments, for each of the 100px breakpoints.
Depending on the size and shape of the images you use in Photo Album Pro, you may need to change the responsive settings. It is easier to start looking at the slideshow on smaller screens (industry experts call the ‘mobile first’ web development). Once your slideshow is looking correctly sized on a mobile screen size, then you can gradually work your way up through the other screen sizes. You can choose to increase your slideshow hight in 75px increments or calculate your own height factors.
You can resize your RapidWeaver window to see how the Photo Album Pro stack will look on different screen sizes. You can also preview your page in a normal web browser (like Chrome, Firefox or Safari) to see what the slideshow will look like at different screen sizes.
Some trial and error may be required! However the end result should be a beautiful slideshow that scales elegantly to fit a variety of different screen sizes.
Remember that on smaller screens, you may not have as much space to display longer image titles and captions.
