I have a TYPO3 9.5.7 installation using fluid_styled_content. The image sizes for content elements can be set using the following TS constants:
styles.content.textmedia {
maxW = 1170
maxWInText = 385
}
Is it possible to set these values depending of the column (colPos) of a content element?
In a legacy TYPO3 6 installation with css_styled_content I was able to use the following TS, but it doesnt work anymore:
image.20.maxW.cObject = CASE
image.20.maxW.cObject {
key.field = colPos
default = TEXT
default.value = 1170
# Main column
0 = TEXT
0.value = 770
# Right column
2 = TEXT
2.value = 770
# Header
3 = TEXT
3.value = 1170
}
You need to identify where your TS-constants are used in your TS-setup.
Either you build the CASE object there or you need to do it in your fluid.
Your CASE was in TS setup as CSC did (nearly) all the rendering with TS.
In FSC the rendering is done in fluid templates. There you also should have access to other fields like colPos and you could implement a logic. But that logic might be complicated (the implemantation of fluid switchis not very performant) and it should be easier to compute the correct sizes in the TS part where the constants are transferred to the TS setup and prepared for usage in fluid templates.
Related
I have this implementation, using it in a page level 2 submenu. Each level 2 menu has multiple subpages. Each subpage has one image. So this implementation produces an image from each page for each submenu. For example, a submenu with 2 subpages will have 2 images (one from each subpage).
1 = FILES
1 {
references {
table = pages
fieldName = media
data = levelmedia:-1, slide
}
begin = 0
maxItems = 2
renderObj = COA
renderObj {
2 = IMAGE
2 {
file {
//params = -sharpen 50 +profile "*" -quality 100
import.data = file:current:uid
treatIdAsReference = 1
width.optionSplit = 300c|*|400c
height.optionSplit = 350c|*|450c
}
}
}
}
Would like to have images cropped in different sizes such that image 1 is cut to different dimensions from image 2 and so on.
My ImageMagick installation works perfectly. Am actually cropping single images with it without a hitch.
Without the optionSplit above, the images are cut to size nicely. Unfortunately with the optionSplit it simply outputs the images in their original sizes.
How can I produce different image sizes? My understanding is that optionSplit is the way to go (from the manuals). I read in articles that soureCollection for responsive images use optionSplit. I imagine another way would be to use an image register counter and use CASE to determine how to cut image 1, 2, 3 and so on, but am not familiar with register counters (maybe someone can show me how to do this?). And yet another way would be to use a file/image index number but I've tried looking at the manuals for hours for such a pointer and nowhere is it listed if there's any to help with processing. Anybody know a way to do this?
rendering two consecutive images with different paramters will be difficult in typoscript:
your optionsplit can not success as in the renderObj you always have only one file. A bad habit of all renderObj.
on the other hand: there is no property optionSplit. the functionality is build in any wrap property.
therefore a handling in typoscript could be to concatenate the elements, then split them again, but then use different options in the split renderObj to handle it separately.
or implement a counter with a register variable, then evaluate the register to set different values.
easier would be a handling in fluid, where you could use an iterator with the f:forviewhelper, and then do an f:if (for two cases) or an f:switch (for more cases) on {iterator.index} to render individual versions.
Based on #Bernd answer on the fact that each page (as item) is delivered as an object in TMENUs in each iteration, it is possible to achieve such image rendering in one of two ways:
First,
Through the use of two register entries register:count_menuItems which holds the total number of items you will be processing; and register:count_MENUOBJ which holds the index of the current item being iterated (starts at 1). These two can be use in conjunction with a CASE statement to thoroughly process each image to one's liking. If a page has multiple images, there are two more register items one can use, these are, register:FILES_COUNT (which starts to count starting with 0) and register:FILES_NUM_CURRENT. No need for implementing a registry counter since these registry entries are in-themselves, counters.
Secondly,
There's a much easier way, a far less time-consuming way, that uses a wrap as explained by #Bernd, as follows;
NO = 1
NO {
1 = LOAD_REGISTER
1 {
width.cObject = TEXT
width.cObject.stdWrap.wrap = 100c||200c
height.cObject = TEXT
height.cObject.stdWrap.wrap = 300c||400c
}
2 = FILES
2 {
# Get the images related to the current page
references {
table = pages
fieldName = media
}
# Render each image and wrap it as appropriate
renderObj = IMG_RESOURCE
renderObj {
file {
treatIdAsReference = 1
import.data = file:current:uid
width = {REGISTER:width}
width.insertData = 1
height = {REGISTER:height}
height.insertData = 1
}
}
stdWrap {
wrap = <img src="|" />
}
}
}
As you can see, this code is being used in a TMENU and processes each image based on different rules defined in segment 1 and stored by the LOAD_REGISTER. The trick is in the wraps. stdWrap's wrap already contains optionSplit. So by storing the desired pattern, the stdWrap will process the correct value to be stored for each iteration.
It has worked for me. Hope it helps someone.
Is it possible to change the l10n_mode of a field (e.g. assets) based on the CType, layout or PageTree?
Use case:
Default l10n_mode of assets is 'exclude' (set by a site package extension)
For a specific CType it's necessary to change the assets field in translations (to allow translation of captions)
In TYPO3 7.6 the following was possible:
[PIDinRootline = 173]
config.sys_language_softMergeIfNotBlank = tt_content:assets
[end]
EDIT
sys_language_softMergeIfNotBlank
was removed in TYPO3 8.7, so this is not possible anymore. Breaking Change
In TYPO3 8.7 you can use below typoscript condition.
For Page Layout.
[page|layout = 1]
config.sys_language_softMergeIfNotBlank = tt_content:assets
[end]
For pageTree.
[treeLevel = levelnumber, levelnumber, ...]
config.sys_language_softMergeIfNotBlank = tt_content:assets
[end]
For Ctype
[page|field = value]
config.sys_language_softMergeIfNotBlank = tt_content:assets
[end]
For more typoscript condition Click Here
The 3 columns in my backendlayout should be equal size, independent of their content. In my case their width get determined by their content though. Glad about any hints!
Environment:
TYPO3 8.7.0
PHP 7.0.13
MySQL 5.6.34
Installed Extensions:
gridelements dev-master c5120b0e
realurl 2.2.0
slickcarousel 8.x-dev
vhs 4.1.0
The TS was generated using the wizard. It is a 3 columns layout with 2 rows. The second row has 3 cols (colspan = 1) and the first one has 1 col (colspan = 3).
mod.web_layout.BackendLayouts {
MainTemplate {
title = MainTemplate
name = MainTemplate
icon = EXT:amtemplate/ext_icon.png
config {
backend_layout {
colCount = 6
rowCount = 2
rows {
1 {
columns {
1 {
name = LLL:EXT:amtemplate/Resources/Private/Language/locallang.xlf:amtemplate_be_layout_maintemplate.sliderarea
colPos = 1
colspan = 6
}
}
}
2 {
columns {
1 {
name = LLL:EXT:amtemplate/Resources/Private/Language/locallang.xlf:amtemplate_be_layout_maintemplate.left
colPos = 2
colspan = 2
}
2 {
name = LLL:EXT:amtemplate/Resources/Private/Language/locallang.xlf:amtemplate_be_layout_maintemplate.main_content
colPos = 0
colspan = 2
}
3 {
name = LLL:EXT:amtemplate/Resources/Private/Language/locallang.xlf:amtemplate_be_layout_maintemplate.right
colPos = 3
colspan = 2
}
}
}
}
}
}
}
}
Worked here in 8.7.1 without any problems. Maybe you wann update to the latest release?
There are two different concepts you are mixing up here, namely colspan and width.
The colspan attribute is used to tell a cell of a table how many of the other cells of another row it should overlap. So this has nothing to do with fixed widths even though it might feel like that, when you got the same content in each cell or no content at all. As soon as you fill the table cells with different content, the width of each cell might differ even though some of these cells might use the same colspan value.
So colspan actually just defines the relation between the cells but not their width. Still the core somehow circumvents that behaviour by applying min and max width values to several parts of the page module via CSS, so the cells will stay within a certain width range.
Now that you have installed gridelements, there can not be such a range anymore, because there might be nested grid structures that have to consume way more space. So gridelements uses a CSS removing that range and thereby restores the default behaviour of HTML table cells.
I am experimenting with TYPO3 and Fluid and at the moment I am in trouble. It is about a backendlayout I created in TYPO3.
It consists of two content areas: "left-column" and
"right-column".
To bring them to frontend appearance via fluid was no problem. But then I created four content elements (text and image ) within "left column". I wanted to wrap each of these content elements with a bootstrap wrapper e.g. text "col-md-8" and img "col-md-4".
Unfortunately, I have not found any hints or documentation how to do this. Maybe someone can help me with that issue and tell me how to customize the wrappers of my content elements. Is it possible to do it via Fluid at all?
Backend layouts are used to map columns to your template, but they doesn't allow you to decide how each of them will be displayed. There are several solutions... but last time my favorite is extension Grid Elements.
It allows you to create sub-containers for Content Elements, so you can add, any combination of Bootstrap's grid layout (i.e. 2 columns - 4-8 or 3 columns - 3-3-3 etc...) and then wrap it whit Bootstrap classes.
Sample for mentioned 2 columns - 4-8 Grid Element record:
Title: 2 columns: 4-8 or whatever you want ;)
Alias: 2_columns_4_8 (must be unique)
Grid Configuration:
backend_layout {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Left
colPos = 221
}
2 {
name = Right
colPos = 222
}
}
}
}
}
Finally in your TypoScript template add rendering definition like this:
tt_content.gridelements_pi1.20.10.setup {
2_columns_4_8 < .default
2_columns_4_8 {
wrap = <div class="row">|</div>
columns {
221 < .default
221.wrap = <div class="col-sm-4">|</div>
222 < .default
222.wrap = <div class="col-sm-8">|</div>
}
}
}
(in the sample observe where and how alias and also colPos values are used later in TypoScript)
hint: Don't waste time for creating any possible combination of columns at beginning, instead create one ad hoc when required, usually you need only few of them.
P.S. TYPO3 is written uppercase, always!
How would one go about displaying the page content as a list of previews pointing to individual content elements, instead of just displaying them all at once? I will be grateful even for just a conceptual answer.
For creating a menu of content elements you can use the content type menu, set the menu type to section index and select a page.
You can of course modify the output by manipulating the TypoScript.
Here an example that adds parts of the bodytext field and an image. The latter is not tested and written in pseudo TypoScript ;-)
tmp < tt_content.menu.20.3.renderObj
page.5 < tt_content.menu.20.3
page.5.renderObj >
page.5.renderObj = COA
page.5.renderObj {
wrap < tmp.wrap
stdWrap.typolink < tmp.typolink
10 < tmp
10.wrap >
10.typolink >
20 = TEXT
20.field = bodytext
20.parseFunc < lib.parseFunc_RTE
20.cropHTML = 100
30 = IMAGE
30.file.import.field = image
30....
}