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

Add gallery images to concept detail page

Browse Source
This commit is contained in:
Björn Fromme
2022-08-22 16:32:34 +02:00
parent 647ed4b6c9
commit 23d5f7f008
4 changed files with 124 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_products/Classes/Domain/Model/Concept.php
+22
View File
@@ -90,6 +90,11 @@ class Concept extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity implements
*/
protected $headerImages;
/**
* @var \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference>
*/
protected $images;
/**
* @var \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\EP\EpProducts\Domain\Model\Product>
*/
@@ -110,6 +115,7 @@ class Concept extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity implements
$this->products = new \TYPO3\CMS\Extbase\Persistence\ObjectStorage();
$this->teaserImages = new \TYPO3\CMS\Extbase\Persistence\ObjectStorage();
$this->headerImages = new \TYPO3\CMS\Extbase\Persistence\ObjectStorage();
$this->images = new \TYPO3\CMS\Extbase\Persistence\ObjectStorage();
}
/**
@@ -326,6 +332,22 @@ class Concept extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity implements
$this->headerImages = $headerImages;
}
/**
* @return \TYPO3\CMS\Extbase\Persistence\ObjectStorage
*/
public function getImages()
{
return $this->images;
}
/**
* @param \TYPO3\CMS\Extbase\Persistence\ObjectStorage $images
*/
public function setImages($images)
{
$this->images = $images;
}
/**
* @param \EP\EpProducts\Domain\Model\Product $product
*/
public/typo3conf/ext/ep_products/Configuration/TCA/tx_epproducts_domain_model_concept.php
+51 -2
View File
@@ -24,8 +24,8 @@ return [
],
'types' => [
'1' => [
'showitem' => '--palette--;;top, --palette--;;naming, --palette--;;header, teaser, description, description_extended,
--div--;Bilder/Dateien, teaser_images, header_images',
'showitem' => '--palette--;;top, --palette--;;naming, --palette--;;header, teaser, description, description_extended,
--div--;Bilder/Dateien, teaser_images, header_images, images',
],
],
'palettes' => [
@@ -310,6 +310,55 @@ return [
],
$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
),
],
'images' => [
'exclude' => 0,
'label' => 'Galeriebilder',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'images',
[
'appearance' => [
'createNewRelationLinkTitle' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference'
],
'overrideChildTca' => [
'types' => [
\TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
--palette--;;filePalette',
],
],
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'title' => 'Preview',
'allowedAspectRatios' => [
'preview' => [
'title' => 'Standard',
'value' => 1.8,
],
],
],
'zoom' => [
'title' => 'Zoom',
'allowedAspectRatios' => [
'free' => [
'title' => 'frei',
'value' => 'NaN',
],
],
],
],
],
],
],
],
'maxitems' => 10
],
$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
),
],
'products' => [
'exclude' => 0,
public/typo3conf/ext/ep_products/ext_tables.sql
+1
View File
@@ -529,6 +529,7 @@ CREATE TABLE tx_epproducts_domain_model_concept
header_subtitle varchar(255) DEFAULT '' NOT NULL,
teaser_images int(11) unsigned NOT NULL default '0',
header_images int(11) unsigned NOT NULL default '0',
images int(11) unsigned NOT NULL default '0',
tstamp int(11) unsigned DEFAULT '0' NOT NULL,
crdate int(11) unsigned DEFAULT '0' NOT NULL,
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html
+50 -38
View File
@@ -18,32 +18,33 @@
{concept.description -> f:format.html()}
</div>
<f:if condition="{teasers}">
<a class="anchor" id="teasers"></a>
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</svg>
</button>
<button type="button"
data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
</svg>
</button>
</div>
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
<f:then>
<a class="anchor" id="teasers"></a>
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</svg>
</button>
<button type="button"
data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
</svg>
</button>
</div>
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
concept: teaser.concept,
hotel: teaser.hotel,
product: teaser.product,
@@ -60,26 +61,37 @@
dateTo: dateTo,
index: iteration.index
}"/>
</f:for>
</f:for>
</div>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<div class="text-right mt-4">
<f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen
</f:link.typolink>
</div>
</f:else>
</f:if>
</div>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<div class="text-right mt-4">
<f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen
</f:link.typolink>
</div>
</f:else>
</f:then>
<f:else>
<f:if condition="{concept.images -> f:count()} > 0">
<f:render partial="ImageGallery" arguments="{images: concept.images, id: 'concept-{concept.uid}', thumbnails: 1}"/>
</f:if>
</div>
</f:else>
</f:if>
<f:if condition="{concept.descriptionExtended}">
<div data-rte-content>
{concept.descriptionExtended -> f:format.html()}
</div>
</f:if>
<f:if condition="{teasers}">
<f:if condition="{concept.images -> f:count()} > 0">
<f:render partial="ImageGallery" arguments="{images: concept.images, id: 'concept-{concept.uid}', thumbnails: 1}"/>
</f:if>
</f:if>
</div>
<div class="col-span-3 lg:col-span-1">
<ul class="list-none p-0 m-0 space-y-2">