EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: video content element for epevents

Browse Source
This commit is contained in:
Björn Fromme
2024-05-31 16:46:06 +02:00
parent e083a9dcd9
commit 613a70989f
7 changed files with 112 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_events/Configuration/TCA/Overrides/tt_content_element_ytvideo.php
+38
View File
@@ -0,0 +1,38 @@
<?php
defined('TYPO3_MODE') or die();
call_user_func(function() {
$frontendLanguageFilePrefix = 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:';
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'tt_content',
'CType',
[
'YouTube/Vimeo Video',
'ep_events_ytvideo',
'content-image'
],
'calendar',
'after'
);
$GLOBALS['TCA']['tt_content']['types']['ep_events_ytvideo'] = [
'showitem' => '
--palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
layout, header_link,
--div--;' . $frontendLanguageFilePrefix . 'tabs.access,
hidden;' . $frontendLanguageFilePrefix . 'field.default.hidden,
--div--;' . $frontendLanguageFilePrefix . 'tabs.extended
',
'columnsOverrides' => [
'header_link' => [
'label' => 'YouTube URL/Vimeo ID',
],
'layout' => [
'label' => 'Typ',
],
],
];
});
public/typo3conf/ext/ep_events/Configuration/TSconfig/Page/TCEFORM.tsconfig
+8
View File
@@ -68,6 +68,14 @@ TCEFORM {
removeItems = 2,3 removeItems = 2,3
} }
layout.types.ep_events_ytvideo {
removeItems := addToList(2,3)
altLabels {
0 = YouTube
1 = Vimeo
}
}
header_layout { header_layout {
addItems { addItems {
10 = H1 (Icon, opt. Subheadline) 10 = H1 (Icon, opt. Subheadline)
public/typo3conf/ext/ep_events/Configuration/TSconfig/Page/Wizards/NewContentElement.tsconfig
+7 -1
View File
@@ -31,8 +31,14 @@ mod {
description = Banner für Kategorieseiten description = Banner für Kategorieseiten
tt_content_defValues.CType = banner tt_content_defValues.CType = banner
} }
ep_events_ytvideo {
iconIdentifier = content-image
title = YouTube/Vimeo Video
description = Responsiv eingebettetes Video
tt_content_defValues.CType = ep_events_ytvideo
}
} }
show := addToList(tile, statement, herounit, banner) show := addToList(tile, statement, herounit, banner, ep_events_ytvideo)
} }
} }
} }
public/typo3conf/ext/ep_events/Configuration/TypoScript/ContentElements/ep_events_ytvideo.typoscript
+4
View File
@@ -0,0 +1,4 @@
tt_content.ep_events_ytvideo =< lib.contentElement
tt_content.ep_events_ytvideo {
templateName = YoutubeVideo
}
public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_video.scss
+30
View File
@@ -0,0 +1,30 @@
.video {
@include container();
padding-top: 32px;
padding-bottom: 32px;
}
.video__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background-position: center;
background-size: cover;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
}
.consent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
+1
View File
@@ -36,3 +36,4 @@
@import "news"; @import "news";
@import "datepicker"; @import "datepicker";
@import "cookiefirst"; @import "cookiefirst";
@import "video";
public/typo3conf/ext/ep_events/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html
+24
View File
@@ -0,0 +1,24 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<div class="video">
<div class="video__inner"
style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
<iframe width="640" height="360" allowfullscreen
data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}"
data-cookiefirst-category="advertising"></iframe>
<div class="cookiefirst-disabled-resource">
<div class="consent">
Bitte <a href="#" onclick="CookieFirst.acceptCategory('advertising'); return false" class="underline">Marketing-Cookies akzeptieren</a>, um dieses Video anzusehen.
</div>
</div>
</div>
</div>
</f:section>
</html>