Modern Narrative - Photo story pages

Photo Story is a page type which allows you to easily change the size and layout of images by using star ratings. This makes them versatile for dynamic photo narratives, one page portfolios and showstopping galleries.


The order of images is controlled by their order in the set. The size of the images is controlled by its star rating.


Before you start, take a look at some examples of Photo Story arrangement on the web.

Sample Photo Story page
Live Demo

Demo with visible star ratings
Live Demo


When arranging images for a story page we advise that you select view as thumbnails, layout grid, and sort by custom as the view options in your set.

You can use the Arrange by option to arrange the images initially.

Make use of keyboard shortcuts to speed up the process.

Hold down the Alt key while clicking on an image to select multiple, or Shift to select a group between two clicked images. Hit a number on the keyboard from 0 to 5 to set the star rating for selected images.

Sizing Guide

Below are examples of how the star rating affects the image size and layout.

Not filling a whole row doesn't affect the size of the images. Setting one image to ★★ will create an unfilled row of smaller images for example.

5 Stars

★★★★★ Fills the width of the screen.

4 Stars

★★★★ Fills one whole row.

3 Stars

★★★ Two images per row.

2 Stars

★★ Three images per row.

1 Star

★ Four images per row.

No star rating

No rating - Five images per row.


The story page is perfect for showing off key images by making them prominent with a 4 or 5 rating, while using sequences of smaller images to tell a story and make the layout engaging. Aim to mix up the arrangement, such as alternating larger images with sets of smaller portrait images for best results.


You can set a default star rating for all new uploads on the settings screen.

You can rate images in Lightroom before you export them, so you may want to rate your favourites as 4 or 5 and others as 2 or 3 and these settings will be imported on upload. Make sure to tick Get details from image metadata on the upload screen.

When previewing your changes always use your websites testing host to make sure that you see changes without a delay.