showArticle-Anpassungen

content/showArticle.php

@@ -54,8 +54,33 @@ include_once 'php/controller/showArticle-controller.php';
     <!-- Beitrags-Inhalt -->
     <div class="article-view-content">
         <?php if (isset($content)): ?>
-            <!-- nl2br für Zeilenumbrüche -->
-            <div class="article-view-body"><?php echo nl2br(htmlspecialchars($content)); ?></div>
+            <?php
+            // Versuchen, den Inhalt von JSON in ein PHP-Array umzuwandeln
+            $blocks = json_decode($content, true);
+
+            // Wenn das JSON valide ist und Blöcke enthält
+            if (json_last_error() === JSON_ERROR_NONE && is_array($blocks)):
+                foreach ($blocks as $block):
+                    if (isset($block['type']) && isset($block['value'])):
+                        if ($block['type'] === 'text'): ?>
+                            <!-- Textblock mit XSS-Schutz und Erhalt von Zeilenumbrüchen -->
+                            <div class="article-view-body block-text">
+                                <?php echo nl2br(htmlspecialchars($block['value'])); ?>
+                            </div>
+                        <?php elseif ($block['type'] === 'image'): ?>
+                            <!-- Bildblock, der auf den relativen Pfad im uploads-Ordner verweist -->
+                            <div class="article-view-body block-image">
+                                <img src="<?php echo htmlspecialchars($block['value']); ?>" alt="Beitragsbild">
+                            </div>
+                        <?php endif;
+                    endif;
+                endforeach;
+            else: ?>
+                <!-- Fallback: Wenn der Beitrag alten Reintext aus der DB enthält -->
+                <div class="article-view-body block-text">
+                    <?php echo nl2br(htmlspecialchars($content)); ?>
+                </div>
+            <?php endif; ?>
         <?php endif; ?>
     </div>
 

css/showArticle.css

@@ -105,6 +105,37 @@
     cursor: default;
 }
 
+.article-view-content {
+    margin-bottom: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem; /* Erzeugt einen sauberen Abstand zwischen den einzelnen Blöcken */
+    width: 100%;
+}
+
+.article-view-body {
+    font-size: 1.125rem;
+    color: #2d3748;
+    width: 100%;
+}
+
+.article-view-body.block-text {
+    white-space: pre-line;
+    word-break: break-word;
+}
+
+.article-view-body.block-image {
+    display: flex;
+    justify-content: center; /* Zentriert das Bild horizontal */
+}
+
+.article-view-body.block-image img {
+    max-width: 100%;  /* Verhindert das Ausbrechen aus der Lesebreite */
+    height: auto;     /* Behält das originale Seitenverhältnis bei */
+    border-radius: 6px; /* Optionale leichte Rundung für ein moderneres Layout */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Minimaler, eleganter Schatten */
+}
+
 /* Responsive Anpassungen unter 760px (für z.B. Smarticlephones) */
 @media (max-width: 760px) {
     .article-view-container {