PostGIS
Mobile
QGIS
MapBender
GeoServer
GeoNode
GeoNetwork
Novella
Solutions
242 lines
5.1 KiB
Markdown
242 lines
5.1 KiB
Markdown
# Accordion Stories
|
|
|
|
Create narrative content with expandable sections that can include maps, datasets, and rich text.
|
|
|
|
## Overview
|
|
|
|
Accordion Stories provide a storytelling interface with expandable sections. Each section can contain rich HTML content, embedded maps, and linked datasets, making them ideal for creating interactive narratives and guided explorations.
|
|
|
|
## Creating Accordion Stories
|
|
|
|
### Access
|
|
|
|
- Navigate to Accordion Stories (`accordion_stories.php`)
|
|
- Publishers and admins can create stories
|
|
- Users can view stories they have access to
|
|
|
|
### Story Structure
|
|
|
|
Stories consist of:
|
|
- **Title**: Story title
|
|
- **Description**: Story description
|
|
- **Sections**: Multiple expandable sections
|
|
- **Category**: Optional categorization
|
|
- **Permissions**: Access control settings
|
|
|
|
## Sections
|
|
|
|
### Section Content
|
|
|
|
Each section can contain:
|
|
|
|
- **Title**: Section heading
|
|
- **HTML Content**: Rich text with formatting
|
|
- **Dataset Link**: Optional dataset association
|
|
- **Maps**: Embedded map displays
|
|
- **Media**: Images and other media
|
|
|
|
### Section Features
|
|
|
|
- **Expandable**: Click to expand/collapse
|
|
- **Rich Text**: HTML formatting support
|
|
- **Dataset Integration**: Link to datasets
|
|
- **Map Integration**: Display maps in sections
|
|
- **Ordering**: Custom section order
|
|
|
|
## Building Stories
|
|
|
|
### Step 1: Create Story
|
|
|
|
1. Navigate to Accordion Stories
|
|
2. Click "New Story"
|
|
3. Enter title and description
|
|
4. Select category (optional)
|
|
5. Set permissions
|
|
|
|
### Step 2: Add Sections
|
|
|
|
1. Open story builder
|
|
2. Add new section
|
|
3. Enter section title
|
|
4. Add HTML content
|
|
5. Optionally link dataset
|
|
6. Save section
|
|
|
|
### Step 3: Configure Content
|
|
|
|
1. Use rich text editor for content
|
|
2. Format text with HTML
|
|
3. Add images and media
|
|
4. Link to datasets
|
|
5. Embed maps if needed
|
|
|
|
### Step 4: Arrange Sections
|
|
|
|
1. Reorder sections by dragging
|
|
2. Set default expanded section
|
|
3. Organize narrative flow
|
|
4. Save story
|
|
|
|
## Content Editor
|
|
|
|
### Rich Text Editing
|
|
|
|
- **Formatting**: Bold, italic, underline
|
|
- **Headings**: Multiple heading levels
|
|
- **Lists**: Ordered and unordered lists
|
|
- **Links**: Hyperlinks to external content
|
|
- **Images**: Image embedding
|
|
- **Tables**: Table creation
|
|
|
|
### HTML Support
|
|
|
|
- Direct HTML editing
|
|
- Custom styling
|
|
- Embedded content
|
|
- Script integration (if allowed)
|
|
|
|
## Dataset Integration
|
|
|
|
### Linking Datasets
|
|
|
|
- **Dataset Selection**: Choose dataset to link
|
|
- **Automatic Display**: Map automatically displays linked dataset
|
|
- **Synchronization**: Section expansion shows linked data
|
|
- **Filtering**: Apply filters to linked datasets
|
|
|
|
### Map Display
|
|
|
|
When a section has a linked dataset:
|
|
- Map automatically displays dataset
|
|
- Section expansion shows map
|
|
- Map updates with section changes
|
|
- Interactive map features available
|
|
|
|
## Viewing Stories
|
|
|
|
### Story Viewer
|
|
|
|
- **Left Panel**: Accordion sections
|
|
- **Right Panel**: Map display (if dataset linked)
|
|
- **Navigation**: Expand/collapse sections
|
|
- **Responsive**: Mobile-friendly layout
|
|
|
|
### Interaction
|
|
|
|
- **Expand Sections**: Click to expand
|
|
- **Collapse Sections**: Click to collapse
|
|
- **Map Interaction**: Pan, zoom, query
|
|
- **Content Scrolling**: Scroll through content
|
|
|
|
## Use Cases
|
|
|
|
### Guided Tours
|
|
|
|
- Location-based tours
|
|
- Historical narratives
|
|
- Educational content
|
|
- Story maps
|
|
|
|
### Data Narratives
|
|
|
|
- Data exploration guides
|
|
- Analysis walkthroughs
|
|
- Results presentations
|
|
- Research stories
|
|
|
|
### Documentation
|
|
|
|
- Feature documentation
|
|
- User guides
|
|
- Tutorial content
|
|
- Help systems
|
|
|
|
### Presentations
|
|
|
|
- Interactive presentations
|
|
- Conference materials
|
|
- Public engagement
|
|
- Stakeholder reports
|
|
|
|
## Permissions
|
|
|
|
### Access Control
|
|
|
|
- **Public**: Accessible to all users
|
|
- **Private**: Creator only
|
|
- **Group-based**: Shared with user groups
|
|
- **Custom**: Specific user permissions
|
|
|
|
### Editing Permissions
|
|
|
|
- **Creator**: Can edit their stories
|
|
- **Admins**: Can edit all stories
|
|
- **Publishers**: Can create and edit stories
|
|
- **Users**: Can view accessible stories
|
|
|
|
## Story Management
|
|
|
|
### Editing
|
|
|
|
- Edit story metadata
|
|
- Modify sections
|
|
- Update content
|
|
- Reorder sections
|
|
- Change permissions
|
|
|
|
### Sharing
|
|
|
|
- Share via URL
|
|
- Set public/private status
|
|
- Configure group access
|
|
- Embed in other pages
|
|
|
|
### Organization
|
|
|
|
- Categorize stories
|
|
- Tag stories
|
|
- Search stories
|
|
- Filter by category
|
|
|
|
## Example Story
|
|
|
|
A typical accordion story might include:
|
|
|
|
1. **Introduction Section**: Overview and context
|
|
2. **Data Section**: Dataset description with linked map
|
|
3. **Analysis Section**: Analysis results and findings
|
|
4. **Conclusion Section**: Summary and next steps
|
|
|
|
Each section expands to reveal content and updates the map display.
|
|
|
|
## Best Practices
|
|
|
|
### Content
|
|
|
|
- Write clear, engaging content
|
|
- Use appropriate section titles
|
|
- Organize content logically
|
|
- Include visual elements
|
|
|
|
### Maps
|
|
|
|
- Link relevant datasets
|
|
- Use appropriate basemaps
|
|
- Configure map styling
|
|
- Test map interactions
|
|
|
|
### Navigation
|
|
|
|
- Set logical section order
|
|
- Use descriptive titles
|
|
- Provide clear navigation
|
|
- Test user experience
|
|
|
|
## Related Documentation
|
|
|
|
- [Dashboard](dashboard.md)
|
|
- [Web Apps](web-apps.md)
|
|
- [Dataset Viewer](../ui/dataset-viewer.md)
|
|
- [Map Viewer](../ui/map-viewer.md)
|
|
|
