Skip to content

IMAGE_GUIDE.md

Latest commit

 

History

History
150 lines (119 loc) · 3.79 KB

IMAGE_GUIDE.md

File metadata and controls

150 lines (119 loc) · 3.79 KB

Image Management Guide for ExploitX Album

Overview

This guide explains how to manage images for the ExploitX Memory Album website.

Files Created

1. images-config.json

Central configuration file for all images including:

  • Group photo for the home page
  • Default fallback images for team members
  • Default fallback images for events

How to Add/Update Images

Group Photo (Home Page)

  1. Upload your group photo to Google Drive
  2. Get the shareable link (make sure it's set to "Anyone with the link can view")
  3. Copy the file ID from the link. For example:
    • Link: https://drive.google.com/file/d/1ABC123XYZ456/view?usp=sharing
    • File ID: 1ABC123XYZ456
  4. Update images-config.json: 
    "groupPhoto": {
  "url": "https://drive.google.com/file/d/YOUR_FILE_ID/view",
  "alt": "ExploitX Team Group Photo",
  "description": "Our amazing team working together"
}

Team Member Photos

Team member photos are stored in members.json. Each member has a photo field:

{
  "id": 1,
  "Name": "John Doe",
  "Role": "Developer",
  "Tech-Role": "Full Stack",
  "Description": "...",
  "photo": "https://drive.google.com/file/d/YOUR_FILE_ID/view?usp=drive_link",
  "linkedin": "...",
  "github": "...",
  "portfolio": "..."
}

Steps:

  1. Upload member photo to Google Drive
  2. Get shareable link
  3. Add to the photo field in members.json

Event Photos

Event photos are stored in events.json. Each event has a photo field:

{
  "id": 1,
  "title": "Event Name",
  "date": "March 20, 2025",
  "icon": "fas fa-flag",
  "description": "Event description",
  "type": "CTF",
  "mode": "Online",
  "photo": "https://drive.google.com/file/d/YOUR_FILE_ID/view"
}

Steps:

  1. Upload event photo to Google Drive
  2. Get shareable link
  3. Add to the photo field in events.json

Alternative: You can also use direct image URLs:

"photo": "https://example.com/image.jpg"

Fallback Images

If no photo is provided for a member or event, the system will use default images from images-config.json:

  • Team Members: Based on their role (network, cloud, web, linux, security)
  • Events: Based on event type (ctf, workshop, bootcamp, hackathon)

You can update these defaults in images-config.json under:

  • teamDefaultImages
  • eventDefaultImages

Image Optimization Tips

  1. Recommended Sizes:

    • Group Photo: 1200x600px or larger
    • Member Photos: 500x500px (square)
    • Event Photos: 800x600px (landscape)

  2. Format: JPEG or PNG

  3. File Size: Keep under 2MB for faster loading

  4. Quality: Medium to high quality (70-85%)

Google Drive Setup

  1. Upload image to Google Drive
  2. Right-click → Share → Get link
  3. Change to "Anyone with the link can view"
  4. Copy the link
  5. Extract the file ID (the long string between /d/ and /view)
  6. Use in your JSON files

Troubleshooting

Image not showing:

  • Check if the Google Drive link is public
  • Verify the file ID is correct
  • Check browser console for errors

Image loads slowly:

  • Optimize image size before uploading
  • Use appropriate dimensions
  • Consider using a CDN for production

Example Complete Setup

images-config.json

{
  "groupPhoto": {
    "url": "https://drive.google.com/file/d/1nfnPhP2BznNN7513ARdeDDlpUujprkJx/view",
    "alt": "ExploitX Team 2025",
    "description": "Our team at the annual hackathon"
  },
  "teamDefaultImages": {
    "network": "https://images.unsplash.com/photo-1558494949-ef010cbdcc31"
  },
  "eventDefaultImages": {
    "ctf": "https://images.unsplash.com/photo-1550751827-4bd374c3f58b"
  }
}

Best Practices

  1. Always use high-quality images
  2. Maintain consistent aspect ratios
  3. Test images on mobile devices
  4. Keep backup copies of original images
  5. Document image sources for copyright compliance