fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Instagram-Grid auf natives Portrait-Format 4:5 (1080x1350) umgestellt — Crop auf 640x800 statt Quadrat

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 21:29:36 +02:00
parent 181f52fc73
commit fc066703e6
3 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/instagram-feed.php
View File

@@ -23,7 +23,7 @@ $maxPosts = (int) config('instagram.max_posts', 9);
<a class="instagram__link" href="<?= e($post['url']) ?>" rel="noopener"> <a class="instagram__link" href="<?= e($post['url']) ?>" rel="noopener">
<img src="<?= e(asset($post['image'])) ?>" <img src="<?= e(asset($post['image'])) ?>"
alt="<?= e($post['alt'] ?? 'Instagram-Beitrag des TSV 08 Kulmbach') ?>" alt="<?= e($post['alt'] ?? 'Instagram-Beitrag des TSV 08 Kulmbach') ?>"
width="640" height="640" loading="lazy" decoding="async"> width="640" height="800" loading="lazy" decoding="async">
<?php if (!empty($post['is_video'])): ?> <?php if (!empty($post['is_video'])): ?>
<span class="instagram__badge" aria-hidden="true">▶</span> <span class="instagram__badge" aria-hidden="true">▶</span>
<?php endif; ?> <?php endif; ?>

15
bin/instagram-sync.php
View File

@@ -146,7 +146,7 @@ if ($posts === []) {
$fail('Keine Posts ermittelbar (Instagram blockt vermutlich die Server-IP oder hat die Struktur geändert)'); $fail('Keine Posts ermittelbar (Instagram blockt vermutlich die Server-IP oder hat die Struktur geändert)');
} }
// --- Bilder lokal laden, auf 640px-Quadrat bringen --- // --- Bilder lokal laden, auf Instagram-Portrait 4:5 (640x800) bringen ---
if (!is_dir($imgDir)) { if (!is_dir($imgDir)) {
mkdir($imgDir, 0755, true); mkdir($imgDir, 0755, true);
} }
@@ -167,9 +167,16 @@ foreach ($posts as $post) {
} }
$w = imagesx($src); $w = imagesx($src);
$h = imagesy($src); $h = imagesy($src);
$side = min($w, $h); // Mittiger Crop auf 4:5 (Instagram-Portrait), dann auf 640x800 skalieren.
$out = imagecreatetruecolor(640, 640); if ($w / $h > 4 / 5) {
imagecopyresampled($out, $src, 0, 0, (int) (($w - $side) / 2), (int) (($h - $side) / 2), 640, 640, $side, $side); $cropH = $h;
$cropW = (int) round($h * 4 / 5);
} else {
$cropW = $w;
$cropH = (int) round($w * 5 / 4);
}
$out = imagecreatetruecolor(640, 800);
imagecopyresampled($out, $src, 0, 0, (int) (($w - $cropW) / 2), (int) (($h - $cropH) / 2), 640, 800, $cropW, $cropH);
imagejpeg($out, $file, 80); imagejpeg($out, $file, 80);
} }

3
public/assets/css/components.css
View File

@@ -107,7 +107,8 @@
.instagram__link img { .instagram__link img {
width: 100%; width: 100%;
height: auto; height: auto;
aspect-ratio: 1; /* Instagram-Portrait 1080x1350 */
aspect-ratio: 4 / 5;
object-fit: cover; object-fit: cover;
transition: transform var(--transition); transition: transform var(--transition);
} }