fix(imgproxy): fallback to smart gravity (sm) instead of face detection (fv)

- 'fv' requires ML modules not present in standard imgproxy image - 'sm' is robust and supported everywhere - Fixes broken images on staging using Next.js Image loader
fix(imgproxy): URL-encode plain source URLs
2026-02-19 18:05:29 +01:00 · 2026-02-19 17:15:58 +01:00 · 2026-02-19 16:04:58 +01:00
4 changed files with 4 additions and 4 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -32,7 +32,7 @@ services:
      - "traefik.http.routers.${PROJECT_NAME:-klz}.middlewares=${AUTH_MIDDLEWARE:-klz-ratelimit,klz-forward,klz-compress}"

      # Public Router (Whitelist for OG Images, Sitemaps, Health)
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`) || PathPrefix(`/sitemap.xml`) || PathPrefix(`/robots.txt`) || PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/_img`) || PathPrefix(`/api/og`) || PathPrefix(`/de/api/og`) || PathPrefix(`/en/api/og`) || PathPrefix(`/logo-white.svg`) || PathPrefix(`/icon-white.svg`) || PathPrefix(`/opengraph-image`) || PathPrefix(`/de/opengraph-image`) || PathPrefix(`/en/opengraph-image`) || PathPrefix(`/blog/opengraph-image`) || PathPrefix(`/de/blog/opengraph-image`) || PathPrefix(`/en/blog/opengraph-image`) || PathRegexp(`^/sitemap(-[0-9]+)?\\.xml$`) || PathRegexp(`.*\\.(svg|png|jpg|jpeg|gif|webp|ico)$`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`) || PathPrefix(`/sitemap.xml`) || PathPrefix(`/robots.txt`) || PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/_img`) || PathPrefix(`/api/og`) || PathPrefix(`/de/api/og`) || PathPrefix(`/en/api/og`) || PathPrefix(`/logo-white.svg`) || PathPrefix(`/icon-white.svg`) || PathPrefix(`/opengraph-image`) || PathPrefix(`/de/opengraph-image`) || PathPrefix(`/en/opengraph-image`) || PathPrefix(`/blog/opengraph-image`) || PathPrefix(`/de/blog/opengraph-image`) || PathPrefix(`/en/blog/opengraph-image`) || PathRegexp(`^/sitemap(-[0-9]+)?\\.xml$`) || PathRegexp(`.*\\.(svg|png|jpg|jpeg|gif|webp|ico|webm|mp4|map)$`))"
      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls=${TRAEFIK_TLS:-false}"
--- a/lib/imgproxy-loader.ts
+++ b/lib/imgproxy-loader.ts
@@ -28,6 +28,6 @@ export default function imgproxyLoader({
  return getImgproxyUrl(src, {
    width,
    resizing_type: 'fit',
-    gravity: 'fv', // Use face-aware focusing (face detection)
+    gravity: 'sm', // Use smart gravity (content-aware) instead of face detection (requires ML)
  });
 }
--- a/lib/imgproxy.ts
+++ b/lib/imgproxy.ts
@@ -60,5 +60,5 @@ export function getImgproxyUrl(src: string, options: ImgproxyOptions = {}): stri
  // Format: <base_url>/unsafe/<options>/plain/<source_url>[@<extension>]
  const suffix = extension ? `@${extension}` : '';

-  return `${baseUrl}/unsafe/${processingOptions}/plain/${absoluteSrc}${suffix}`;
+  return `${baseUrl}/unsafe/${processingOptions}/plain/${encodeURIComponent(absoluteSrc)}${suffix}`;
 }
--- a/middleware.ts
+++ b/middleware.ts
@@ -95,7 +95,7 @@ export default function middleware(request: NextRequest) {

 export const config = {
  matcher: [
-    '/((?!api|_next/static|_next/image|_img|favicon.ico|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml)$).*)',
+    '/((?!api|_next/static|_next/image|_img|favicon.ico|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml|webm|mp4|map)$).*)',
    '/(de|en)/:path*',
    '/(de|en)/:path*',
  ],
Author	SHA1	Message	Date
Marc Mintel	8a87318b12	fix(imgproxy): fallback to smart gravity (sm) instead of face detection (fv) All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 12s Details Build & Deploy / 🧪 QA (push) Successful in 1m27s Details Build & Deploy / 🏗️ Build (push) Successful in 2m56s Details Build & Deploy / 🚀 Deploy (push) Successful in 29s Details Build & Deploy / 🧪 Smoke Test (push) Successful in 51s Details Build & Deploy / ⚡ Lighthouse (push) Successful in 4m33s Details Build & Deploy / 🔔 Notify (push) Successful in 3s Details - 'fv' requires ML modules not present in standard imgproxy image - 'sm' is robust and supported everywhere - Fixes broken images on staging using Next.js Image loader	2026-02-19 18:05:29 +01:00
Marc Mintel	93cb12d7d9	fix(imgproxy): URL-encode plain source URLs All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 13s Details Build & Deploy / 🧪 QA (push) Successful in 1m49s Details Build & Deploy / 🏗️ Build (push) Successful in 2m57s Details Build & Deploy / 🚀 Deploy (push) Successful in 26s Details Build & Deploy / 🧪 Smoke Test (push) Successful in 49s Details Build & Deploy / ⚡ Lighthouse (push) Successful in 4m23s Details Build & Deploy / 🔔 Notify (push) Successful in 1s Details - Use encodeURIComponent for source URLs in plain/ format - Prevents 308 redirect loops caused by double-slash normalization - Prevents invalid URL structures for imgproxy	2026-02-19 17:15:58 +01:00
Marc Mintel	44f0c430a9	fix(infra): whitelist video files and source maps All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 7s Details Build & Deploy / 🧪 QA (push) Successful in 1m28s Details Build & Deploy / 🏗️ Build (push) Successful in 7m31s Details Build & Deploy / 🚀 Deploy (push) Successful in 26s Details Build & Deploy / 🧪 Smoke Test (push) Successful in 1m4s Details Build & Deploy / ⚡ Lighthouse (push) Successful in 3m17s Details Build & Deploy / 🔔 Notify (push) Successful in 2s Details - Added webm, mp4, map to Traefik whitelist to bypass Gatekeeper - Added webm, mp4, map to middleware exclusion to prevent locale redirects - This fixes 404 errors for background videos and source maps on protected environments	2026-02-19 16:04:58 +01:00