feat(blog-detail): Enhance blog post template with image support and additional metadata

Author: fmontes

examples/dotcms-symfony/src/Controller/CatchAllController.php

@@ -58,7 +58,8 @@ public function show(string $path = ''): Response
                 'layout' => $pageAsset->layout ?? null,
                 'page' => $pageAsset->page ?? null,
                 'containers' => $pageAsset->containers ?? [],
-                'navigation' => $navigation
+                'navigation' => $navigation,
+                'dotcms_host' => $_ENV['DOTCMS_HOST'] ?? 'https://demo.dotcms.com'
             ]);
         } catch (HttpException $e) {
             // Map HTTP errors to appropriate Symfony exceptions

examples/dotcms-symfony/templates/blog-detail.html.twig

@@ -1,21 +1,44 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}{{ pageAsset.page.title|default('Blog Post') }}{% endblock %}
-
 {% block body %}
     {% include 'dotcms/header.twig' %}
 
     <div class="container">
         <div class="row">
             <div class="col-start-1 col-end-13">
                 <article>
-                    <h1>{{ pageAsset.page.title }}</h1>
-                    
-                    {% if pageAsset.urlContentMap.blogContent is defined %}
-                        <div class="blog-content">
-                            {{ renderBlockEditorField(pageAsset.urlContentMap.blogContent) }}
-                        </div>
+                    {% if pageAsset.urlContentMap.image is defined %}
+                        {% set imageHtml %}
+                        <figure style="margin-bottom: 2rem">
+                            <img src="{{ dotcms_host }}/dA/{{ pageAsset.urlContentMap.identifier }}/image" 
+                                 alt="{{ pageAsset.urlContentMap.title|default('')|e('html_attr') }}"
+                                 style="width:100%;max-height:500px;object-fit:cover;">
+                        </figure>
+                        {% endset %}
+                        {{ imageHtml|raw }}
                     {% endif %}
+
+                    <div style="max-width: 70ch; margin: 0 auto;">
+                    
+                        <header>
+                            <h1>{{ pageAsset.urlContentMap.title }}</h1>
+                            {% if pageAsset.urlContentMap.publishDate is defined %}
+                                {% set publishDate = pageAsset.urlContentMap.publishDate // 1000 %}
+                                <time datetime="{{ publishDate|date('c') }}" class="blog-publish-date">
+                                    Published on {{ publishDate|date('F j, Y') }}
+                                </time>
+                            {% endif %}
+                        </header>
+
+                        <hr />
+                        
+                        {% if pageAsset.urlContentMap.blogContent is defined %}
+                            <div class="blog-content">
+                                {{ renderBlockEditorField(pageAsset.urlContentMap.blogContent) }}
+                            </div>
+                        {% endif %}
+
+                    </div>
                 </article>
             </div>
         </div>