joel/Hochzeit-Gaestebuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1

Browse Source
This commit is contained in:
joel
2026-04-10 11:00:13 +02:00
parent 19e4feb36f
commit 88147231f0
3 changed files with 303 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@@ -1,4 +1,36 @@
Noch zu machen:
- Max. Anzahl upload von 15 Bildern per upload
- Benutzer darf seine eigenen Bilder "löschen" werden aber nur in einen anderen Ordner verschoben
- Bild Kompression bei der vorschau, um dir ladegeschwindigkeit zu verschnellern und das netzwerk nicht zu überlasten.
# Fotobox Projekt-Updates
Dieses Dokument beschreibt die vorgenommenen technischen Änderungen an der `index.php`.
## v1.1 - Fix für gedrehte Bilder (Aktuell)
### Problembeschreibung
Bilder, die mit dem Smartphone im Hochformat (oder quer) aufgenommen wurden, erschienen in der Galerie-Vorschau (Thumbnails) oft um 90° nach links gedreht.
### Technische Lösung
Das Problem lag in der Thumbnail-Generierung mittels PHP GD. Smartphones speichern die korrekte Ausrichtung oft nur in den EXIF-Metadaten, die PHP standardmäßig beim Skalieren ignoriert hat.
* **Änderung**: Die Funktion `createThumbnail()` wurde erweitert.
* Sie nutzt nun `exif_read_data()` (falls auf dem Server verfügbar), um den `Orientation`-Tag aus JPEGs auszulesen.
* Basierend auf diesem Tag wird das Bild mittels `imagerotate()` korrekt gedreht, *bevor* das Thumbnail resampled und gespeichert wird.
*Hinweis:* Diese Änderung betrifft nur Bilder, die *nach* diesem Update hochgeladen werden. Um alte, falsch gedrehte Thumbnails zu korrigieren, muss der Inhalt des Ordners `/thumbnails/` auf dem Server gelöscht werden, damit sie neu generiert werden.
---
## v1.0 - Basis-Funktionen & Performance
Initiales Update mit Kernfunktionalitäten.
### 1. Upload-Limitierung
* Maximal **15 Bilder** pro Upload-Vorgang möglich.
* Validierung erfolgt sowohl im Frontend (JS) als auch Backend (PHP).
### 2. Bild-Kompression (Thumbnails)
* Automatische Erstellung von optimierten Vorschaubildern im Ordner `/thumbnails/`.
* Galerie lädt Thumbnails für schnellere Ladezeiten; Originale werden im Ordner `/uploads/` gespeichert und erst in der Vollansicht geladen.
### 3. Benutzerbasierte Löschfunktion
* Über `LocalStorage` merkt sich der Browser, welche Bilder der Nutzer hochgeladen hat.
* Lösch-Button erscheint in der Lightbox nur für eigene Bilder.
* Bilder werden nicht gelöscht, sondern in `/deleted_uploads/` verschoben.

6
deploy.php
View File

@@ -1,6 +0,0 @@
<?php
// Einfaches Deployment Skript
echo "Starte Pull... \n";
$output = shell_exec('git pull origin main 2>&1');
echo $output;
?>

311
index.php
View File

