I am using TYPO3 7.6 with 'CSS Styled Content'.
What I want to do is override the img tag if it is the first image listed in the content element.
So I have added a custom img tag under tt_content.image.20.1.1.layout.custom
Now how do I override tt_content.image.20.1.1.layoutKey if it is the first image?
Eg:
tt_content.image.20.1.1.layoutKey.override = custom
tt_content.image.20.1.1.layoutKey.override.if {
value = 1
equals.field = imageOrderNumber??
}
Or is there another way?
There is a register containing the current image number: register:IMAGE_NUM_CURRENT.
So it should work like this:
tt_content.image.20.1.1.layoutKey.override = custom
tt_content.image.20.1.1.layoutKey.override.if {
value = 1
equals.data = register:IMAGE_NUM_CURRENT
}
Related
I want to get an array of custom content objects into my fluid template, so I can build an unordered List.
This is what I want to build:
unordered list of li elements containing image, header, bodytext
In my backend I build a custom element like this:
my custom content element with fields image, header, bodytext from tt_content
What I want to achieve is, that I have a container and in it I can have my custom content element. When expanding it, I can add header, image and bodytext. So that i basically get an array of custom content Elements that I can loop over in my fluid template.
It should look like this:
each entry should be my custom content element with image, header, bodytext when expanding.
Thanks a lot for help!
You can use the extension gridelements to create a container that can hold unlimited content elements and use its template to loop over the partial which creates your content element.
If you want to do it the TYPO3 way instead of using Grid Elements..
I see you already know how to make a custom content element. To make children within your content element you could make an extra SQL field xxx_foreign.
You need to make 2 content elements. The child you know how to make.
The TCA for the inline field of the parent and needed extra colPos in the backendLayout you can find here
Then you will need in typoscript a dataprocessor I will give an example in which the child contains assets (media). In that case you need a nested solution:
tt_content {
xxx_education_block < lib.xxxCustomContentElements
xxx_eheducation_block {
templateName = xxxEducationBlock
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
10 {
if.isTrue.field = xxx_educations
table = tt_content
pidInList.field = pid
where = xxx_foreign=###uid### AND deleted=0 AND hidden=0
orderBy = sorting
markers {
uid.field = uid
}
as = xxxEducations
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
if.isTrue.field = assets
references {
fieldName = assets
}
as = assets
}
}
}
}
}
}
To add this to the content wizard:
mod.wizards.newContentElement.wizardItems.blocks {
header = Xxx blokken
after = common
elements {
xxx_education_block {
iconIdentifier = content-bullets
title = XXX - Education intro block
description = Introblock xxx
tt_content_defValues {
CType = xxx_education_block
}
}
}
show := addToList(xxx_education_block)
}
If you do a debug in Fluid you should now be able to iterate over the children and the assets of the children.
I want to reach the following:
I'm creating an new content element "text media", fill out title, text and perhaps select an image. I also created categories which I select under the tab "categories".
Now I want to integrate these selected categories in the fluid template to make it work as an javascript filter.
How can I achieve this task?
Thanks!
You can use a DataProcessor to get the category data. You need to extend the TypoScript for the textmedia element.
Category example: https://git.spooner.io/spooner/just_news/blob/master/Configuration/TypoScript/RenderingDefinitions/news_list.ts#L23
DataProcessor documentation: https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html#dataprocessing
Here you can see the default textmedia TS, added object 30:
# Text & Media:
# Any number of media wrapped right around a regular text element.
#
# CType: textmedia
tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
templateName = Textmedia
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = assets
}
20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
# Get categories
30 = TYPO3\CMS\Frontend\DataProcession\DatabaseQueryProcessor
30 {
put the login in...
}
}
stdWrap {
editIcons = tt_content: header [header_layout], bodytext, assets [imageorient|imagewidth|imageheight], [imagecols|imageborder], image_zoom
editIcons {
iconTitle.data = LLL:EXT:fluid_styled_content/Resources/Private/Language/FrontendEditing.xlf:editIcon.textmedia
}
}
}
I would like to set a default value for an image width in TYPO3 Neos.
Right now an editor may insert any image and the »width« value will be equal to the original size by default.
Example
First question:
I would like to set a default of 400 pixel instead. But the width field is no distinct node property, but an attribute of »image«. How do I set default values for attributes in Neos?
Second question:
What would I need to do, to completely hide the pixel based value field and offer an selection instead? Like „Option 1: Small teaser (150px), Option 2: Regular content image (400px), Option 3: Large image (980px)“.
Should I somehow remove the »width« attribute and add a new property node? Or may I change the type of the attribute somehow?
you can extend and configure default NodeType (TYPO3.Neos.NodeTypes:ImageMixin) for ImageEditor in Neos CMS.
Follow this steps:
Step 1:
Create new configuration file NodeTypes.Mixins.yaml in your sitepackage (for example: /Packages/Sites/YourSitePackageName/Configuration/NodeTypes.ImageMixin.yaml)
Step 2:
Copy default configuration for ImageMixin from Neos CMS Core (/Packages/Application/TYPO3.Neos.NodeTypes/Configuration/NodeTypes.Mixin.yaml) and remove properties which you doesn't like to extend/configure/override (for example: alternativeText and title). At the end you must have similar code:
`# Image mixin
'TYPO3.Neos.NodeTypes:ImageMixin':
abstract: TRUE
ui:
inspector:
groups:
image:
label: i18n
position: 5
properties:
image:
type: TYPO3\Media\Domain\Model\ImageInterface
ui:
label: i18n
reloadIfChanged: TRUE
inspector:
group: 'image'
position: 50`
Step 3: If you like to hide pixel base value fields (width, height) and crop button, you must add following editor options to image property:
position: 50
editorOptions:
features:
crop: FALSE --> hides crop button
resize: FALSE --> hides pixel based value fields
You can read more about this in Neos Documentation.
Step 4: For selection of predefined image sizes we add custom property imageSize (you can use other name) with following configuration:
imageSize:
type: string
ui:
label: 'Select Image Size'
reloadIfChanged: TRUE
inspector:
group: 'image'
position: 60
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
editorOptions:
values:
small:
label: 'Small teaser (150x150)'
regular:
label: 'Regular content image (400x270)'
large:
label: 'Large image (980x500)'
allowEmpty: TRUE
This configuration add an select field with custom image sizes.
Step 5: Now we need to override default Image NodeType in TypoScript. Add following code to your Root.ts (/Packages/Sites/YourSitePackageName/Resources/Private/TypoScript/Root.ts2) (maybe you use other typoscript file).
prototype(TYPO3.Neos.NodeTypes:Image) {
// overwrite template for images
templatePath = 'resource://Vendor.YouSitePackageName/Private/Templates/NodeTypes/Image.html'
// define maximumWidth for images
maximumWidth = TYPO3.TypoScript:Case {
smallCondition {
condition = ${q(node).property('imageSize') == 'small'}
renderer = 150
}
regularCondition {
condition = ${q(node).property('imageSize') == 'regular'}
renderer = 400
}
largeCondition {
condition = ${q(node).property('imageSize') == 'large'}
renderer = 980
}
fallback {
condition = ${q(node).property('imageSize') == ''}
renderer = 400
}
}
// define maximumHeight for images
maximumHeight = TYPO3.TypoScript:Case {
smallCondition {
condition = ${q(node).property('imageSize') == 'small'}
renderer = 150
}
regularCondition {
condition = ${q(node).property('imageSize') == 'regular'}
renderer = 270
}
largeCondition {
condition = ${q(node).property('imageSize') == 'large'}
renderer = 500
}
fallback {
condition = ${q(node).property('imageSize') == ''}
renderer = 270
}
}
allowCropping = true
}
TYPO3.TypoScript:Case works like switch-function in PHP. We use this function for maximumWidth and maximumHeight. After create an condition for every option. In this condition we check which image size is selected and then write custom pixel value for width and height. With fallback condition you can define default value if image size is empty or was not selected.
The final solution may look as follows:
Example: Select Image Size
I hope this solution was helpful.
I'm trying to add additional parameter to tt_news img list source: data-src="path-to-img". Is it possible? I try with generic marker but without any success:
plugin.tt_news.genericmarkers {
data = imgsource
imgsource = TEXT
imgsource {
field = image
wrap = <img src="uploads/pics/|" data-src="uploads/pics/|" />
file.maxW = 112
file.maxH = 124
}
}
But on output I only have this in source: <img src="uploads/pics/img.jpg" data-src="uploads/pics/ without second img source, img size and close tag.
Any suggestions?
Some remarks before I show you an example:
the »wrap« property only allows one pipe (TYPO3 is replacing the first »|« character with the current value), that why your second parameter is empty
the TEXT objekt only allows value and all properties listed in the »stdWrap« section (see TEXT object: http://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Text/Index.html, list of all stdWrap-properties http://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Stdwrap/Index.html)
so TEXT does have properties like »wrap« or »case« or »substring«, but no »file«
what you want is an IMAGE object, which allows to manipulate images
plugin.tt_news.genericmarkers {
imgsource = IMAGE
imgsource {
file.import = uploads/pics/
file.import.field = image
file.import.listNum = 0
file.width = 250
# if you just want to link the original image
params.field = image
params.wrap = data-src="/uploads/pics/|"
/*
# if you want want to manipulate the image as well, then use this code instead
# IMG_RESOURCE is almost the same as IMAGE, but returns only the path to the resulting image, not the »<img src="">«-Markup
params.cObject = IMG_RESOURCE
params.cObject {
file.import = uploads/pics/
file.import.field = image
file.import.listNum = 0
file.width = 500
stdWrap.wrap = data-src="|"
}
*/
}
}
Here is my code:
lib.navigation{
10 = RECORDS
10 {
source = uid
tables = tt_content
}
}
Here I'm just creating a menu through content element and I wanted to remove the default div with class=csc-frame csc-frame-frame1 from the rendered content
I used like this:
lib.navigation{
10 = RECORDS
10 {
conf.tt_content.stdWrap.innerWrap.cObject.default = TEXT
source = uid
tables = tt_content
}
}
but this will remove only csc_default div.
This might do the trick. Make sure to include it before the navigation definition.
tt_content.stdWrap.innerWrap.cObject.default >