All projects
2026LiveSolo Fullstack - architecture, backend, frontend, AI integration, DevOps

HauptstadtEcho

Berlin news portal with AI image pipeline, author portal and automated E-Paper exports

A Berlin news portal and complete editorial publishing platform for a real newsroom. Built as a custom WordPress child theme, it replaces standard CMS workflows with a bespoke author portal, an AI image processing pipeline that auto-crops editorial images via Claude Vision, and two E-Paper export pipelines: a fast PDF generator and a print-quality LaTeX workflow packaged for Overleaf. The frontend, portal and E-Paper share a unified design-token system.

3
Editorial image formats
2
E-Paper pipelines
1
Custom child theme
Live
Newsroom production
01

Overview

HauptstadtEcho is a Berlin-focused news portal covering tourism, hotels, gastronomy and capital-city topics. It is used in production by a real editorial team, including non-technical editors, which demanded robust UX, fault tolerance and clear workflows.

The platform is far more than a WordPress theme: it includes a custom author portal for article submission, live preview and approval; an AI-powered image pipeline that analyzes every upload and produces three editorial crops plus natural-language editor hints; and a complete E-Paper system with drag-and-drop issue composition and both quick PDF and print-quality exports.

All of this runs on ALL-INKL shared hosting, so the architecture was deliberately optimized for constrained resources: caching, selective script loading, timeout management on API calls, and an Overleaf-based LaTeX workflow because pdflatex is not available on the host.

02

Architecture

Custom WordPress child theme - editorial tools - AI & export pipeline - content database

Frontend & theme
Custom templates, design tokens, responsive CSS
L1
Homepage layoutArticle templatesCategory color systemSearch & navigationDesign tokens
Editorial tools
Author portal & E-Paper editor
L2
Article submissionLive previewMedia browserE-Paper drag-and-dropApproval workflow
AI & export pipeline
Claude Vision, PHP GD, dompdf, LaTeX
L3
Smart crop analysisNatural-language editor hintsImage enhancementFast PDF exportOverleaf LaTeX ZIP
WordPress data layer
Posts, media, meta, security
L4
Posts & pagesAttachment metadataPost meta workflowsNonce-based AJAXRole-based access
03

Tech stack

CMS & base
WordPressPHP 8.4Betheme child themeMySQL
Hosting & performance
ALL-INKL shared hostingWP RocketCachingDelay-JS exclusions
AI & image processing
Anthropic Claude VisionPHP GDSmart cropImage enhancement
PDF & E-Paper
dompdfLaTeXOverleaf ZIP exportHTML to LaTeX conversion
Frontend
Vanilla JSCustom CSSResponsive designDesign tokens
Infra & SEO
Rank MathWP Mail SMTPUpdraftPlusAJAX API
05

MVP features

Custom child theme

Fully bespoke homepage, article and portal layouts built on top of Betheme without relying on a page builder.

AI smart crop

Every uploaded image is analyzed by Claude Vision to produce three editorial crops (card, hero, content) with focal-point awareness and automatic enhancement.

Natural-language editor hints

Editors can type free instructions such as 'black and white, focus on the collar' to steer crop selection and image adjustments like grayscale, sepia, brightness and contrast.

Two E-Paper pipelines

A fast PDF generator via dompdf and a separate print-quality LaTeX workflow that exports a ready-to-compile Overleaf ZIP.

Author portal

A custom frontend application where authors submit articles, preview them in the real target layout, manage media and follow an approval workflow without touching wp-admin.

E-Paper editor

Drag-and-drop assignment of articles to rubrics, sorting and issue selection, all persisted in post meta.

Design-token system

Centralized color and typography tokens keep the website, portal and E-Paper visually consistent.

Robust upload handling

Fallback focal points, version markers, attachment metadata and unique filenames keep the image pipeline stable even when the AI service is slow or unavailable.

Shared-hosting optimization

WP Rocket caching, selective script delays and resource-aware image processing keep the site fast on a constrained host.

Production newsroom workflows

The platform supports real daily editorial work: submit, preview, approve, publish and export to E-Paper in one flow.

06

Workflows

Image upload & smart crop

  1. 1

    Editor uploads an image in the author portal and optionally adds a natural-language hint.

  2. 2

    The image is base64 encoded and sent to Claude Vision with a structured prompt requesting subject, focal point and bounding box.

  3. 3

    A custom algorithm computes the best crop for each of the three editorial formats, applies padding and enhancement rules, and generates unique filenames.

  4. 4

    The processed versions are returned to the UI; the original is cleaned up after successful processing.

Article submission & approval

  1. 1

    Author fills the submission form with title, content, category, teaser and optional E-Paper flag.

  2. 2

    The article is saved as pending and an email with an approval link is sent to the editorial team.

  3. 3

    Editor reviews the live preview, which renders the article in the real layout with category colors and reading time.

  4. 4

    Once approved, the article is published and can be included in an E-Paper issue.

E-Paper export

  1. 1

    Editor arranges articles into rubrics via drag-and-drop and sorts them for the current issue.

  2. 2

    The fast PDF pipeline renders a complete magazine layout with cover, table of contents and articles.

  3. 3

    The LaTeX pipeline generates a complete project ZIP with converted article text, images and cover, ready for upload to Overleaf.

07

Security

  • AJAX endpoints are protected by WordPress nonces and role-based capability checks.
  • The author portal requires login and restricts editorial actions to appropriate roles.
  • All editorial data, author submissions and media metadata stay inside WordPress; no external SaaS pipeline is used.
  • Shared-hosting constraints are respected: no pdflatex, limited resources, timeout management on API calls.
  • Comprehensive logging with version markers helps reproduce and fix production issues quickly.