Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: add a textimage element, add news design, add a footer

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2024-12-13 01:07:46 +01:00
parent 9f410a339e
commit 52e962ae83
19 changed files with 546 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css Normal file
View File

@@ -0,0 +1,55 @@
.frame-type-cloonar_textimage {
margin: 2rem 0;
}
/* Mobile-first: column layout by default */
.textimage-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.textimage-wrapper {
width: 100%;
}
.textimage-header {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.textimage-text {
font-size: 1rem;
line-height: 1.5;
}
.textimage-image-wrapper {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.textimage-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
}
/* Image positions: 25 = left, 26 = right
On larger screens, adjust the layout */
@media (min-width: 768px) {
.textimage-container.image-pos-25 {
flex-direction: row;
}
.textimage-container.image-pos-26 {
flex-direction: row-reverse;
}
.textimage-wrapper,
.textimage-image-wrapper {
flex: 1 1 50%;
}
}

19
packages/base/ContentBlocks/ContentElements/textimage/config.yaml Normal file
View File

@@ -0,0 +1,19 @@
name: cloonar/textimage
typeName: cloonar_textimage
group: default
prefixFields: true
prefixType: full
fields:
- identifier: header
useExistingField: true
- identifier: bodytext
type: Textarea
enableRichtext: true
useExistingField: true
- identifier: image
type: File
properties:
allowed: [jpg, jpeg, png, gif]
useExistingField: true
- identifier: imageorient
useExistingField: true

14
packages/base/ContentBlocks/ContentElements/textimage/language/labels.xlf Normal file
View File

@@ -0,0 +1,14 @@
<?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" product-name="cloonar/textimage">
<header/>
<body>
<trans-unit id="title">
<source>Text/Image Element</source>
</trans-unit>
<trans-unit id="description">
<source>A text and image element with adjustable image position.</source>
</trans-unit>
</body>
</file>
</xliff>

26
packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html Normal file
View File

@@ -0,0 +1,26 @@
<html
xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<f:layout name="Preview"/>
<f:section name="Header">
<be:link.editRecord uid="{data.uid}" table="{data.mainType}">
<f:if condition="{data.header}">
<f:then>{data.header}</f:then>
<f:else>Text/Image Element</f:else>
</f:if>
</be:link.editRecord>
</f:section>
<f:section name="Content">
<f:if condition="{data.bodytext}">
<f:then>
<p>Preview: <f:format.crop maxCharacters="50">{data.bodytext}</f:format.crop></p>
</f:then>
<f:else>
<p>No text available</p>
</f:else>
</f:if>
</f:section>
</html>

29
packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html Normal file
View File

@@ -0,0 +1,29 @@
<f:layout name="Default" />
<f:section name="Header" />
<f:section name="Main">
<f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
<div class="textimage-container image-pos-{data.imageorient}">
<div class="textimage-wrapper">
<f:if condition="{data.header}">
<h2 class="textimage-header">{data.header}</h2>
</f:if>
<f:if condition="{data.bodytext}">
<div class="textimage-text">
<f:format.html>{data.bodytext}</f:format.html>
</div>
</f:if>
</div>
<div class="textimage-image-wrapper">
<f:if condition="{data.image}">
<f:then>
<f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
</f:then>
<f:else>
<p>No image available</p>
</f:else>
</f:if>
</div>
</div>
</f:section>