Feat/sat image snapshot

[jdromero88]

Satellite Snapshot Timeline

The Satellite Snapshot Timeline is an interactive image slider. It lets visitors move through a set of dated images using a timeline and previous/next buttons.

Each item can show:

• an image

• a title

• a date

• a short description

• a point on the timeline

The timeline is powered by a spreadsheet or CSV file. Once the data is connected, the component automatically builds the image slider and timeline.

---

Basic Example

To add the timeline to a page, copy and paste this:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv">
</csis-satellite-snapshot>

The only required setting is data-url.

Replace:

https://link-to-your-data.csv

with the link to your published CSV file.

---

Example with Magnifier Turned On

The magnifier is optional. By default, it is turned off.

To turn it on, add:

magnifier="on"

Example:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="on">
</csis-satellite-snapshot>

The magnifier only works on larger screens. On screens that are 1024px wide or smaller, the magnifier turns off automatically so the timeline is easier to use on tablets and phones.

---

What the Visitor Can Do

Visitors can:

• click Prev to see the previous image

• click Next to see the next image

• click a point on the timeline

• hover over timeline points to preview dates

• read the title, date, and description for the selected image

• use the magnifier on desktop, when it is enabled

---

Required Setting

data-url

This connects the component to your data.

data-url="https://link-to-your-data.csv"

Example:

<csis-satellite-snapshot
  data-url="https://example.com/my-satellite-data.csv">
</csis-satellite-snapshot>

Without data-url, the timeline will not have any content to display.

---

Turning the Magnifier On or Off

Magnifier Off

This is the default behavior:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv">
</csis-satellite-snapshot>

You can also write it explicitly like this:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="off">
</csis-satellite-snapshot>

Magnifier On

Use this when you want visitors on desktop screens to zoom into the image:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="on">
</csis-satellite-snapshot>

Magnifier Zoom Amount

Use magnifier-zoom to control how zoomed-in the magnifier appears.

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="on"
  magnifier-zoom="2">
</csis-satellite-snapshot>

A larger number means more zoom.

Recommended values:

magnifier-zoom="1.5"
magnifier-zoom="2"
magnifier-zoom="2.5"

Magnifier Border Color

Use magnifier-border-color to change the outline color of the magnifier circle.

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="on"
  magnifier-border-color="#ffffff">
</csis-satellite-snapshot>

---

Full Example

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="on"
  magnifier-zoom="2"
  magnifier-border-color="#ffffff">
</csis-satellite-snapshot>

---

Styling the Timeline

You can customize the look of the timeline without editing the component code. Add any of these settings directly inside the component tag.

Timeline Line Color

Changes the horizontal line behind the timeline points.

timeline-line-color="#cccccc"

Example:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  timeline-line-color="#cccccc">
</csis-satellite-snapshot>

Timeline Circle Size

Changes the size of the timeline dots.

timeline-circle-size="1rem"

Example:

timeline-circle-size="1.25rem"

Timeline Circle Color

Changes the inside color of the timeline dots.

timeline-circle-color="#ffffff"

Timeline Circle Border Color

Changes the border color around the timeline dots.

timeline-circle-border-color="#999999"

Selected Timeline Circle Border Color

Changes the border color of the active timeline dot.

timeline-circle-selected-border-color="#dd3d3d"

Timeline Year Color

Changes the color of the year labels under the timeline.

timeline-year-color="#333333"

---

Styling the Timeline Box

The timeline box is the outer container around the image, timeline, and text.

Background Color

timeline-content-background-color="#ffffff"

Border Thickness

timeline-content-border-thickness="2px"

Border Color

timeline-content-border-color="#e6332e"

Rounded Corners

timeline-content-border-radius=".5rem"

Padding

Padding controls the amount of space inside the outer box.

timeline-content-padding="1rem"

Gap Between Sections

This controls the space between the image, timeline, and text content.

timeline-gap="1.5rem"

---

Styling the Buttons

The component has Prev and Next buttons.

Button Text Color

btn-color="#333333"

Button Background Color

btn-bg-color="#ffffff"

Button Border Color

btn-border-color="#dd3d3d"

Button Border Thickness

btn-border-thickness="1px"

Button Icon Color

btn-svg-color="#dd3d3d"

Button Hover Text Color

This changes the text/icon color when someone hovers over the button.

btn-hover-color="#dd3d3d"

Button Hover Background Color

btn-bg-hover-color="#ffffff"

Space Between Button Text and Icon

btn-gap=".5rem"

---

Styling the Image

Image Fit

Use img-object-fit to control how the image fits inside its space.

img-object-fit="contain"

Recommended options:

img-object-fit="contain"
img-object-fit="cover"

Use contain when you want the full image to always be visible.

Use cover when you want the image to fill the space, even if part of the image may be cropped.

---

Styling the Text Area

The text area includes the title, date, and description.

Text Box Background Color

text-box-background-color="#ffffff"

Text Box Border Thickness

text-box-border-thickness="2px"

Text Box Border Color

text-box-border-color="#dddddd"

Text Box Rounded Corners

text-box-border-radius="15px"

---

Styling the Title

Title Color

title-color="#000000"

Title Alignment

title-alignment="left"

Other options:

title-alignment="center"
title-alignment="right"

Title Font Size

title-font-size="1.5rem"

---

Styling the Date

Date Color

date-font-color="#666666"

Date Font Size

date-font-size="1rem"

