📸 Gallery Photo Upload Instructions

Step-by-step guide for adding real project photos to the SHIRWAN IT About page gallery.

1 Create the folder structure

Create a folder called gallery/ in the same directory as about.html. Put all your project photos inside it.

your-website/ ├── about.html ├── index.html ├── style.css ├── app.js ├── gallery-uploads.html ← this file └── gallery/ ← create this folder ├── solar-1.jpg ├── solar-2.jpg ├── solar-3.jpg ├── internet-1.jpg ├── internet-2.jpg ├── internet-3.jpg ├── camera-1.jpg ├── camera-2.jpg └── camera-3.jpg

Tip: Use JPEG (.jpg) for photos — they're smallest. PNG is fine too but larger. Aim for 1200–2000px wide, under 500KB each for fast loading.

2 Recommended photo content per category

File name	Category	What to photograph
`solar-1.jpg`	☀️ Solar	Rooftop panels installed on a house — wide shot from outside
`solar-2.jpg`	☀️ Solar	Inverter + battery setup on a wall indoors
`solar-3.jpg`	☀️ Solar	Team installing panels, or close-up of panel array
`internet-1.jpg`	🌐 Internet	Access point or antenna mounted on roof / pole
`internet-2.jpg`	🌐 Internet	Server rack / patch panel / cabling work
`internet-3.jpg`	🌐 Internet	WiFi router or switch installation in office
`camera-1.jpg`	📷 Camera	Dome or bullet camera mounted on wall/ceiling
`camera-2.jpg`	📷 Camera	NVR monitor showing camera feeds
`camera-3.jpg`	📷 Camera	PTZ or outdoor camera on a pole / corner bracket

⚠️ Privacy: Blur or crop out faces, ID cards, license plates or anything personally identifiable before uploading photos to a public website.

3 Replace placeholder cards in about.html

Open about.html and find the GALLERY GRID section (search for id="galleryGrid"). Each placeholder looks like this — delete it and replace with the template below.

DELETE this placeholder block:

<!-- DELETE THIS -->
<div class="gallery-placeholder" data-cat="solar">
  ...
</div>

REPLACE with this real photo block:

<!-- ☀️ Solar photo -->
<div class="gallery-item" data-cat="solar">
  <img
    src="gallery/solar-1.jpg"
    alt="Solar panel installation — Erbil"
    loading="lazy"
  />
  <div class="gi-overlay">
    <div>
      <div class="gi-cat solar">☀️ Solar</div>
      <div class="gi-label">Rooftop Solar — Erbil</div>
    </div>
  </div>
</div>

4 Ready-to-paste templates for all 9 photos

Copy the entire block below and paste it inside <div class="gallery-grid" id="galleryGrid">, replacing all the placeholders.

<!-- ═══════════════════════════════════════════════════════
     SHIRWAN IT — Gallery items
     Replace each src with your real photo path
     ═══════════════════════════════════════════════════════ -->

<!-- ☀️ SOLAR 1 -->
<div class="gallery-item" data-cat="solar">
  <img src="gallery/solar-1.jpg" alt="Solar panel installation" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat solar">☀️ Solar</div>
    <div class="gi-label">Rooftop Solar — Erbil</div>
  </div></div>
</div>

<!-- ☀️ SOLAR 2 -->
<div class="gallery-item" data-cat="solar">
  <img src="gallery/solar-2.jpg" alt="Battery and inverter setup" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat solar">☀️ Solar</div>
    <div class="gi-label">Battery & Inverter — Sulaymaniyah</div>
  </div></div>
</div>

<!-- ☀️ SOLAR 3 -->
<div class="gallery-item" data-cat="solar">
  <img src="gallery/solar-3.jpg" alt="Solar panel array" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat solar">☀️ Solar</div>
    <div class="gi-label">Solar Array — Duhok</div>
  </div></div>
</div>

<!-- 🌐 INTERNET 1 -->
<div class="gallery-item" data-cat="internet">
  <img src="gallery/internet-1.jpg" alt="Access point installation" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat internet">🌐 Internet</div>
    <div class="gi-label">Wireless Access Point — Erbil</div>
  </div></div>
</div>

<!-- 🌐 INTERNET 2 -->
<div class="gallery-item" data-cat="internet">
  <img src="gallery/internet-2.jpg" alt="Server rack and cabling" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat internet">🌐 Internet</div>
    <div class="gi-label">Server Room & Cabling — Sulaymaniyah</div>
  </div></div>
</div>

<!-- 🌐 INTERNET 3 -->
<div class="gallery-item" data-cat="internet">
  <img src="gallery/internet-3.jpg" alt="WiFi router setup" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat internet">🌐 Internet</div>
    <div class="gi-label">Office Network Setup — Duhok</div>
  </div></div>
</div>

<!-- 📷 CAMERA 1 -->
<div class="gallery-item" data-cat="camera">
  <img src="gallery/camera-1.jpg" alt="CCTV dome camera" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat camera">📷 Camera</div>
    <div class="gi-label">CCTV Installation — Erbil Shop</div>
  </div></div>
</div>

<!-- 📷 CAMERA 2 -->
<div class="gallery-item" data-cat="camera">
  <img src="gallery/camera-2.jpg" alt="NVR monitor setup" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat camera">📷 Camera</div>
    <div class="gi-label">NVR Monitor Setup — Duhok</div>
  </div></div>
</div>

<!-- 📷 CAMERA 3 -->
<div class="gallery-item" data-cat="camera">
  <img src="gallery/camera-3.jpg" alt="Outdoor PTZ camera" loading="lazy"/>
  <div class="gi-overlay"><div>
    <div class="gi-cat camera">📷 Camera</div>
    <div class="gi-label">Outdoor PTZ — Sulaymaniyah</div>
  </div></div>
</div>

5 Adding more photos (beyond the 9 defaults)

Just copy any gallery-item block and change the src, alt, data-cat and label text. The masonry layout handles any number automatically.

Valid data-cat values:

data-cat	Filter tab it appears under	gi-cat class to use
`solar`	Solar	`gi-cat solar`
`internet`	Internet	`gi-cat internet`
`camera`	Cameras	`gi-cat camera`

Tip: Mix portrait and landscape photos — the masonry layout looks best with varied heights. Aim for 60% landscape, 40% portrait.

6 Photo optimization (important for fast loading)

Large photos slow down the page. Compress them before uploading:

Tool	How to use	Target size
squoosh.app	Free website — drag & drop photo, download compressed	Under 200KB per photo
TinyPNG.com	Free website — upload up to 20 photos at once	Reduces by 60–80%
Windows Photos app	Open photo → ⋯ → Resize → Medium or Small	Approx 800KB→150KB

Recommended size: 1400px wide maximum, saved as JPEG at 80% quality. This gives sharp photos on all screens while loading quickly.

Built by BlackCode Soft Company LTD for SHIRWAN IT · Kurdistan Region, Iraq