@@ -1,6 +1,13 @@
<?php
$brautpaar_namen = "Damian & Melissa";
$upload_verzeichnis = __DIR__ . '/uploads/';
$thumbnail_verzeichnis = __DIR__ . '/thumbnails/';
$deleted_verzeichnis = __DIR__ . '/deleted_uploads/';
// Sicherstellen, dass alle Verzeichnisse existieren
if (!is_dir($upload_verzeichnis)) mkdir($upload_verzeichnis, 0777, true);
if (!is_dir($thumbnail_verzeichnis)) mkdir($thumbnail_verzeichnis, 0777, true);
if (!is_dir($deleted_verzeichnis)) mkdir($deleted_verzeichnis, 0777, true);
function get_image_count($dir) {
if (!is_dir($dir)) return 0;
@@ -10,9 +17,146 @@ function get_image_count($dir) {
}));
}
// Funktion zum Erstellen eines komprimierten Vorschaubildes inkl. EXIF-Rotationskorrektur
function createThumbnail($sourcePath, $destPath, $maxWidth = 400, $maxHeight = 400) {
if (!function_exists('imagecreatefromjpeg')) return false; // Fallback, falls GD-Lib fehlt
$info = getimagesize($sourcePath);
if (!$info) return false;
$mime = $info['mime'];
$sourceImage = null;
// Bild laden basierend auf MIME-Typ
switch ($mime) {
case 'image/jpeg': $sourceImage = imagecreatefromjpeg($sourcePath); break;
case 'image/png': $sourceImage = imagecreatefrompng($sourcePath); break;
case 'image/gif': $sourceImage = imagecreatefromgif($sourcePath); break;
case 'image/webp': $sourceImage = imagecreatefromwebp($sourcePath); break;
default: return false;
}
if (!$sourceImage) return false;
// --- NEU: EXIF Orientierung korrigieren (nur für JPEG) ---
if ($mime == 'image/jpeg' && function_exists('exif_read_data')) {
@$exif = exif_read_data($sourcePath); // @ unterdrückt Warnungen, falls keine EXIF-Daten vorhanden
if (!empty($exif['Orientation'])) {
switch ($exif['Orientation']) {
case 3: // 180 Grad drehen
$sourceImage = imagerotate($sourceImage, 180, 0);
break;
case 6: // 90 Grad nach rechts drehen (war vermutlich dein Problem)
$sourceImage = imagerotate($sourceImage, -90, 0);
break;
case 8: // 90 Grad nach links drehen
$sourceImage = imagerotate($sourceImage, 90, 0);
break;
}
}
}
// --------------------------------------------------------
// Dimensionen NACH möglicher Drehung holen
$srcWidth = imagesx($sourceImage);
$srcHeight = imagesy($sourceImage);
// Proportionale Skalierung berechnen
$ratio = min($maxWidth / $srcWidth, $maxHeight / $srcHeight);
if ($ratio >= 1) {
$newWidth = $srcWidth;
$newHeight = $srcHeight;
} else {
$newWidth = (int)($srcWidth * $ratio);
$newHeight = (int)($srcHeight * $ratio);
}
$destImage = imagecreatetruecolor($newWidth, $newHeight);
// Transparenz für PNG und WEBP beibehalten
if ($mime == 'image/png' || $mime == 'image/webp') {
imagealphablending($destImage, false);
imagesavealpha($destImage, true);
$transparent = imagecolorallocatealpha($destImage, 255, 255, 255, 127);
imagefilledrectangle($destImage, 0, 0, $newWidth, $newHeight, $transparent);
}
imagecopyresampled($destImage, $sourceImage, 0, 0, 0, 0, $newWidth, $newHeight, $srcWidth, $srcHeight);
// Thumbnail speichern
switch ($mime) {
case 'image/jpeg': imagejpeg($destImage, $destPath, 80); break;
case 'image/png': imagepng($destImage, $destPath, 8); break;
case 'image/gif': imagegif($destImage, $destPath); break;
case 'image/webp': imagewebp($destImage, $destPath, 80); break;
}
imagedestroy($sourceImage);
imagedestroy($destImage);
return true;
}
// -- LÖSCHEN LOGIK --
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'delete') {
$fileToDelete = basename($_POST['filename']);
if (is_file($upload_verzeichnis . $fileToDelete)) {
// Verschiebe Originalbild
rename($upload_verzeichnis . $fileToDelete, $deleted_verzeichnis . $fileToDelete);
// Verschiebe Thumbnail, falls vorhanden
if (is_file($thumbnail_verzeichnis . $fileToDelete)) {
rename($thumbnail_verzeichnis . $fileToDelete, $deleted_verzeichnis . 'thumb_' . $fileToDelete);
}
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'error' => 'Datei nicht gefunden.']);
}
exit;
}
// -- UPLOAD LOGIK --
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['photos'])) {
// Limit auf 15 Bilder pro Upload serverseitig prüfen
if (count($_FILES['photos']['tmp_name']) > 15) {
echo json_encode(['success' => false, 'error' => 'Maximal 15 Bilder auf einmal erlaubt.']);
exit;
}
$cleanName = 'Foto';
$uploadedCount = 0;
$uploadedFiles = []; // Speichert die Namen für das LocalStorage des Nutzers
foreach ($_FILES['photos']['tmp_name'] as $key => $tmpName) {
if ($tmpName != "") {
$extension = strtolower(pathinfo($_FILES['photos']['name'][$key], PATHINFO_EXTENSION));
$newName = $cleanName . '_' . time() . '_' . substr(md5(uniqid()), 0, 6) . '.' . $extension;
$destination = $upload_verzeichnis . $newName;
$thumbDestination = $thumbnail_verzeichnis . $newName;
if (move_uploaded_file($tmpName, $destination)) {
$uploadedCount++;
$uploadedFiles[] = $newName;
// Erstelle Thumbnail (jetzt mit Rotationskorrektur)
createThumbnail($destination, $thumbDestination);
}
}
}
echo json_encode([
'success' => true,
'count' => $uploadedCount,
'newTotal' => get_image_count($upload_verzeichnis),
'uploadedFiles' => $uploadedFiles
]);
exit;
}
$current_count = get_image_count($upload_verzeichnis);
// Bilder für die Galerie laden (nur die neuesten 30, um Abstürze am Handy zu vermeiden)
// Bilder für die Galerie laden (nur die neuesten 30)
$gallery_images = [];
if (is_dir($upload_verzeichnis)) {
$files = scandir($upload_verzeichnis);
@@ -25,35 +169,8 @@ if (is_dir($upload_verzeichnis)) {
// ZUVERLÄSSIGE SORTIERUNG: Alphabetisch absteigend, da Dateiname = Zeitstempel
rsort($valid_files);
$gallery_images = array_slice($valid_files, 0, 30);
}
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
$cleanName = 'Foto';
if (!is_dir($upload_verzeichnis)) {
mkdir($upload_verzeichnis, 0777, true);
}
$uploadedCount = 0;
foreach ($_FILES['photos']['tmp_name'] as $key => $tmpName) {
if ($tmpName != "") {
$extension = strtolower(pathinfo($_FILES['photos']['name'][$key], PATHINFO_EXTENSION));
$newName = $cleanName . '_' . time() . '_' . substr(md5(uniqid()), 0, 6) . '.' . $extension;
if (move_uploaded_file($tmpName, $upload_verzeichnis . $newName)) {
$uploadedCount++;
}
}
}
echo json_encode([
'success' => true,
'count' => $uploadedCount,
'newTotal' => get_image_count($upload_verzeichnis)
]);
exit;
}
?>
<!DOCTYPE html>
@@ -65,7 +182,6 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
/* Farbpalette */
--dark-green: #484D46;
--olive-green: #5F6251;
--brown: #856856;
@@ -73,6 +189,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
--beige: #BEB7AD;
--bg-page: #FAF9F7;
--white: #ffffff;
--red: #d9534f;
}
* { box-sizing: border-box; }
@@ -84,7 +201,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start; /* Wichtig für die Galerie */
align-items: flex-start;
min-height: 100vh;
padding: 20px;
transition: align-items 0.3s ease;
@@ -145,7 +262,6 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
opacity: 0.85;
}
/* Tabs Navigation */
.tabs {
display: flex;
justify-content: center;
@@ -174,7 +290,6 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
border-color: var(--olive-green);
}
/* Upload Bereich */
.form-group { margin-bottom: 25px; text-align: left; }
.upload-area {
@@ -198,7 +313,6 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
opacity: 0.7;
}
/* Progress Bar */
#progress-wrapper { display: none; margin-top: 20px; text-align: left; }
.progress-bar-container {
width: 100%; height: 6px; background: var(--beige);
@@ -206,7 +320,6 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
}
#progress-bar { height: 100%; background: var(--olive-green); width: 0%; transition: width 0.2s; }
/* Galerie Bereich */
#gallery-section { display: none; }
.gallery-grid {
display: grid;
@@ -233,7 +346,6 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
padding: 20px;
}
/* Lightbox (Vollbild) */
.lightbox {
display: none;
position: fixed;
@@ -245,15 +357,17 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
flex-direction: column;
}
.lightbox.show { display: flex; opacity: 1; }
.lightbox img {
max-width: 100%;
max-height: 90vh;
max-height: 80vh;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
margin-bottom: 20px;
}
.close-lightbox {
@@ -266,7 +380,22 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
line-height: 1;
}
/* Success Screen */
.delete-btn {
background: var(--red);
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
display: none; /* Wird via JS angezeigt */
transition: background 0.3s;
}
.delete-btn:hover { background: #c9302c; }
.success-screen { display: none; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.heart { font-size: 2.5rem; margin: 20px 0; color: var(--brown); }
@@ -304,7 +433,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
<div class="form-group">
<div class="upload-area" id="drop-area" onclick="document.getElementById('photos').click()">
<span style="display:block; margin-bottom: 10px; font-size: 2rem;">📸</span>
<span>Klicken zum Auswählen<br>oder Kamera öffnen</span>
<span>Klicken zum Auswählen<br>oder Kamera öffnen<br><small>(Max. 15 Bilder)</small></span>
<input type="file" id="photos" name="photos[]" accept="image/*" multiple style="display:none">
</div>
</div>
@@ -322,7 +451,18 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
<div class="gallery-grid">
<?php if (count($gallery_images) > 0): ?>
<?php foreach ($gallery_images as $img): ?>
<img src="uploads/<?php echo urlencode($img); ?>" class="gallery-item" loading="lazy" onclick="openLightbox(this.src)" alt="Hochzeitsfoto">
<?php
// Prüfen, ob Thumbnail existiert, sonst Original nehmen
$thumbSrc = is_file($thumbnail_verzeichnis . $img) ? "thumbnails/" . urlencode($img) : "uploads/" . urlencode($img);
$fullSrc = "uploads/" . urlencode($img);
?>
<img src="<?php echo $thumbSrc; ?>"
data-full="<?php echo $fullSrc; ?>"
data-filename="<?php echo htmlspecialchars($img); ?>"
class="gallery-item"
loading="lazy"
onclick="openLightbox(this.dataset.full, this.dataset.filename)"
alt="Hochzeitsfoto">
<?php endforeach; ?>
<?php else: ?>
<div class="empty-gallery">Noch keine Bilder hochgeladen. Sei der oder die Erste!</div>
@@ -342,6 +482,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
<span class="close-lightbox" onclick="closeLightbox(event)">&times;</span>
<img id="lightbox-img" src="" alt="Vollbild">
<button id="lightbox-delete-btn" class="delete-btn">Bild löschen</button>
</div>
<script>
@@ -357,6 +498,13 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
const files = fileInput.files;
if(files.length === 0) return;
// Validierung: Max 15 Bilder
if (files.length > 15) {
alert("Bitte wähle maximal 15 Bilder auf einmal aus.");
fileInput.value = ''; // Input zurücksetzen
return;
}
dropArea.classList.add('uploading');
dropArea.innerHTML = `<span style="display:block; margin-bottom: 10px; font-size: 2rem;">⏳</span><span>Wird verarbeitet...</span>`;
progressWrapper.style.display = 'block';
@@ -379,27 +527,43 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
xhr.onload = () => {
if (xhr.status === 200) {
try {
const resp = JSON.parse(xhr.responseText);
if(resp.success) {
// Speicher hochgeladene Dateien im LocalStorage
let myUploads = JSON.parse(localStorage.getItem('myUploads') || '[]');
myUploads = myUploads.concat(resp.uploadedFiles);
localStorage.setItem('myUploads', JSON.stringify(myUploads));
counterDisplay.innerText = resp.newTotal;
document.getElementById('main-ui').style.display = 'none';
document.getElementById('success-ui').style.display = 'block';
// FIX: Zentriert den Success-Screen wieder perfekt in der Mitte!
document.body.style.alignItems = 'center';
document.querySelector('.container').style.marginTop = '0';
} else {
alert(resp.error || "Fehler beim Upload.");
resetUploadArea();
}
} catch(e) {
alert("Fehler beim Verarbeiten der Serverantwort.");
resetUploadArea();
}
} else {
alert("Fehler beim Upload. Bitte prüfe die Dateigröße.");
dropArea.classList.remove('uploading');
dropArea.innerHTML = `<span style="display:block; margin-bottom: 10px; font-size: 2rem;">📸</span><span>Klicken zum Auswählen<br>oder Kamera öffnen</span>`;
progressWrapper.style.display = 'none';
fileInput.value = '';
alert("Ein Serverfehler ist aufgetreten.");
resetUploadArea();
}
};
xhr.send(formData);
};
function resetUploadArea() {
dropArea.classList.remove('uploading');
dropArea.innerHTML = `<span style="display:block; margin-bottom: 10px; font-size: 2rem;">📸</span><span>Klicken zum Auswählen<br>oder Kamera öffnen<br><small>(Max. 15 Bilder)</small></span>`;
progressWrapper.style.display = 'none';
fileInput.value = '';
}
// --- Tabs Navigation ---
function switchTab(tab) {
document.getElementById('upload-section').style.display = tab === 'upload' ? 'block' : 'none';
@@ -409,24 +573,67 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['photos'])) {
document.getElementById('btn-gallery').classList.toggle('active', tab === 'gallery');
}
// --- Lightbox Logik ---
// --- Lightbox & Löschen Logik ---
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const deleteBtn = document.getElementById('lightbox-delete-btn');
function openLightbox(imageSrc) {
lightboxImg.src = imageSrc;
function openLightbox(imageFullSrc, filename) {
lightboxImg.src = imageFullSrc;
lightbox.classList.add('show');
document.body.style.overflow = 'hidden'; // Verhindert scrollen im Hintergrund
document.body.style.overflow = 'hidden';
// Prüfen, ob Bild dem Nutzer gehört
const myUploads = JSON.parse(localStorage.getItem('myUploads') || '[]');
if (myUploads.includes(filename)) {
deleteBtn.style.display = 'inline-block';
deleteBtn.onclick = (e) => {
e.stopPropagation();
deleteImage(filename);
};
} else {
deleteBtn.style.display = 'none';
}
}
function closeLightbox(e) {
// Schließt nur, wenn man aufs X oder den dunklen Hintergrund klickt (nicht aufs Bild selbst)
if (e.target === lightbox || e.target.className === 'close-lightbox') {
lightbox.classList.remove('show');
document.body.style.overflow = 'auto'; // Scrollen wieder erlauben
setTimeout(() => { lightboxImg.src = ''; }, 300); // Bild leeren nach Animation
document.body.style.overflow = 'auto';
setTimeout(() => { lightboxImg.src = ''; }, 300);
}
}
function deleteImage(filename) {
if (!confirm("Möchtest du dein Bild wirklich entfernen?")) return;
const formData = new FormData();
formData.append('action', 'delete');
formData.append('filename', filename);
fetch('', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Aus dem LocalStorage entfernen
let myUploads = JSON.parse(localStorage.getItem('myUploads') || '[]');
myUploads = myUploads.filter(f => f !== filename);
localStorage.setItem('myUploads', JSON.stringify(myUploads));
// Seite neuladen um die Galerie zu aktualisieren
location.reload();
} else {
alert(data.error || "Fehler beim Löschen.");
}
})
.catch(error => {
console.error('Error:', error);
alert("Netzwerkfehler beim Löschen.");
});
}
</script>
</body>