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!
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.
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.
so here's my problem: I tried to output an additional text once a specific checkbox is checked in powermail.
The select field contains multiple options and all are selectable of course, but when i.e. field 1 is checked the sender should have the standard text in the mail plus "Lorem ipsum", but when the field isn't checked there should be no additional output at all.
I could find a solution for altering texts depending on a selection for single selects / dropdowns and it works like a charm, but for a reason the multi-select doesn't work at all. I can't figure out why so maybe someone can help.
TS:
lib.serverex = CASE
lib.serverex {
key.data = GP:tx_powermail_pi1|field|produktang|1
key.intval = 1
1 = TEXT
1.value = Lorem Ipsum
#Default
default = TEXT
default.value =
}
The email in powermail looks like this:
Some standard text...
{f:cObject(typoscriptObjectPath:'lib.serverex', data:'{produktang}')}
The checkbox configuration inside the form (id: produktang):
first product | 1
second product | 2
third product | 3
fourth product | 4
fifth product | 5
Either it appends it no matter what the input is/checked boxes are or it doesn't send the additional text at all. I'm probably missing something here.
Thanks in advance!
The result of field {produktang} is an array (of course because it's a checkbox). So you have to find out if there is any key with value "2" (e.g. if you're searching for product 2) of in your case tx_powermail_pi1|field|produktang|1 == 2
I solved it now with kind of a trick because I couldn't make it work in a different way.
What I did:
I moved the specific product where the email alters to the first position in the multiselect element. So it's Index will be 0.
The next thing is to check if the element in position 0 of the array equals the desired product, in my case it's "firstProduct". Since it's in the first position it'll always be "firstProduct" if "firstProduct" is checked and the additional text will be "printed". I set the default text to an empty string so it'll stay blank in every other case.
Here's the code:
lib.serverex = CASE
lib.serverex {
key.data = GP:tx_powermail_pi1|field|produkt|0
firstProduct = TEXT
firstProduct.value = Lorem Ipsum
#Default
default = TEXT
default.value =
}
The configuration of the Checkbox inside powermail:
firstProduct
secondProduct
thirdProduct
fourthProduct
fifthProduct
And the code which is inside of the email itself:
{f:cObject(typoscriptObjectPath:'lib.serverex', data:'{produkt}')}
It probably works in another way as well, but I couldn't solve it another way. Hope this helps if someone encounters the same issues I had.
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.
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....
}