I want to crop images in Fluid with the f:image or the f:uri.image viewhelper (TYPO3 8.7). Since TYPO3 7.2 the usual way does not work anymore:
This:
<f:image image="{file}" width="500c" height="500" />
does not work.
In the fluid guide I found the hint that since TYPO3 7.2 I have to use crop. I found this in the change log:
https://docs.typo3.org/typo3cms/extensions/core/7.6/Changelog/7.2/Feature-65584-AddImageCropping.html
So this should work, but it doesnt:
<f:image image="{file}" crop="0,0,500,500" />
The images are rendered but in default size.
Any ideas? Anything changed in later versions?
I tried with a fresh installation and found my fault.
cropping with c and m does indeed work in TYPO3 8 - the hint in the fluid manual is wrong.
in short syntax you have to use '' in order to send the c or m correct.
This syntax is wrong:
<img src="{f:uri.image(image:file, width:200c, height:200)}">
there is no error message and the images are rendered but the letter c is ignored. You have to use this syntax:
<img src="{f:uri.image(image:file, width:'200c', height:'200')}">
this will work.
One additional hint: after changing the syntax the images are not rendered every time but only when the size has changed. Sometimes you get simply the cached images ... Deleting the content on /fileadmin/_temp does help.
Well - perhaps it will help some one :-)
You can use f:image like below. it's work for me.
<f:image src="{file.originalResource.publicUrl}" width="770c" height="517c" height="350c" />
You could also specify the crop settings in tca and use this settings in the FE, for an example look at the repository : https://github.com/frans-beech-it/t3ext-config_examples.
Besides that, in the install tool you can check if cropping works on your machine. It can happen that there are already processed images for your size, if you adjust the cropping information of image with 1px a new processed image is created. If then the image works, clear the processed files to generate a new image for your desired formats.
Related
I try to translate some labels in a mask content element (TYPO3 10). I first created the mask element and mask created a directory "typo3conf/ext/mask_project". I created the file "typo3conf/ext/mask_project/Resources/Private/Language/locallang.xlf" and put a label "read_more" in there.
In my FLUID template ("typo3conf/ext/mask_project/Resources/Private/Mask/Frontend/Templates/Staff.html") I tried:
<f:translate key="EXT:mask_project/Resources/Private/Language/locallang.xlf:read_more" />
<f:translate key="LLL:EXT:mask_project/Resources/Private/Language/locallang.xlf:read_more" />
Unfortunately nothing is printed out. Does anyone has an idea?
The LLL:EXT:...:... syntax is correct (https://docs.typo3.org/other/typo3/view-helper-reference/10.4/en-us/typo3/fluid/latest/Translate.html) for accessing full paths. For the default file location, you would usually not have to add the whole path (this depends a bit on the FLUIDTEMPLATE configuration). In your case you can also use the ViewHelpers extensionName= parameter.
Some hints if you still get no output:
For new labels to be known, you'll need to clear the system cache.
https://docs.typo3.org/m/typo3/reference-coreapi/10.4/en-us/ApiOverview/Internationalization/XliffApi.html
https://docs.typo3.org/m/typo3/book-extbasefluid/master/en-us/9-CrosscuttingConcerns/1-localizing-and-internationalizing-an-extension.html
There used to be an extension for older TYPO3 versions. How is this to achieve this on a per page basis in TYPO3 LTS9?
Added:
<f:for each="{variants}" key="name" as="variant">
<f:variable name="breakpoint">{variant.breakpoint as integer}</f:variable>
<f:variable name="width">{variant.width as integer}</f:variable>
<f:if condition="{width}">
<source data-variant="{name}" data-maxwidth="{width}" {f:if(condition: breakpoint, then: ' media="(min-width: {breakpoint}px)" ' )}srcset="{f:uri.image(image: file, cropVariant: name, maxWidth: width)}">
</f:if>
</f:for>
<img src="{f:uri.image(image: file,
cropVariant: 'default',
maxWidth: variants.default.width
)}"
title="{file.title}"
alt="{file.alternative}"
>
That can be done with the appropriate templating.
While earlier the rendering was done with typoscript, nowadays the rendering is done with fluid.
You probably use Fluid Styled Content (FSC), this is an system extension and has its original templates at typo3_src/typo3/sysext/fluid_styled_content/Resources/Private/...
Beyond Templates you will find Image.html, Textmedia.htmland Textpic.html,
Those will call the Partial Media/Type/Image.html
Copy those file(s) into your place (site-extension or fileadmin) and change the markup to show a small square thumbnail which is linked to the full image. Use any library for it as you like.
Don't forget to add your template-path /partial-path to the FSC settings.
If you look into this partial you will find a condition which checks for {data.image_zoom}. If set the small inline image rendered in partial Media/Rendering/Image.html is linked to a bigger version.
You will find dimensions and settings which decide the thumbnail. So you only need the correct configuration to get square thumbnails.
After a lot of tweaking in my templates that would not work to my expectations, I came up with the perfect solution for my needs. I was astonished how simple it was in the end, without even changing anything in the original bootstrap_package templates:
I set a condition for pages I want to have square thumbs
[globalVar = TSFE:id=10, TSFE:id=20, TSFE:page|pid=30]
page.includeCSS {
custom_css = fileadmin/site/Resources/Public/Css/custom.css
}
page.includeJSFooter{
scripts = fileadmin/site/Resources/Public/JavaScript/Dist/square_thumbs.js
}
[end]
css:
picture img{
object-fit: cover;
}
js:
var cw = $('picture img').width();
$('picture img').css({'height':cw+'px'});
As far as I know, there's no such thing as an f:link.file or v:link.file viewhelper.
There used to be a solution using file.originalResource.publicUrl as the value to point the link to, as in
<f:link.page pageUid="{file.originalResource.publicUrl}" target="_blank">
Am I right that this is no longer necessary? I got this (using ext:mask):
<f:link.page pageUid="{file.identifier}" target="_blank">
returning the same value, while originalResource.publicUrl would not even show up in f:debug.
BUT in file.identifier the storage path, e.g. fileadmin, is not present. How do I add it to the viewhelper?
Or, what is the currently recommended solution for a link to a file in TYPO3 7.6?
Just use {file.name}. When absolute URL or some special configuration is needed use <f:link.typolink parameter="{file.publicUrl}">{file.name}</f:link.typolink>.
TYPO3 11 introduced a new ViewHelper for this
<f:link.file file="{file}" target="_blank">Download</f:link.file>
https://docs.typo3.org/other/typo3/view-helper-reference/11.5/en-us/typo3/fluid/latest/Link/File.html
For me, #minifranske’s solution worked only as a hint: I needed to use {file.originalResource.publicUrl} instead:
<f:link.typolink parameter="{file.originalResource.publicUrl}">{file.originalResource.title}</f:link.typolink>
also available:
{file.originalResource.name}
{file.originalResource.description}
{file.originalResource.alternative}
Nevertheless, if anybody knows a proper core solution which resembles that of the Rich Text Editor, I’d be happy to hear about it:
file link
page link
<f:uri.image image="{imageObject}" /> produces the path + filename for your FAL object.
In a fluid template, I would like to output a linked file's size.
I'm using f:link.page to link to the file, as I think this is the way to do it (please correct if not).
<f:link.page class="download" pageUid="fileadmin/redaktion/download/papers/{paper.download}" {paper.author}">PDF</f:link.page>
As I'm already using the extension ml_links on the site, I thought I could pass the link through lib.parseFunc_RTE, but
<f:format.html parseFuncTSPath="lib.parseFunc_RTE"><f:link.page class="download" pageUid="fileadmin/redaktion/download/papers/{paper.download}" {paper.author}">PDF</f:link.page></f:format.html>
just wraps it into p.bodytext.
Do I have to use a different syntax to apply f:format.html TO f:link.page - or is there a better way to do it (via a fluid or vhs viewhelper)?
Actually custom VH is fastest way to achieve that, i.e. basing on this VH, you'll need to replace size param with a file path, and then use i.e. filesize function of PHP to fetch the size in bytes.
Here's my VH:
https://gist.github.com/ursbraem/9645542
I've simplified the original a little, outputting "KiB" for file size is too technical for me.
The easiest way is to use native TYPO3 FAL parameter originalFile.size :
{audio.0.originalFile.size -> f:format.bytes()}
When i use fluidcontent i have vhs extension installed aswell and then just use:
<f:format.bytes decimals="1">{v:media.size(path: '{file}')}</f:format.bytes>
This outputs clean readable sizes like "28.2 MB".
If you are using VHS you may consider https://fluidtypo3.org/viewhelpers/vhs/master/Media/SizeViewHelper.html (in combination with f:format.bytes).
In newer TYPO3 versions you can use the originalResource.size attribute of a FileReference object.
{file.originalResource.size -> f:format.bytes()}
or in your case:
{paper.download.originalResource.size -> f:format.bytes()}
TYPO3 10
I needed a file size output for a DCE module in TYPO3 10, this is what I came up with, using VHS:
<f:format.bytes><v:media.size><v:format.trim characters="/"><f:uri.typolink parameter="{item.link}" /></v:format.trim></v:media.size></f:format.bytes>
Explained:
f:uri.typolink generates the full path I need for v:media.size
v:media.size requires the path without a leading slash, v:format.trim removes this character.
f:format.bytes displays the output from v:media.size in KB or MB.
i've created a Custom Content Element with Fluid and Extbase (TYPO3 6.1), in which you can define a picture.
In the picture-settings i can set a img-link, which is targetting a file.
In my Controller i can access this data with
$this->configurationManager->getContentObject();
But i just get a file-reference for this setting and no path. like this:
file:1206
I've googled a lot and i didn't find a solution to access the path. Has anybody a solution or knows maybe a function in the configurationmanager or something else? I've spend hours on this problem...
Thanks a lot!
If you need to get image from FAL than use following image view helper
<f:image src="{object.image_field.uid}" alt="{object.image_field.originalResource.title}" width="640" height="291" treatIdAsReference="1" />
If you just need url of image than use following line
{object.image.originalResource.publicUrl}..
Hurray.
What you have there, is a file reference of FAL, the file abstraction layer.
First things first, if you use FlexForms in combination with ActionController (or any realisation of AbstractController) you should be able to access the settings property to compute your FlexForm values.
To compute sys_file_reference records, you should refer to the FAL docs on typo3.org (and the perma-linked section about file and folder handling).
In general, you should be able to call getOriginalResource() on a \TYPO3\CMS\Extbase\Domain\Model\FileReference object. For more concrete examples, either refer to the doc links or have a look at the wiki for a example handling FileReferences.
If you want to compute such reference via fluid templating, you can use the treatIdAsReference argument on f:image:
<f:image src="{imageObj.uid}" width="150" height="100" treatIdAsReference="1" />
He is asking for a path and not for an image. This prints the path in fluid templates:
{f:uri.image(src:'{object.uid}',treatIdAsReference:'1')}