Add image to pages

Demonstrates how to use another data processor and features of image
processing.

One can use the editor within backend as well as f:image attributes.

localPackages/sitepackage/Configuration/TypoScript/Setup/Page.typoscript

@@ -18,7 +18,7 @@ page {
 
     cssInline {
         10 = TEXT
-        10.value = body, h1 { color: #fff; }
+        10.value = body, h1, p { color: #fff; }
     }
 
     // See: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/Index.html
@@ -30,12 +30,18 @@ page {
         dataProcessing {
             10 = menu
             10 {
-                levels = 2
                 as = mainMenu
+                levels = 2
                 expandAll = 1
                 special = list
                 special.value = 1
             }
+            20 = files
+            20 {
+                as = pageMedia
+                references.fieldName = media
+                references.table = pages
+            }
         }
 
         variables {

localPackages/sitepackage/Resources/Private/Templates/Frontend/Pages/Default.html

@@ -26,6 +26,13 @@
                 <f:if condition="{data.subtitle}">
                     <h2>{data.subtitle}</h2>
                 </f:if>
+
+                <f:if condition="{pageMedia.0}">
+                    <f:image image="{pageMedia.0}" width="250c" height="180c" />
+                    <f:if condition="{pageMedia.0.description}">
+                        <p>{pageMedia.0.description}</p>
+                    </f:if>
+                </f:if>
             </div>
 
             <div class="content">