Photo slider

A simple interactive template to compare two pictures.

Updated 5 days ago to v4.7.3 by Flourish team

How to use this template

Photo slider

A simple interactive template to compare two pictures.

Data requirements

Two pictures with the same aspect ratio.

Credits and feedback

Created by Flourish. Want to see additional features? Let us know at support@flourish.studio.

This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.

template: @flourish/photo-slider

version: 4

Template data

This template does not have any data bindings, so you shouldn't include data or bindings key/value pairs in your opts object that is passed to the API. You should specify the template and template version in the opts object like:

{
    template: "@flourish/photo-slider",
    version: "4",
    ...
}

Template settings

Options for opts.state.

Photos

mode string

Before/after mode.

Allowed values:

  • slide (Slide)
  • fade (Fade)
  • spotlight (Spotlight)

spotlight_size number

Spotlight size.

spotlight_blur number

Spotlight blur.

Max: 100

spotlight_speed number

Spotlight animation. Time it takes to animate from one spotlight position to another in the story player

photo_1_big url

has_photo_1_small boolean

Add smaller version for mobile. (Optional) Mobile versions will be loaded quicker on smaller screens

photo_1_small url

Photo 1 (mobile version). This picture should be roughly 500px wide

photo_2_big url

has_photo_2_small boolean

Add smaller version for mobile. (Optional) Mobile versions will be loaded quicker on smaller screens

photo_2_small url

Photo 2 (mobile version). This picture should be roughly 500px wide

Slider settings

slider_radius number

Size.

slider_fill_type string

Type.

Allowed values:

  • color (Color)
  • image (Image)

slider_fill_image url

Image.

slider_fill_overlay color

Fill.

slider_fill_standalone color

Fill (outside picture).

slider_line_thickness number

Slider line thickness.

slider_line_color color

Slider line color.

Layout

layout.body_font font

Main font. This font will apply to the whole graphic by default. You can optionally change the font for the title, subtitle, footer, etc in the Header and Footer settings panels.

layout.font_color color

Text color. This color will apply to the whole graphic by default, You can optionally change the color for individual text elements, in other settings panels.

layout.background_color_enabled boolean

Color.

Allowed values:

  • true (On)
  • false (Off)

layout.background_image_enabled boolean

Image.

Allowed values:

  • true (On)
  • false (Off)

layout.background_color color

Background color.

layout.background_image_src url

Image URL.

layout.background_image_size string

Size.

Allowed values:

  • cover (Fill)
  • contain (Fit)
  • auto (Original)
  • 100% 100% (Stretch)

layout.background_image_position string

Position.

Allowed values:

  • top left (Top left)
  • top center (Top center)
  • top right (Top right)
  • center left (Center left)
  • center center (Center)
  • center right (Center right)
  • bottom left (Bottom left)
  • bottom center (Bottom center)
  • bottom right (Bottom right)

layout.max_width_target string

Maximum width. Apply a maximum width to just the main graphic or everything (main graphic plus header, footer, etc).

Allowed values:

  • none (None)
  • wrapper (Everything)
  • primary (Main graphic)

layout.max_width number

Maximum width. Leave blank to stretch to container width

Min: 50

layout.max_width_align string

Align.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)

layout.layout_order string

Layout order.

Allowed values:

  • stack-default (Header – controls – legend – primary graphic – footer)
  • stack-2 (Primary graphic – header – controls – legend – footer)
  • stack-3 (Header – primary graphic – controls – legend – footer)
  • stack-4 (Controls – primary graphic – header – legend – footer)
  • grid-1 (Grid mode: Primary graphic on the right)

layout.space_between_sections string

Space between sections.

Allowed values:

  • 0.5 (▁)
  • 1 (▃)
  • 1.5 (▄)
  • custom (...)

layout.space_between_sections_custom number

Custom.

Max: 100

layout.margin_top number

Top.

layout.margin_right number

Right.

layout.margin_bottom number

Bottom.

layout.margin_left number

Left.

layout.border.enabled boolean

Show borders around visualisation.

layout.border.top.width number

Top.

layout.border.top.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.top.color color

Color.

layout.border.right.width number

Right.

layout.border.right.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.right.color color

Color.

layout.border.bottom.width number

Bottom.

layout.border.bottom.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.bottom.color color

Color.

layout.border.left.width number

Left.

layout.border.left.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.left.color color

Color.

layout.read_direction string

Read direction. This will change the reading direction of the main text elements on the page. It's not possible to adjust this on all elements, such as axes.

Note that when direction is set to right to left any alignment icons will be reversed.

Allowed values:

  • ltr (Left to right)
  • rtl (Right to left)

layout.font_size_mobile_small number

layout.font_size_mobile_big number

layout.font_size_tablet number

layout.font_size_desktop number

layout.font_size_big_screen number

layout.breakpoint_mobile_small number

layout.breakpoint_mobile_big number

layout.breakpoint_tablet number

layout.breakpoint_desktop number

layout.breakpoint_big_screen number

layout.header_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)

layout.title html

layout.title_styling boolean

Styling.

layout.title_font font

Title Font.

layout.title_size string

Size.

Allowed values:

  • 1.4 (ᴀ)
  • 1.6 (A)
  • 2 (fa-font)
  • custom (...)

layout.title_size_custom number

Custom. Specify a custom responsive font size in rems. The best results will be with values between 1.2 and 3

layout.title_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.title_color color

Color.

layout.title_line_height number

Line height.

Max: 3

layout.title_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.title_space_above_custom number

Custom.

Max: 100

layout.subtitle html

layout.subtitle_styling boolean

Styling.

layout.subtitle_font font

Subtitle Font.

layout.subtitle_size string

Size.

