Guten Abend allerseits!
Ich habe ein TYPO3 12.4.19 mit Bootstrap-Package 14.0.7, der news 11.4.2 und der sync-crop-areas 3.0.0 und erstelle damit für meine Frau eine kleine Website für ihe 3D- und Musik-Portfolio.
Ich habe auf der news eigene Templates, die bis auf eine Sache nun sauber laufen: Die Erstellung der Bildvarianten in der Detailsansicht.
Die Templates werde alle erkannt und es läuft an sich alles recht fein. Aber manchmal klappt es scheinbar mit der korrekten Erstellung (nach einer Weile) und manchmal auch nicht, dann macht er immer 16:9-Crops auf allen Varianten. Ich verstehe nicht, warum.
Erkennt jemand von Euch was ich übersehe?
Hier sind die Files, die ich nutze:
packages/tnt_sitepackage_bs5/Configuration/TCA/Overrides/news_crop_variants.php
<?php
defined('TYPO3') or die('Access denied.');
// Crop Variants aus dem bootstrap_package importieren
$defaultCropSettings = [
'title' => 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.default',
'allowedAspectRatios' => [
'16:9' => [
'title' => 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:ratio.16_9',
'value' => 16 / 9,
],
'4:3' => [
'title' => 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:ratio.4_3',
'value' => 4 / 3,
],
'1:1' => [
'title' => 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:ratio.1_1',
'value' => 1 / 1,
],
'NaN' => [
'title' => 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:ratio.free',
'value' => 0.0,
],
],
'selectedRatio' => 'NaN',
'cropArea' => [
'x' => 0.0,
'y' => 0.0,
'width' => 1.0,
'height' => 1.0,
],
];
$xlargeCropSettings = $defaultCropSettings;
$xlargeCropSettings['title'] = 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.xlarge';
$largeCropSettings = $defaultCropSettings;
$largeCropSettings['title'] = 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.large';
$mediumCropSettings = $defaultCropSettings;
$mediumCropSettings['title'] = 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.medium';
$smallCropSettings = $defaultCropSettings;
$smallCropSettings['title'] = 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.small';
$extrasmallCropSettings = $defaultCropSettings;
$extrasmallCropSettings['title'] = 'LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:option.extrasmall';
// News TCA überschreiben
$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['default'] = $defaultCropSettings;
$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['xlarge'] = $xlargeCropSettings;
$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['large'] = $largeCropSettings;
$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['medium'] = $mediumCropSettings;
$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['small'] = $smallCropSettings;
$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['extrasmall'] = $extrasmallCropSettings;
packages/tnt_sitepackage_bs5/Resources/Private/Extensions/News/Templates/News/Detail.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="Detail" />
<!--
=====================
News/Detail.html
-->
<f:section name="content">
<bk2k:data.imageVariants as="variants" variants="{variants}" />
<f:variable name="newsCEtype">{contentObjectData.CType}</f:variable>
<f:if condition="{newsItem}">
<n:format.nothing>
<n:excludeDisplayedNews newsItem="{newsItem}" />
<f:if condition="{settings.detail.showMetaTags}">
<f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
</f:if>
<f:if condition="{newsItem.alternativeTitle}">
<f:then>
<n:titleTag>
<f:format.htmlentitiesDecode>{newsItem.alternativeTitle}</f:format.htmlentitiesDecode>
</n:titleTag>
</f:then>
<f:else>
<n:titleTag>
<f:format.htmlentitiesDecode>{newsItem.title}</f:format.htmlentitiesDecode>
</n:titleTag>
</f:else>
</f:if>
</n:format.nothing>
<f:if condition="{settings.detail.showPrevNext}">
<n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
<f:if condition="{paginated}">
<nav aria-label="Page navigation">
<ul class="pagination mt-3 justify-content-center">
<f:if condition="{paginated.prev}">
<li class="page-item">
<n:link newsItem="{paginated.prev}" class="page-link" settings="{settings}">
<span aria-hidden="true">«</span> {paginated.prev.title}
</n:link>
</li>
</f:if>
<f:if condition="{paginated.next}">
<li class="page-item">
<n:link newsItem="{paginated.next}" class="page-link" settings="{settings}">
{paginated.next.title} <span aria-hidden="true">»</span>
</n:link>
</li>
</f:if>
</ul>
</nav>
</f:if>
</n:simplePrevNext>
</f:if>
<div class="row">
<div class="col-12">
<f:render section="headline" arguments="{_all}" />
</div>
</div>
<f:if condition="{newsItem.mediaNonPreviews}">
<f:then>
<div class="row">
<div class="col-12">
<f:if condition="{newsItem.mediaPreviews}">
<f:then>
<f:comment><!-- data hat KEINEN Inhalt!--></f:comment>
<f:render partial="Media/Rendering/Image" arguments="{file: newsItem.mediaPreviews.0, data: data, settings: settings, variants: variants}" />
</f:then>
<f:else>
<f:if condition="{settings.displayDummyIfNoMedia}">
<f:image class="img-dummy img-fluid" src="{settings.list.media.dummyImage}" title="" alt="" loading="{settings.list.media.image.lazyLoading}" maxWidth="{settings.list.media.image.maxWidth}" maxHeight="{settings.list.media.image.maxHeight}" />
</f:if>
</f:else>
</f:if>
<f:if condition="{newsItem.mediaPreviews.0.description}">
<div class="caption text-right">
<small>{newsItem.mediaPreviews.0.description}</small>
</div>
</f:if>
</div>
</div>
</f:then>
</f:if>
<div class="row">
<div class="col-12">
<f:render section="inner-content" arguments="{_all}" />
</div>
</div>
</f:if>
</f:section>
<f:section name="headline">
<f:render partial="General/AdditionalInformation" arguments="{settings:settings,newsItem:newsItem,newsCEtype:newsCEtype}" />
<h1 class="pb-3" itemprop="headline">{newsItem.title}</h1>
<f:if condition="{newsItem.teaser}">
<!-- teaser -->
<div class="lead" itemprop="description">
<f:format.html>{newsItem.teaser}</f:format.html>
</div>
</f:if>
</f:section>
<f:section name="inner-content">
<n:renderMedia news="{newsItem}" imgClass="img-fluid" videoClass="video-wrapper" audioClass="audio-wrapper">
<f:if condition="{newsItem.contentElements}">
<!-- content elements -->
<div id="news-details-contentElements">
<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
</div>
</f:if>
<!-- main text -->
<div class="news-text-wrap" itemprop="articleBody">
<f:format.html>{newsItem.bodytext}</f:format.html>
</div>
</n:renderMedia>
<f:if condition="{settings.detail.showSocialShareButtons}">
<f:comment>
Care about the privacy of your readers?
Checkout https://typo3.org/extensions/repository/view/rx_shariff
and it will be used automatically!
</f:comment>
<n:extensionLoaded extensionKey="rx_shariff">
<f:render partial="Detail/Shariff" />
</n:extensionLoaded>
</f:if>
<f:comment>
Various options exist to fetch different related information:
- {newsItem.allRelatedSorted}: all related news, related und related from, sorted by date
- {newsItem.related}: all related
- {newsItem.relatedSorted}: all related, sorted by date
- {newsItem.relatedFrom}: all related from
- {newsItem.relatedFromSorted}: all related from, sorted by date
</f:comment>
<f:if condition="{newsItem.allRelatedSorted}">
<!-- Related news records -->
<div class="news-related news-related-news mb-3">
<h4>
<f:translate key="related-news" />
</h4>
<ul class="list-group">
<f:for each="{newsItem.allRelatedSorted}" as="related">
<li class="list-group-item">
<span class="news-related-news-date me-2">
<f:format.date format="{f:translate(key:'dateFormat')}">{related.datetime}</f:format.date>
</span>
<n:link newsItem="{related}" settings="{settings}" title="{related.title}">
{related.title}
</n:link>
</li>
</f:for>
</ul>
</div>
</f:if>
<f:if condition="{newsItem.relatedFiles}">
<!-- related files -->
<div class="news-related news-related-files mb-3">
<h4>
<f:translate key="related-files" />
</h4>
<ul class="list-group">
<f:for each="{newsItem.relatedFiles}" as="relatedFile">
<li class="list-group-item">
<span class="news-related-files-link me-2">
<a href="{relatedFile.originalResource.publicUrl -> f:format.htmlspecialchars()}" target="_blank">
<i class="fas fa-file me-1"></i>
{f:if(condition:relatedFile.originalResource.title, then:relatedFile.originalResource.title, else:relatedFile.originalResource.name)}
</a>
</span>
<span class="news-related-files-size"> {relatedFile.originalResource.size -> f:format.bytes()} </span>
</li>
</f:for>
</ul>
</div>
</f:if>
<f:if condition="{newsItem.relatedLinks}">
<!-- Related links -->
<div class="news-related news-related-links mb-3">
<h4>
<f:translate key="related-links" />
</h4>
<ul class="list-group">
<f:for each="{newsItem.relatedLinks}" as="relatedLink">
<li class="list-group-item">
<f:link.typolink parameter="{relatedLink.uri}" class="me-2" title="{relatedLink.title}" target="{n:targetLink(link:relatedLink.uri)}"><i class="fas fa-external-link me-1"> </i>{f:if(condition: relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}</f:link.typolink>
<f:if condition="{relatedLink.description}"><span>{relatedLink.description}</span>
</f:if>
</li>
</f:for>
</ul>
</div>
</f:if>
<f:if condition="{settings.backPid}">
<!-- Link Back -->
<f:link.page class="btn btn-primary my-3" pageUid="{settings.backPid}">
<f:translate key="back-link" />
</f:link.page>
</f:if>
</f:section>
</html>
packages/tnt_sitepackage_bs5/Resources/Private/Extensions/News/Partials/Media/Rendering/Image.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:if condition="{settings.itemsPerRow}">
<f:then>
<f:variable name="screenXlarge">{1280 / settings.itemsPerRow}</f:variable>
<f:variable name="screenLarge">{1100 / settings.itemsPerRow}</f:variable>
<f:variable name="screenMedium">{920 / settings.itemsPerRow}</f:variable>
<f:variable name="screenSmall">{680 / settings.itemsPerRow}</f:variable>
<f:variable name="screenXsmall">{500 / settings.itemsPerRow}</f:variable>
</f:then>
<f:else>
<f:variable name="screenXlarge">1280</f:variable>
<f:variable name="screenLarge">1100</f:variable>
<f:variable name="screenMedium">920</f:variable>
<f:variable name="screenSmall">680</f:variable>
<f:variable name="screenXsmall">500</f:variable>
</f:else>
</f:if>
<picture>
<source srcset="{f:uri.image(image: file, width: screenXlarge, cropVariant: 'xlarge')}" media="(min-width: 1400px)">
<source srcset="{f:uri.image(image: file, width: screenLarge, cropVariant: 'large')}" media="(min-width: 1200px)">
<source srcset="{f:uri.image(image: file, width: screenMedium, cropVariant: 'medium')}" media="(min-width: 992px)">
<source srcset="{f:uri.image(image: file, width: screenSmall, cropVariant: 'small')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: file, width: screenXsmall, cropVariant: 'extrasmall')}">
<f:media class="image-embed-item img-fluid" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" loading="{settings.media.lazyLoading}" decoding="{settings.media.imageDecoding}" />
</picture>
</html>