Skip to main content

Image Integration Guide for Nimbuz Documentation

This guide explains how to add images from the SharePoint document to the Nimbuz onboarding documentation.

Image Directory Structure​

Images should be placed in:

  • /static/img/onboarding/ - For images used in onboarding documentation
  • /docs/onboarding/img/ - For local images specific to onboarding sections

How to Add Images​

1. Save Images from SharePoint​

  1. Open the SharePoint document
  2. Right-click on each image
  3. Save images with descriptive names like:
    • nimbuz-homepage.png
    • signup-individual.png
    • signup-business.png
    • dashboard-overview.png
    • project-creation.png
    • deployment-form.png
    • etc.

2. Image Naming Convention​

Use this naming pattern:

  • {section}-{description}.png
  • Example: account-setup-individual-signup.png

3. Adding Images to Documentation​

Use this markdown syntax:

![Alt text description](/img/onboarding/image-name.png)

Suggested Image Placements​

Account Setup Page​

  • Homepage screenshot after "Navigate to https://nimbuz.tech/"
  • Individual signup form
  • Business signup form
  • Dashboard after successful login

Project Management Page​

  • Projects page overview
  • Create project form
  • Project preferences screen
  • Environment creation form

Deployment Guide Page​

  • Deployments page
  • Deployment type selection
  • GitHub/GitLab connection screens
  • Deployment configuration form
  • Instance type selection

Tools and Services Page​

  • Tools overview page
  • CloudBeaver installation form
  • PostgreSQL setup form
  • MySQL configuration
  • MongoDB setup

Dashboard Monitoring Page​

  • Main dashboard screenshot
  • Cost tracking widgets
  • Deployment status overview
  • Metrics and analytics views

Image Optimization​

  • Use PNG format for screenshots
  • Compress images to reduce file size
  • Recommended max width: 800-1000px
  • Add alt text for accessibility

Next Steps​

  1. Extract images from SharePoint document
  2. Save them to /static/img/onboarding/
  3. Update documentation files with image references
  4. Test image display in development server