# Instagram Gallery Sync Pro

[![WordPress](https://img.shields.io/badge/WordPress-5.0%2B-blue.svg)](https://wordpress.org/)
[![PHP](https://img.shields.io/badge/PHP-7.4%2B-purple.svg)](https://php.net/)
[![License](https://img.shields.io/badge/License-GPL--2.0%2B-green.svg)](https://www.gnu.org/licenses/gpl-2.0.html)

Ein leistungsstarkes WordPress-Plugin zur Synchronisierung und Anzeige von Instagram-Fotos ohne offizielle API.

**Entwickelt von [Keil & Schick](https://keil-schick.de)**

---

## 🚀 Features

- **Automatische Synchronisierung** – Holt regelmäßig neue Bilder von öffentlichen Instagram-Profilen
- **Lokale Bildspeicherung** – Bilder werden auf deinem Server gespeichert (bessere Performance)
- **5 Layout-Optionen** – Grid, Masonry, Justified, Slider, List
- **Vollständig responsive** – Separate Spalteneinstellungen für Desktop, Tablet & Mobile
- **Lightbox-Integration** – GLightbox für elegante Bildanzeige
- **Gutenberg-Block** – Nativer Block-Editor mit Live-Vorschau
- **Shortcode-Unterstützung** – Flexibel mit zahlreichen Parametern
- **6 Hover-Effekte** – Zoom, Fade, Overlay, Grayscale, Lift, None
- **Custom CSS** – Eigene Styles direkt im Admin-Bereich
- **Activity Logs** – Detaillierte Protokollierung aller Sync-Aktivitäten
- **i18n-ready** – Vorbereitet für Übersetzungen (DE/EN)

---

## 📋 Anforderungen

- WordPress 5.0 oder höher
- PHP 7.4 oder höher
- Öffentliches Instagram-Profil

---

## 📥 Installation

### Manuelle Installation

1. Lade den `instagram-gallery-sync-pro` Ordner herunter
2. Kopiere ihn nach `/wp-content/plugins/`
3. Aktiviere das Plugin unter **Plugins** im WordPress-Admin
4. Gehe zu **Instagram Gallery** in der Sidebar

### Via WordPress Admin

1. Gehe zu **Plugins → Installieren**
2. Klicke auf **Plugin hochladen**
3. Wähle die ZIP-Datei aus
4. Klicke auf **Jetzt installieren** und dann **Aktivieren**

---

## ⚙️ Konfiguration

### Grundeinrichtung

1. Navigiere zu **Instagram Gallery** im Admin-Menü
2. Gib deinen Instagram-Benutzernamen ein (ohne @)
3. Wähle die gewünschte Bildanzahl und Qualität
4. Klicke auf **Sync Now**

### Einstellungs-Tabs

| Tab | Beschreibung |
|-----|--------------|
| **Instagram** | Username, Sync-Intervall, Bildqualität |
| **Layout** | Grid-Typ, Spalten, Abstände, Hover-Effekte |
| **Anzeige** | Limit, Sortierung, Lightbox, Lazy Loading |
| **Styling** | Farben, Schriftgrößen, Custom CSS |
| **Erweitert** | Debug-Modus, Cache, Proxy, Logs |

---

## 🔧 Verwendung

### Shortcode

Einfachste Verwendung:

```
[instagram_gallery]
```

Mit Parametern:

```
[instagram_gallery layout="masonry" columns="4" limit="12" spacing="15"]
```

#### Alle Parameter

| Parameter | Werte | Standard |
|-----------|-------|----------|
| `layout` | `grid`, `masonry`, `slider`, `justified`, `list` | `grid` |
| `columns` | `1` - `6` | `3` |
| `spacing` | `0` - `50` (px) | `10` |
| `limit` | `1` - `50` | `12` |
| `order` | `newest`, `oldest`, `random` | `newest` |
| `lightbox` | `yes`, `no` | `yes` |
| `captions` | `yes`, `no` | `no` |
| `autoplay` | `true`, `false` (nur Slider) | `false` |
| `class` | CSS-Klassenname | – |

### Gutenberg Block

1. Öffne den Block-Editor
2. Suche nach "Instagram Gallery"
3. Füge den Block hinzu
4. Konfiguriere über die Sidebar-Einstellungen

### PHP Template

```php
<?php 
if (function_exists('display_instagram_gallery')) {
    display_instagram_gallery(array(
        'layout'  => 'grid',
        'columns' => 3,
        'limit'   => 9
    ));
}
?>
```

---

## 🎨 Styling

### CSS-Variablen

Das Plugin verwendet CSS Custom Properties für einfache Anpassung:

```css
:root {
    --igsp-primary: #e1306c;
    --igsp-hover: #c13584;
    --igsp-text: #ffffff;
    --igsp-font-size: 14px;
    --igsp-radius: 0px;
}
```

### CSS-Klassen

| Klasse | Beschreibung |
|--------|--------------|
| `.igsp-gallery` | Container |
| `.igsp-item` | Einzelnes Bild |
| `.igsp-image` | Bild-Element |
| `.igsp-overlay` | Caption-Overlay |
| `.igsp-follow-btn` | Instagram-Button |

---

## 🔄 Synchronisierung

### Automatisch

Das Plugin synchronisiert automatisch basierend auf dem konfigurierten Intervall:
- Alle 30 Minuten
- Stündlich
- Alle 6 Stunden
- Täglich
- Wöchentlich

### Manuell

Klicke auf **Sync Now** im Instagram-Tab der Einstellungen.

### Scraping-Methoden

Das Plugin verwendet mehrere Fallback-Methoden:

1. **Web Profile Info API** – Instagrams interne Web-API
2. **Embed Page Parsing** – Parst die Embed-Seiten
3. **Profile Page Parsing** – HTML-Analyse mit mehreren Strategien

---

## ⚠️ Wichtige Hinweise

> **Hinweis:** Instagram blockiert Scraping aktiv. Das Plugin enthält Anti-Blocking-Maßnahmen, aber 100% Zuverlässigkeit kann nicht garantiert werden.

### Best Practices

- Verwende **lange Sync-Intervalle** (6h+)
- Aktiviere **lokale Bildspeicherung**
- Nutze **Caching** für bessere Performance
- Halte die **Bildanzahl** moderat (12-24)

### Problembehandlung

| Problem | Lösung |
|---------|--------|
| Keine Bilder | Prüfe ob Profil öffentlich ist |
| Rate Limiting | Erhöhe Sync-Intervall |
| Timeout | Erhöhe Request-Timeout in Erweitert |
| Parsing-Fehler | Prüfe Logs, warte und versuche erneut |

---

## 🗄️ Datenbank

Das Plugin erstellt zwei Tabellen:

- `wp_instagram_gallery_posts` – Gespeicherte Bilder
- `wp_instagram_gallery_log` – Aktivitätsprotokolle

Bei Deinstallation werden alle Daten vollständig entfernt.

---

## 📁 Dateistruktur

```
instagram-gallery-sync-pro/
├── instagram-gallery-sync-pro.php    # Hauptdatei
├── uninstall.php                     # Deinstallations-Routine
├── includes/
│   ├── class-admin.php               # Admin-Handler
│   ├── class-cron.php                # Cron-Jobs
│   ├── class-database.php            # Datenbank-Operationen
│   ├── class-gutenberg-block.php     # Block-Editor
│   ├── class-image-handler.php       # Bild-Download & -Verarbeitung
│   ├── class-logger.php              # Logging-System
│   ├── class-scraper.php             # Instagram-Scraper
│   └── class-shortcode.php           # Shortcode-Handler
├── admin/
│   ├── css/admin-style.css
│   ├── js/admin-script.js
│   ├── js/ajax-sync.js
│   └── views/                        # Admin-Templates
├── public/
│   ├── css/                          # Frontend-Styles
│   └── js/                           # Frontend-Scripts + Libs
└── languages/                        # Übersetzungsdateien
```

---

## 🔐 Sicherheit

- Prepared Statements für alle DB-Queries
- Nonce-Verifizierung für AJAX-Requests
- Capability-Checks (`manage_options`)
- Input-Sanitization für alle Benutzereingaben
- Output-Escaping mit `esc_html()`, `esc_attr()`, etc.

---

## 📝 Changelog

### 1.0.0 (2026-01-22)
- Erste Veröffentlichung
- 5 Layout-Typen (Grid, Masonry, Justified, Slider, List)
- Gutenberg Block mit Live-Vorschau
- Shortcode mit allen Parametern
- Admin-Bereich mit 5 Tabs
- Multi-Methoden Scraping Engine
- Lokale Bildspeicherung mit Thumbnails
- Activity Logging System

---

## 📄 Lizenz

GPL-2.0-or-later © [Keil & Schick](https://keil-schick.de)

---

## 🆘 Support

Für Fragen und Support besuche: [https://keil-schick.de](https://keil-schick.de)

---

*Entwickelt mit ❤️ in Deutschland*