Allowed values:

  • 1.4 (ᴀ)
  • 1.6 (A)
  • 2 (fa-font)
  • custom (...)

layout.subtitle_size_custom number

Custom. Specify a custom responsive font size in rems. The best results will be with values between 1.2 and 3

layout.subtitle_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.subtitle_color color

Color.

layout.subtitle_line_height number

Line height.

Max: 3

layout.subtitle_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.subtitle_space_above_custom number

Custom.

Max: 100

layout.header_text html

layout.header_text_styling boolean

Styling.

layout.header_text_size string

Size.

Allowed values:

  • 1.2 (ᴀ)
  • 1.4 (A)
  • 1.6 (fa-font)
  • custom (...)

layout.header_text_size_custom number

Custom. Specify a custom responsive font size in rems. The best results will be with values between 1.2 and 3

layout.header_text_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.header_text_color color

Color.

layout.header_text_line_height number

Line height.

Max: 3

layout.header_text_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.header_text_space_above_custom number

Custom.

Max: 100

layout.header_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • top_and_bottom (Top & bottom)
  • none (None)

layout.header_border_width number

Width.

layout.header_border_color color

Color.

layout.header_border_style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.header_border_space number

Space. Space between border and header text

layout.header_logo_enabled boolean

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.header_logo_src url

Image.

layout.header_logo_alt string

Alt text.

Link.

layout.header_logo_height number

Height.

layout.header_logo_align string

Align. Align logo inside either the header or the main visualization container

Allowed values:

  • inside (Header)
  • outside (Main container)

layout.header_logo_position_inside string

Position.

Allowed values:

  • top (Top)
  • left (Left)
  • right (Right)

layout.header_logo_position_outside string

Position.

Allowed values:

  • left (Left)
  • right (Right)

layout.header_logo_margin_top number

Top.

layout.header_logo_margin_right number

Right.

layout.header_logo_margin_bottom number

Bottom.

layout.header_logo_margin_left number

Left.

layout.footer_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)
  • justify (fa-align-justify)

layout.footer_text_size number

Size.

layout.footer_text_color color

Color.

layout.footer_styling boolean

Advanced footer styles.

layout.footer_font font

Font.

layout.footer_text_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.source_name string

Source name.

layout.source_url string

Source url.

layout.multiple_sources boolean

Multiple sources.

layout.source_name_2 string

Source name.

layout.source_url_2 string

Source url.

layout.source_name_3 string

Source name.

layout.source_url_3 string

Source url.

layout.source_label string

Source label.

layout.footer_note html

Note. To add the time/date stamp of when the data was last updated add {{data_last_updated}}. For example, "Last updated at {{data_last_updated}}". To customize the format, use the advanced options below.

layout.footer_note_secondary html

Note (secondary). The secondary note is placed below the source and primary note. To add the time/date stamp of when the data was last updated add {{data_last_updated}}. For example, "Last updated at {{data_last_updated}}". To customize the format, use the advanced options below.

layout.advanced_note_styling boolean

Advanced.

layout.footer_timestamp_format string

Time/date stamp formatting. To change the date/time format of your timestamp, choose from the below options or provide a custom date format in d3-time-format syntax

Predefined values:

  • %H:%M:%S (13:39:13)
  • %I:%M %p (01:39 PM)
  • %H:%M (13:39)
  • %H:%M %p (13:39 PM)
  • %H:%M:%S, %d %b %Y (13:39:13, 28 Jan 2024)
  • %H:%M, %d %b %Y (13:39, 28 Jan 2024)
  • %H:%M, %d/%m/%Y (13:39, 28/01/2024)
  • %H:%M, %m/%d/%Y (13:39, 01/28/2024)
  • %H:%M, %d-%m-%Y (13:39, 28-01-2024)
  • %H:%M, %m-%d-%Y (13:39, 01-28-2024)
  • %d %b %Y (28 Jan 2024)
  • %m/%d/%Y (01/28/2024)
  • %d/%m/%Y (28/01/2024)
  • %m-%d-%Y (01-28-2024)
  • %d-%m-%Y (28-01-2024)
  • %Y-%m-%d (2024-01-28)
  • %Y-%m-%d %H:%M:%S (2024-01-28 13:39:13)

layout.footer_logo_enabled boolean

Image.

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.footer_logo_src url

Image.

layout.footer_logo_src_light hidden

Image (light version). If provided this version will be used whenever the background color is dark

layout.footer_logo_alt string

Alt text.

Link.

layout.footer_logo_height number

Height.

layout.footer_logo_margin number

Margin.

layout.footer_logo_order string

Position.

Allowed values:

  • left (Left)
  • right (Right)

layout.footer_align_vertical string

V. align.

Allowed values:

  • flex-start (Top)
  • center (Center)
  • flex-end (Bottom)

layout.footer_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • top_and_bottom (Top & bottom)
  • none (None)

layout.footer_border_width number

Width.

layout.footer_border_color color

Color.

layout.footer_border_style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.footer_border_space number

Space. Space between border and footer text

Accessibility

layout.screenreader_text_primary text

Screenreader description. A text alternative to the visual content that will only be visible to screenreaders, e.g. “The line chart shows China consistently higher than the other countries since 1990”.

Do not replicate your title, since that will also be read by screenreaders.

layout.screenreader_label string

Screenreader label. A short text label given to the main Flourish embed wrapper to provide an accessible name that is only visible to screenreaders. Added in the form of an "aria-label".

layout.screenreader_hide_primary boolean

Screenreader mode for main visual container. Whether the main visual container is visible to screenreaders. (Text in the header and footer are always available to screenreaders.)

Allowed values:

  • true (Hidden)
  • false (Readable)