Backend Preview - get Image or IRRE data in Fluidtemplate - typo3

I use a Fluid Template for the backend: mod.web_layout.tt_content.preview
Is it possible to get images from FAL or data from an IRRE element in this template?
For the frontend there is the TYPO3\CMS\Frontend\DataProcessing\FilesProcessor for example. Could that also be used in backend?

You would need a custom VH (IMO VHS also provides those) which gets you the data. It is not possible by default with the core.

I ended up lately to use the hook PageLayoutViewDrawItem in TYPO3\CMS\Backend\View\PageLayoutView for doing that. That was the easiest way.

As Georg Ringer has already mentioned, you can render preview images in Fluid Preview Templates with the VHS ViewHelper v:resource.record.fal
https://viewhelpers.fluidtypo3.org/fluidtypo3/vhs/5.0.1/Resource/Record/Fal.html
As record I must pass the argument _all because I have no other record available.
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:if condition="{assets}">
<v:content.resources.fal field="assets" as="images" record="{_all}">
<f:for each="{images}" as="image">
<f:if condition="{image}">
<f:image src="{image.id}" treatIdAsReference="1" width="100"/>
</f:if>
</f:for>
</v:content.resources.fal>
</f:if>
</html>

Related

TYPO3 - How to check if a news article has a certain parent category with fluid

How can I check that a news article has a certain parent category in m'y Fluid template?
Maybe this can help :
<f:for each="{newsItem.categories}" as="category">
<f:if condition="{category.parent.uid} == theCatIdYouAreSearchingFor">
do your stuff here...
</f:if>
</f:for>

TYPO3 Image From Extension

I'm a typo newbie, and was wondering, how I can make the following code work in my HTML Template file:
<img src="EXT:extension-name/Resources/Public/Images/Logo/logo-white.png" alt="logo.png">
Looking forward to your anwers, thanks.
This cannot be done in an HTML file but within a Fluid template file you should use the uri.resource viewhelper:
<img src="{f:uri.resource(path: 'Images/Logo/logo-white.png')}" alt="Actual explanation of the logo content">
If used within an Extbase plugin there is nothing else to do.
For templates using the FLUIDTEMPLATE content object you'll need to set the extension name, for example with an extensionName: 'MyExt' as argument:
<img src="{f:uri.resource(path: 'Images/Logo/logo-white.png', extensionName: 'MyExt')}" alt="Actual explanation of the logo content">
Alternatively use controllerExtensionName in your TypoScript setup.

TYPO3 7.6. Lightbox for the extension calendarize

I try to build the link for a lightbox in my template of the extension calendarize.
The smaller images are correct, but in my lightbox wrong images are shown.
The title, the description ... are fine
<f:for each="{event.images}" as="image" iteration="i">
<a href="{f:uri.image(src:image.uid)}"
class="lightbox" rel="lightbox[{image.uid}]"
title="{image.originalResource.title}"
alt="{image.originalResource.alternative}">
<f:image src="{image.uid}" treatIdAsReference="1"
alt="{image.originalResource.title}"
maxWidth="200"
class="img-rounded"/>
</a>
<figcaption>{image.originalResource.title}</figcaption>
</f:for>
Thanks for any help.
I solved the problem by myself. I had to add
treatIdAsReference:1
to get
<a href="{f:uri.image(src:image.uid treatIdAsReference:1)}"

FAL file title won't show in front-end with file collection "folder from Storage"

.
Hello
it's hard to explain ...
If you're using TYPO3 7.6 (w. fluid styled content) with the module "file links", you can upload single files, but you can also work with the "file collection" to organize your downloads in a sys-folder.
There're three different types of "file collections". 1. Static selection of files and 2. Folder from Storrage and 3. Select by category.
Now you've upload and edit your FAL-files (metadata, s. image below) with a new title and description. These fields e.g. {file.title} will show with fluid_styled_content (Uploads.html), if you're using a single download or a file collection static selection of files, but not, if you're using Folder from storrage! The title won't show, you only see the {file.name} ..?
I'm using the standard Uploads.htmlform FSC with an extra condition.
Test <f:debug>{file.title}</f:debug>, see below. There's no Title from files via "folder from storrage".
...
<f:if condition="{file.title}">
<f:then>
{file.title}
</f:then>
<f:else>
{file.name}
</f:else>
</f:if>
...
Is it a bug or a feature for TYPO3 8?
I hope my pictures can explain this behavior better.
There was a TYPO3 Core Bug, but now it's fixed (TYPO3 7.6.15) - update Core and Fluid Styled Content-Template Uploads.html
Line 26
<a href="{file.publicUrl}"{f:if(condition:data.target,then:' target="{data.target}"')}>
<span class="ce-uploads-fileName">
<f:if condition="{file.properties.title}">
<f:then>
{file.properties.title}
</f:then>
<f:else>
{file.name}
</f:else>
</f:if>
</span>
</a>
Thanks to the TYPO3 Core Development Team! See revision.

Prevent Typo3 broken image url error

In my Typo3 extension I'm showing a lot of images with fluid, an list view of products. Only if for some reason one image is missing on my server, Typo3 generates an full screen error so the complete website is then not working.
I my opinion there are three way to prevent it:
1) Configure Typo3 so it is ignoring broken image url's. Does anyone know if this is possible?
2) Let Fluid check if the image exists before it is generated. Don't know if this is possible?
3) Use the controller to check if the image exists before it is send to the frond-end. Only due to the manny images it uses a lot of processing.
I prefer the use of the media exists viewhelper from the VHS Viewhelper package. After installing and activating the extension it should look like this screenshot in your TYPO3 extension manager.
This example iterates through a array of products, that have a public picture property holding the filename of it's picture.
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:for each="{products}" as="product">
<v:media.exists file="fileadmin/products/{product.picture}">
<f:then>
<f:image src="fileadmin/products/{product.picture}" />
</f:then>
<f:else>
<f:image src="fileadmin/noImageFound.jpg" />
</f:else>
</v:media.exists>
</f:for>