i get via CONTENT an Element from the page and want to render the image from this like all other images in the page.
i have installed sms for responsive images but when i render this image via typoscript an normal <img> will be outputtet.
how must i change my typoscript to render like in the partial file Media/Rendering/Image?
20 = FILES
20{
references {
table = tt_content
fieldName = image
uid.data = field:uid
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
file.width = 1920c
file.treatIdAsReference = 1
stdWrap.outerWrap = |
}
}
thank you very much!
As the example you mention is rendered in Fluid, I'd suggest to use Fluid as well. The ViewHelper for responsive images is used in Fluid.
Try to get away from rendering via TypoScript and use Fluid templates.
Related
I am migrating typoscript from TYPO3 6.2 ELTS to 7.x ELTS.
Following code works in 6.2 thanks to activateContentAdapter which is removed in TYPO3 7. https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/7.2/Breaking-66034-DropContentAdapter.html
Is that possible to still use HMENU/GMENU or should I rewrite it totally other way?
lib.navigation.socialmedia = HMENU
lib.navigation.socialmedia{
wrap = <ul>|</ul>
special = directory
special.value = 123
1 = GMENU
1{
NO{
wrap = <li class="first">|</li>|*|<li class="middle">|</li>|*|<li class="last">|</li>
altImgResource.import = uploads/media/
altImgResource.import.field = media
altImgResource.import.listNum = 0
ATagTitle.field = subtitle // title
}
}
}
you still could use GMENU but you need to change the filehandling. As mentioned files are no longer just copied to uploads/media/ but there is a file-handle (sys_filerecord) whose uid is used everywhere.
First substitution: treatIdAsReference
This is a usage for rendering an icon of the first media entry in a text menu (TMENUITEM) before the text (1).
The rendering is inside of the FILESobject which represents an (possible) array. SO it might be a little bit complicated to insert it into an IMGRESOURCEobject (2).
if you just want the resource adapt the renderObj, as this example renders the image (cropped) and generates an <img>tag.
NO.stdWrap.prepend = FILES
NO.stdWrap.prepend {
references {
table = pages
uid.data = current:originalUid // current:uid
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
import.data = file:current:uid
treatIdAsReference = 1
width = 150c
height = 150c
}
altText.data = file:current:alternative
titleText.data = file:current:title
params = class="menu-img"
stdWrap.typolink.parameter.field = uid
}
maxItems = 1
}
(1) with the options of CSS3 and HTML5 and the preferred way of accessibility you have multiple ways to use a clean text menu without 'hiding' text in graphics.
(2) you might use altImgResource.cObject = FILES and render an IMGRESOURCE instead of an IMAGE.
meanwhile (since TYPO3 9) you have menu_processors and you would render the menu with fluid, where you 'navigate' through the pagetree with all properties of each page, including images.
The page logo of a page should be stored in the root page as a media resource. The logo should then be displayed on top of the page using a TypoScript marker. This works so far:
lib.components.headerLogo = FILES
lib.components.headerLogo {
references {
table = pages
uid.data = leveluid:0, slide
fieldName = media
}
renderObj = COA
renderObj {
10 = IMAGE
10 {
file.import.data = file:current:publicUrl
}
}
}
However, if the logo is not set, this solution will output a empty img tag instead:
<img src="" width="0" height="0" alt="">
How can I prevent this output? A normal ifEmptydidn't help, because there is an actual tag rendered.
I would like to read content via TypoScript and render it through a custom Fluid template. Without css_styled_content or fluid_styled_content.
temp.test = CONTENT
temp.test {
table = tt_content
select.languageField = 1
select.selectFields = bodytext,image,header,header_link
select.where = colPos = 1
renderObj = FLUIDTEMPLATE
renderObj {
file = path/to/Teaser.html
}
}
This works with strings, say
<f:debug>{data.header}</f:debug>
But not with
<f:debug>{data.image}</f:debug>
returning only the number of images.
Now, in a classic TypoScript RenderObj (maybe a COA), you would have added something like
10 = FILES
10 {
required = 1
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:originalUid // file:current:uid
file.width=654
file.height = 327c
//stdWrap.typolink.parameter.data = file:current:link
altText.data = file:current:description // file:current:title // file:current:alternative
}
}
While nowadays, we want to do that in the Fluid template. But how to resolve the FAL image to pass it to the fluid template?
You should be able to use the TYPO3\CMS\Frontend\DataProcessing\FilesProcessor data processor that will fetch the file data for you so you can access it with {files} in your template.
renderObj = FLUIDTEMPLATE
renderObj {
file = path/to/Teaser.html
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10.references.fieldName = image
}
}
The main problem is all image information are stored in a different table called "sys_file_reference". Selecting "tt_content.image" will not help you here. There are 2 ways to solve this problem, IMHO.
1) Create your own viewhelper. This VH can be utilized to query the images as it is done here.
2) Create a small TypoScript lib and use it as f:cObject in your fluid template. This is described here.
I'm not saying that my solution is the best one. But it's the only one I'm aware of. Looking forward seeing better solutions ;)
I want to use a lazy-loader for my images. Therefore I found a JS which seems pretty comfortable. Nevertheless, my images need a class="lazy" so that the JS knows which images it should affect.
The problem is, that I'm using a dynamically generated page with images which are stored in the media relation of each page. Idk if you guys understood what i meant :D
But anyway, that's not the point. The point is, I need a way to give the rendered images a class by TypoScript. I'm looking for something like this:
[...]
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
altText.data = file:current:title
addClass = lazy
}
[...]
You can use params for this:
[...]
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
altText.data = file:current:title
params = class="lazy"
}
[...]
I'm trying to add a "user controlled" footer in the main layout of a Typo3 Fluid based template.
This means that I've added a backend layout with four columns in a special back-end page called "footer page". A user is able to add content elements in those columns using the WEB > PAGE module.
Whenever a user adds a content element (text, text w/images, bullet lists, etc...) in one of the columns, everything works and the content is correctly displayed.
But when the user tries to add a special menu content element, the menu isn't displayed and the column container stays empty.
the main layout
<body>
...
<div id="footer">
<f:cObject typoscriptObjectPath="lib.footer" />
</div>
</body>
main PAGE typoscript
page = PAGE
page {
# Regular pages always have typeNum = 0
typeNum = 0
10 = FLUIDTEMPLATE
10 {
#file = {$filepaths.templates}index_f.html
partialRootPath = {$filepaths.templates}partials/
layoutRootPath = {$filepaths.templates}layouts/
variables {
...
footer < lib.footer
...
}
}
}
lib.footer typoscript
lib.footer = COA
lib.footer {
10 = CONTENT
10 {
table = tt_content
select.pidInList = {$contentpage.footerPID}
select.where = colPos = 901
select.orderBy = sorting
stdWrap.wrap = <div id="footer-widget-1" class="col205">|</div>
}
20 = CONTENT
20 {
table = tt_content
select.pidInList = {$contentpage.footerPID}
select.where = colPos = 902
select.orderBy = sorting
stdWrap.wrap = <div id="footer-widget-2" class="col205">|</div>
}
...
}
Am I doing something wrong or is it a bug?
Typo3 version is 6.0.4
You may want to have a look at the VHS extension for TYPO3 - it contains one ViewHelper in particular which would let you render content elements from any column on any page (by UID). It can even render content elements from a list of content element UIDs (which you could specify in TypoScript, select in a FlexForm, make editable in the constants editor etc.):
http://fedext.net/viewhelpers/vhs/Content/RenderViewHelper.html
Many times the ViewHelpers from VHS will let you do exactly the same as TS lets you do, but do so directly in Fluid and with the option to manually control the HTML that is output.
Cheers,
Claus aka. NamelessCoder