I added to a Fluidtemplate cObject a FilesProcessor:
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10.references.fieldName = media
}
in my fluid template i get the correct files object:
0 => TYPO3\CMS\Core\Resource\FileReferenceprototypeobject
1 => TYPO3\CMS\Core\Resource\FileReferenceprototypeobject
This works:
<f:for each="{files}" as="file" iteration="i">
<img src="{f:uri.image(image: file, width: '967c', height: '967c')}" alt="">
</f:for>
but this throws an exception:
<img src="{f:uri.image(image: files.0, width: '967c', height: '967c')}" alt="">
Does anyone know why? When i debug it with d:debug i get for file the foreach exact the same output like files.0 without foreach.
Thanks!
Your inline notation not working because of you pass null value in notation. because of files.0 output is null
You store image as object. so you can't get this fields value like files.o see below screenshot.
Related
I've a jumbotron with a background image and a header inside.
The background image comes from the site properties, the header from a specific backend layout column.
current state
The jumbotron works perfectly with the background image and the header. But now I would like to change the css class of my header depending on whether an image is in the site properties or not.
how the result should look like (pseudo code)
if there is an image:
<div class="jumbotron" style="background-image: url(...)
<h1 class="header-type1">My header with standard styling</h1>
</div>
else:
<h1 class="header-type2">My header with different styling</h1>
This is my typoscript code
lib.jumbo < lib.dynamicContent
lib.jumbo {
20.renderObj = COA
20.renderObj {
5 = IMG_RESOURCE
5 {
file {
import = uploads/media/
import.data = levelmedia:-1
treatIdAsReference = 1
import.listNum = 0
width = 1022
height = 472
}
stdWrap {
wrap = <div class="jumbotron" style="background-image: url(|);">
required = 1
}
}
10 = TEXT
10 {
stdWrap {
field = header
required = 1
# if there is one image in the site properties use this wrap
wrap = <h1 class="header-type1">|</h1>
# if there is no image:
wrap < h1 class="header-type2">|</h1>
}
}
# this one should only be displayed too, if there is an image
90 = TEXT
90.value = </div>
}
}
lib.DynamicContent comes from the bootstrap package
Here we have a case where the typoscript solution will be a little complicated. But meanwhile we have alternatives:
Why don't you use FLUID for your rendering?
lib.jumbo < lib.dynamicContent
lib.jumbo {
20.renderObj = FLUIDTEMPLATE
20.renderObj {
template = Header
templateRootPaths.0 = EXT:my_site_ext/Resources/Private/page/Templates
variables {
header = TEXT
header.field = header
jumboImage = IMG_RESOURCE
jumboImage {
file {
import = uploads/media/
import.data = levelmedia:-1
treatIdAsReference = 1
import.listNum = 0
width = 1022
height = 472
}
}
}
}
and in the referenced fluid template file:
<f:if condition="{jumboImage}">
<f:then>
<div class="jumbotron" style="background-image: url({jumboImage})">
<h1 class="header-type1">{header->f:format.raw()}</h1>
</div>
</f:if>
<f:else>
<h1 class="header-type2">{header->f:format.raw()}</h1>
</f:else>
</f:if>
note:
the image generation could be optimized
I assume you even do not need this typoscript at all as you probably use the lib.jumbo like <f:cObject typoscriptObjectPath="lib.jumbo" arguments="..." />
At that place you could use a partial or just a section with a call to the {f:uri.image image="..."} viewhelper.
I recently changed form css_styled_content to fluid_styled_content. In my custom grid element I would like to render 'Content Element Layout' to this container. After switching to FSC it's not working anymore. How to get the fluid style content classes of an element via typoscript in my custom element? I render the element purely via typoscript like this:
Right now:
<div class="row test"> ... </div>
Via typoscript:
plugin.tx_myplugin.setup.my_1col {
preCObject = LOAD_REGISTER
preCObject {
containerClasses.cObject = COA
containerClasses.cObject {
10 = TEXT
10 {
value = equal-height
fieldRequired = flexform_equalHeight
noTrimWrap = | ||
}
...
stdWrap.insertData = 1
stdWrap.trim = 1
}
containerAttributes.cObject = COA
containerAttributes.cObject {
10 = TEXT
10 {
data = register: containerClasses
noTrimWrap = | class="row test |"|
}
}
}
..
}
How to get the fluid style content classes of an element via typoscript in custom element ... e.g.?:
Goal:
<div class="row frame frame-default frame-layout-0"></div>
On TYPO3 version 8 those fields are frame_class and layout
Should something like this be sufficient?
plugin.tx_myplugin.setup.my_1col{
stdWrap.wrap= <div class="frame frame-{field:frame_class} frame-layout-{field:layout}">|</div>
insertData=1
}
I want to implement responsive image rendering according to the different scale (media) in TYPO3 using sourceCollection?
<picture>
<source src="fileadmin/_processed_/imagefilenamename_595cc36c48.png"
media="(max-device-width: 600px)" />
<source src="fileadmin/_processed_/imagefilenamename_42fb68d642.png"
media="(max-device-width: 600px) AND (min-resolution: 192dpi)" />
<img src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" alt="" />
</picture>
I can render it using TypoScript but how can i use this in my own extension?
Thanks in advance.
The most straight-forward way is to use TypoScript. In the example below we use the same configuration I use for tt_content to render News items.
First of all you need to define a TypoScript object that uses the file that is passed to the object. Then you copy the configuration that is used for tt_content.
lib.responsiveImage {
default = IMAGE
default {
file.import.current = 1
altText.data = field:altText
titleText.data = field:titleText
layoutKey = picturefill
layout.picturefill < tt_content.image.20.1.layout.picturefill
sourceCollection < tt_content.image.20.1.sourceCollection
}
}
(You may need to change the example to another layout if you don't want to use picturefill.)
Then, in Fluid, you pass the image to TypoScript. The example below maps the uri of a FileReference:
<f:alias map="{image: {uri: '{f:uri.image(src:\'{mediaElement.uid}\', treatIdAsReference:\'1\')}', altText: mediaElement.originalResource.alternative, titleText: mediaElement.originalResource.title}}">
<f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="{image}" currentValueKey="uri" />
</f:alias>
You can also define other configuration, e.g.
lib.responsiveImage {
default = IMAGE
default {
[...]
}
newsDetail < .default
newsDetail {
[different configuration for type newsDetail]
}
}
I have an HTML Dom looking like this:
<div class="mydiv" id="mydivId">
<img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false">
</div>
I'm trying to change the img Source, so i made the following to access the image without success:
Image imageElement = (Image) Document.get()
.getElementById("mydivId")
.getElementsByTagName("img").getItem(0);
How can i get the <img> dom element as Image then change its Source?
Get the ImageElement with
ImageElement image = (ImageElement) DOM.getElementById("mydivId").getFirstChildElement();
or create an Image widget by wrapping the existing img element like in
Image img = Image.wrap(DOM.getElementById("mydivId").getFirstChildElement());
As mentioned by Saeed Zarinfam it gets easier if you assign an unique id to the image itself.
You have to assign an id to your image tag:
<div class="mydiv" id="mydivId">
<img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false" id="myImgId">
</div>
Then you can access to it using following code:
Element elem = DOM.getElementById("myImgId");
Window.alert(elem.getAttribute("src"));
Or if you do not want to assign an id to your image tag, you can use following code:
Element elem = DOM.getElementById("mydivId");
Window.alert(elem.getFirstChildElement().getAttribute("src"));
I tried to create a typo3 template with a special div-tag.
The editors should have the possibility to add images to the page-element. The goal should be the following code:
<div id="special_div_tag_in_template">
<img src="first_image_from_editor_in_page_element.png" />
<img src="second_image_from_editor_in_page_element.png" />
<img src="third_image_from_editor_in_page_element.png" />
</div>
Is there a possibility to create a custom element preset / form field?
I hope some one has a hint how to solve with this problem.
Thanks, Andreas
You can use the media field of the page properties:
lib.headerImage = COA
lib.headerImage {
wrap = <div id="special_div_tag_in_template">|</div>
10 = IMAGE
10 {
file {
import = uploads/media/
import {
field = media
listNum = 0
}
// set the dimensions if you want
height = 200
width = 100m
}
}
// create a copy and select 2nd image
20 < .10
20.file.import.listNum = 1
// create a copy and select 3rd image
30 < .10
30.file.import.listNum = 2
}
Take a look at the TYPO3 Wiki for more examples of header images.
A different approach would be to create DS/TO in TemplaVoila and insert this as a flexible content element (FCE)