[TASK] Improve content blocks

Add content elements to their own group, limit images to image file extensions and require exactly one image. Improve backend preview templates
TYPO3 · Dec 23, 2024 · cbb6b34 · cbb6b34
1 parent 0456f69
commit cbb6b34
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 43 deletions.
diff --git a/...s/packages/site_package_tutorial/13.4/src/Configuration/TCA/Overrides/tt_content.php.twig b/...s/packages/site_package_tutorial/13.4/src/Configuration/TCA/Overrides/tt_content.php.twig
@@ -0,0 +1,11 @@
+<?php
+
+use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
+
+ExtensionManagementUtility::addTcaSelectItemGroup(
+    'tt_content',
+    'CType',
+    '{{ package.extensionKey }}',
+    'LLL:EXT:{{ package.extensionKey }}/Resources/Private/Language/locallang_be.xlf:content_element.group.{{ package.extensionKey }}',
+    'after:default',
+);
diff --git a/...es/site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/config.yaml.twig b/...es/site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/config.yaml.twig
@@ -1,15 +1,21 @@
 name: {{ package.packageNameAlternative }}/carousel
 typeName: {{ package.extensionKey }}_carousel
-group: default
+group: {{ package.extensionKey }}
 prefixFields: true
 prefixType: full
 fields:
   - identifier: carousel_items
     type: Collection
-    foreign_field: parentid
+    minitems: 1
+    appearance:
+      collapseAll: true
+      levelLinksPosition: both
     fields:
       - identifier: image
         type: File
+        allowed: common-image-types
+        minitems: 1
+        maxitems: 1
       - identifier: header
         type: Text
       - identifier: description

diff --git a/...site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/language/labels.xlf b/...site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/language/labels.xlf
@@ -1,32 +1,38 @@
 <?xml version="1.0"?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-	<file datatype="plaintext" original="labels.xlf" source-language="en" date="2024-11-24T18:55:27+00:00" product-name="t3docs/carousel">
-		<header/>
-		<body>
-			<trans-unit id="title" resname="title">
-				<source>Carousel</source>
-			</trans-unit>
-			<trans-unit id="description" resname="description">
-				<source>See also https://getbootstrap.com/docs/5.0/components/carousel/</source>
-			</trans-unit>
-			<trans-unit id="carousel_items.label" resname="carousel_items.label">
-				<source>Carousel Items</source>
-			</trans-unit>
-			<trans-unit id="carousel_items.image.label" resname="carousel_items.image.label">
-				<source>Image</source>
-			</trans-unit>
-			<trans-unit id="carousel_items.header.label" resname="carousel_items.header.label">
-				<source>Header</source>
-			</trans-unit>
-			<trans-unit id="carousel_items.description.label" resname="carousel_items.description.label">
-				<source>Description</source>
-			</trans-unit>
-			<trans-unit id="previous.label" resname="previous.label">
-				<source>Previous</source>
-			</trans-unit>
-			<trans-unit id="next.label" resname="next.label">
-				<source>Next</source>
-			</trans-unit>
-		</body>
-	</file>
+    <file datatype="plaintext" original="labels.xlf" source-language="en" date="2024-11-24T18:55:27+00:00" product-name="t3docs/carousel">
+        <header/>
+        <body>
+            <trans-unit id="title" resname="title">
+                <source>Carousel</source>
+            </trans-unit>
+            <trans-unit id="description" resname="description">
+                <source>See also https://getbootstrap.com/docs/5.0/components/carousel/</source>
+            </trans-unit>
+            <trans-unit id="carousel_items.label" resname="carousel_items.label">
+                <source>Carousel Items</source>
+            </trans-unit>
+            <trans-unit id="carousel_items.image.label" resname="carousel_items.image.label">
+                <source>Image</source>
+            </trans-unit>
+            <trans-unit id="carousel_items.header.label" resname="carousel_items.header.label">
+                <source>Header</source>
+            </trans-unit>
+            <trans-unit id="carousel_items.description.label" resname="carousel_items.description.label">
+                <source>Description</source>
+            </trans-unit>
+            <trans-unit id="previous.label" resname="previous.label">
+                <source>Previous</source>
+            </trans-unit>
+            <trans-unit id="next.label" resname="next.label">
+                <source>Next</source>
+            </trans-unit>
+            <trans-unit id="backend.itemCount" resname="backend.itemCount">
+                <source>Carousel with %s items</source>
+            </trans-unit>
+            <trans-unit id="backend.lastUpdated" resname="backend.lastUpdated">
+                <source>Last updated %s</source>
+            </trans-unit>
+        </body>
+    </file>
 </xliff>
diff --git a/...e_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/templates/backend-preview.html b/...e_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/templates/backend-preview.html
@@ -1,12 +1,24 @@
-<f:asset.css identifier="content-block-t3docs-t3docs/carousel-be" href="{cb:assetPath()}/preview.css"/>
+<f:layout name="Preview"/>
 
-<div class="row">
-    <f:for each="{data.carousel_items}" as="item" iteration="iteration">
-        <div class="col">
-            <f:for each="{item.image}" as="image" iteration="iteration">
-                <f:image image="{image}" width="100"/><br/>
-            </f:for>
-            {item.header}
-        </div>
-    </f:for>
-</div>
+<f:section name="Header">
+    <f:variable name="itemCount"><f:count subject="{data.carousel_items}" /></f:variable>
+    <div>{f:translate(key: '{cb:languagePath()}:backend.itemCount', arguments: {0: '{itemCount}'})}</div>
+</f:section>
+
+<f:section name="Content">
+    <div class="row">
+        <f:for each="{data.carousel_items}" as="item" iteration="iteration">
+            <div class="col">
+                <f:for each="{item.image}" as="image" iteration="iteration">
+                    <f:image image="{image}" width="100"/><br/>
+                </f:for>
+                {item.header}
+            </div>
+        </f:for>
+    </div>
+</f:section>
+
+<f:section name="Footer">
+    <f:variable name="lastUpdated"><f:format.date>{data.rawRecord.crdate}</f:format.date></f:variable>
+    <div>{f:translate(key: '{cb:languagePath()}:backend.lastUpdated', arguments: {0: '{lastUpdated}'})}</div>
+</f:section>
diff --git a/...s/site_package_tutorial/13.4/src/ContentBlocks/ContentElements/jumbotron/config.yaml.twig b/...s/site_package_tutorial/13.4/src/ContentBlocks/ContentElements/jumbotron/config.yaml.twig
@@ -1,6 +1,6 @@
 name: {{ package.packageNameAlternative }}/jumbotron
 typeName: {{ package.extensionKey }}_jumbotron
-group: default
+group: {{ package.extensionKey }}
 prefixFields: true
 prefixType: full
 fields:

diff --git a/.../packages/site_package_tutorial/13.4/src/Resources/Private/Language/locallang_be.xlf.twig b/.../packages/site_package_tutorial/13.4/src/Resources/Private/Language/locallang_be.xlf.twig
@@ -21,6 +21,9 @@
             <trans-unit id="backend_layout.column.right">
                 <source>Right</source>
             </trans-unit>
+            <trans-unit id="content_element.group.{{ package.extensionKey }}">
+                <source>{{ package.title }} elements</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>