Date Alignment

date-alignment="left"

Other options:

date-alignment="center"
date-alignment="right"

---

Styling the Description

Description Color

description-font-color="#000000"

Description Font Size

description-font-size="1rem"

Description Alignment

description-alignment="left"

Other options:

description-alignment="center"
description-alignment="right"

---

Using a Custom Font

You can use a custom web font by adding a font link and font family.

Font Link

box-font-url="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans"

Font Family

box-font-family="'IBM Plex Sans', system-ui, sans-serif"

Example:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  box-font-url="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans"
  box-font-family="'IBM Plex Sans', system-ui, sans-serif">
</csis-satellite-snapshot>

---

Styled Example

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
timeline-content-background-color="#ffffff"

timeline-content-border-color="#e6332e"

timeline-content-border-thickness="2px"

timeline-content-border-radius=".5rem"

timeline-content-padding="1rem"
btn-color="#333333"

btn-bg-color="#ffffff"

btn-border-color="#dd3d3d"

btn-svg-color="#dd3d3d"

btn-hover-color="#dd3d3d"
timeline-line-color="#d9d9d9"

timeline-circle-color="#ffffff"

timeline-circle-border-color="#d9d9d9"

timeline-circle-selected-border-color="#dd3d3d"

timeline-year-color="#333333"
title-color="#000000"

title-alignment="left"

title-font-size="1.5rem"
date-font-color="#666666"

date-font-size="1rem"
description-font-color="#000000"

description-font-size="1rem">

</csis-satellite-snapshot>

---

Styled Example with Magnifier

<csis-satellite-snapshot

data-url="https://link-to-your-data.csv"

magnifier="on"

magnifier-zoom="2"

magnifier-border-color="#ffffff"
timeline-content-background-color="#ffffff"

timeline-content-border-color="#e6332e"

timeline-content-border-thickness="2px"

timeline-content-border-radius=".5rem"

timeline-content-padding="1rem"
btn-color="#333333"

btn-bg-color="#ffffff"

btn-border-color="#dd3d3d"

btn-svg-color="#dd3d3d"

btn-hover-color="#dd3d3d"
timeline-line-color="#d9d9d9"

timeline-circle-color="#ffffff"

timeline-circle-border-color="#d9d9d9"

timeline-circle-selected-border-color="#dd3d3d"

timeline-year-color="#333333"
title-color="#000000"

title-alignment="left"

title-font-size="1.5rem"
date-font-color="#666666"

date-font-size="1rem"
description-font-color="#000000"

description-font-size="1rem">

</csis-satellite-snapshot>

---

Quick Reference

Setting	What it changes	Example
data-url	The data file used by the timeline	data-url="https://link.csv"
magnifier	Turns the desktop magnifier on or off	magnifier="on"
magnifier-zoom	How much the magnifier zooms in	magnifier-zoom="2"
magnifier-border-color	Magnifier circle border color	magnifier-border-color="#fff"
btn-color	Button text color	btn-color="#333"
btn-bg-color	Button background color	btn-bg-color="#fff"
btn-border-color	Button border color	btn-border-color="#dd3d3d"
btn-svg-color	Button arrow icon color	btn-svg-color="#dd3d3d"
img-object-fit	How the image fits in its space	img-object-fit="contain"
timeline-line-color	Timeline line color	timeline-line-color="#ddd"
timeline-circle-size	Timeline dot size	timeline-circle-size="1rem"
timeline-circle-color	Timeline dot color	timeline-circle-color="#fff"
timeline-year-color	Timeline year label color	timeline-year-color="#333"
title-color	Title text color	title-color="#000"
title-alignment	Title alignment	title-alignment="left"
title-font-size	Title size	title-font-size="1.5rem"
date-font-color	Date text color	date-font-color="#666"
date-font-size	Date text size	date-font-size="1rem"
description-font-color	Description text color	description-font-color="#000"
description-font-size	Description text size	description-font-size="1rem"
text-box-background-color	Text area background color	text-box-background-color="#fff"
text-box-border-color	Text area border color	text-box-border-color="#ddd"
text-box-border-radius	Text area rounded corners	text-box-border-radius="15px"

---

Notes for Editors

Use quotation marks around every setting value:

title-color="#000000"

Do not use this:

title-color=#000000

Colors can be written as hex values:

#ffffff
#000000
#dd3d3d

Sizes can be written as:

1rem
1.5rem
16px
24px

The safest values to edit are colors, font sizes, borders, and spacing.

---

Troubleshooting

Nothing appears on the page

Check that data-url is present and points to a valid CSV file.

data-url="https://link-to-your-data.csv"

The magnifier does not appear

Check that the component includes:

magnifier="on"

Also remember that the magnifier is automatically disabled on screens 1024px wide or smaller. The slider and timeline will still work on those screens.

The image looks cropped

Try using:

img-object-fit="contain"

The title or description is too small

Increase the font size:

title-font-size="2rem"
description-font-size="1.125rem"

The timeline dots are too small

Increase the circle size:

timeline-circle-size="1.25rem"

---

Recommended Starter Version

For most pages, start with this:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv">
</csis-satellite-snapshot>

For pages where image details are important and the audience is likely to use desktop screens, use this:

<csis-satellite-snapshot
  data-url="https://link-to-your-data.csv"
  magnifier="on"
  magnifier-zoom="2">
</csis-satellite-snapshot>