image

EVENTS

A Source PLUS project

Showcasing the use of various third-party stacks with Source 'micro' framework.

A fully functional events listing page using Feeds stack from Weaver's Space.

Demos

image

Image grid

Event listing displayed as a grid of images

image

List

Event details presented in a visually appealing list

image

Sliders

This demo showcases numerous slider layouts to present the event listings built using Splider 2 stack.

image

Timeline

A long flowing and linked timeline that is split by year

image

Ticket style

Event listings in the style of physical tickets!

Notes

Project details

  • The demos all have a Feeds stack that is connected to the same csv data source.
  • The same setup in these demos could be achieved with an alternative Feeds data source types (database, json, rss etc).
  • Only future events (today or later) are shown. Old events are automatically filtered out of the Feed.
  • A single 'details' page has been created. Every event listed in the demos uses this same page to display additional detail. The details page is filtered based on a value passed in to the page via the url
  • Some components are conditionally shown based on a value set in the csv data. e.g. the 'Book now' / 'Sold out' buttons and the 'Additional information' FAQ item on the details page.

Feeds integration

Source
All 3 of Source's grid stacks (Grid, Grid Plus and Grid Plus Pro) have been set up to support Feeds stack. This means that you can drop Feeds stack into any grid (and then drop a grid item stack inside it). Feeds will then use that grid item as a template and repeat it for every record in the feed.

Splider 2
Feeds is also directly supported in Splider 2 stack. This allows you to have Feeds generate a new slide for every record in the feed.

Stacks used

Required stacks:
All of the demos on this site showcase the use of Feeds stack within a Source project. As such, to work with the project you will need Feeds, Source and the Source Addon pack.

Optional stacks:

  • Splider 2 is used for the slider layouts
  • FAQ Toggle stack is used in the Event details page
  • Animate is used in the Animated Timeline example