I have an standard image upload in TYPO3 Backend, that allows more than 1 image upload.
So I have an image database field with data like that: "image1.jpg,image2.jpg".
In Frontend, I can explode the field, send the array to fluid, and output it in a fluid:for each like that:
<f:image src="uploads/tx_myext/{image}" />
First question is: is there maybe some fancy new Extbase or Fluid Magic, that creates image objects right from database?
Second question: if I have a huge 2MB image and make a fluid:image output with width=100, is it just scaled in browser, or is it really downsized using ImageMagick?
Comma list to array:
Unfortunately as I can see in Extbase 4.7 there is still no ViewHelper for iterating comma separated strings. You have two options: write custom ViewHelper or stay with the way you are using.
TIP: To avoid passing additional params (especially when you have many comma separated fields there and/or using many Partials for rendering the view) I'm adding a public field to my model. Without representation in TCA it will be considered as transient, ie:
/**
* #var array
*/
public $imagesArray;
and then just filling it in controller right before assigning so I can access it as {project.imagesArray} in the view:
public function showAction(Tx_Myext_Domain_Model_Project $project) {
$project->imagesArray = explode(',', $project->getImage());
$this->view->assign('project', $project);
}
view
<f:for each="{project.imagesArray}" as="image">
<f:image src="uploads/tx_myext/{image}" width="200" height="200m" alt="" />
</f:for>
Most probably you are using quite similar approach...
Image resizing:
It's easiest just to ... check. ImageMagick hashes the name of the resized image and stores it in the temp folder by default, so if in code preview you see the path like: typo3temp/pics/cd27baa408.jpg instead of uploads/tx_myext/photo123.jpg that means it was converted with IM. And yes, image ViewHelper uses the IM.
You can even add perform simple calculations by giving value as width="200m" or width="200c" from viewhelper's phpdoc: See imgResource.width for possible options
Now I created a ViewHelper in Typo3 Forge as I think processing of images as they come from database would be quite usefull.
And I added imageLinkWrap for JS Window.
http://forge.typo3.org/issues/46218
Related
I created in TYPO3 extension DCE an image field that allows to input an image with caption and title field in the backend. But I couldn't access the value of these fields to input in the alt-tag in source. No values are shown by f:debug, how can I access these values and output?
The fastest solution would be having a look into the Class Reference of TYPO3\CMS\Core\Resource\FileReference. There are many getters for the properties. They access (and are allowed to access) the mergedProperties-array. In your special case getDescription() is, what you are looking for.
So for getting description a simple {field.imageDesktop.{i}.description} should work (if field.imageDesktop.{i} is a FileReference).
I have been using FluidTYPO3 (flux and vhs) to run TYPO3 web pages for many years now. With TYPO3 10, I face a major problem. I'll quickly write about my use case, how I solved it so far, and then what the problem with 10 LTS is.
Use case:
I want to have a content element template for a timeline using FluidTYPO3/flux. Each "point" on the timeline should have a heading, some text, and optionally some images. All in all, pretty basic (or so I thought).
Solution so far (TYPO3 <= 9):
Timeline elements are sections. Images are using flux:field.file.
Simplified example of the form:
<flux:form id="timeline" label="timeline">
<flux:form.section name="timeline" label="Timeline">
<flux:form.object name="element" label="Element">
<flux:field.input name="title" label="Heading" />
<flux:field.text name="label" label="Text" enableRichText="TRUE" />
<flux:field.file name="images" label="Pictures" allowed="jpg,png,svg" multiple="TRUE" maxItems="50" size="5" showThumbnails="TRUE"
/>
</flux:form.object>
</flux:form.section>
</flux:form>
With this, multiple elements can be created on the timeline and each of them can have its own set of images.
Problem in TYPO3 10:
The technology (TCA group fields to select files) that flux:field.file relies on was deprecated in TYPO3 9 and removed in TYPO3 10, see this notice. That is one of the reasons why flux:field.file was also marked deprecated and is going to be removed in TYPO3 10.
The TYPO3 deprecation notice says to use FAL relations instead. Of course, flux can also do this with flux:field.inline.fal. However, you can only have one FAL field per FlexForm. This precludes its usage in sections, since all sections would share the same images. This limitation is known for some time - see this bug report for example - but has never been fixed. It is also why I initially chose not to use FAL fields. Using bare file fields was the recommended workaround at the time.
Question:
So - how is everyone doing it? How to add multiple image fields to a flexform in TYPO3 10?
EDIT: More specifically, how to add an image field as part of a Flexform section that can contain multiple child records (resulting in multiple image fields)?
Note: I know that I can get a "file-like" field back by using an input field with inputLink renderType (like this), but as far as I can tell it does not allow to link multiple images.
I've found another workaround that might be appropriate for some use cases:
It is still possible to use flux:field.file fields if the useFalRelation parameter set to true, even on TYPO3 v10 LTS and in repeatable FlexForm sections. This will then put sys_file record IDs separated by comma into the field instead of raw filenames. They can be used as src argument for, e.g., f:image just as well as the filename, so the CE templates itself do not have to be modified. All existing CEs that had useFalRelation set to false need to be migrated though so that the filenames are replaced with sys_file UIDs.
This is a bit better than the inputLink workaround since it allows multiple images.
It seems the only workaround with TYPO3 core onboard methods is to go for a Flux-Container having a single column containing simple default "Text with image" or "text with media" elements and then to just ignore additional options of those elements and to just render the necessary fields.
With Gridelements this is called a "functional container", since the container determines the behaviour and appearance of those elements, while the elements themselves don't have to be custom elements at all.
Additionally this makes access to the content of those elements - i.e. while doing a search query - much easier.
The bug report you mentioned already contains the solutions, since the actual problem described there is that FAL fields in a flexform are using the same name.
So instead of
image
according to the bug report there should be
settings.foreground.image
which is of course not working, since the dot is part of the path but not of the name.
But actually replacing the dot with an underscore and using some suffixes within the same flexform tab should do the trick:
settings.foreground.settings_foreground_image
settings.foreground.settings_foreground_image2
This way you make sure that
The field names within your flexform are unique
The actual field name within the sys_file_reference entry already contains the full path information
You can use that information to fetch images i.e. within a DataProcessor and still know the FlexForm field they actually belong to
Sitll I would recommend to fully move away form FlexForms (and thus Flux too) in favor of "real" fields in the database table.
If you currently use the flux:field.file element at typo3 10 with the useFalRelation=1 you can replace it by the flux:field element. It is not deprecated and works in combination with the flux:form.object element
Following example:
<flux:field.file
allowed="jpg,png,svg,gif"
exclude="false"
label="MyLabel"
name="myname"
showThumbnails="1"
useFalRelation="1"
maxItems="1"
minItems="1"
/>
Can be replaced with:
<flux:field type="input" name="myname" label="MyLabel"
config="{
type: 'group',
size: 1,
internal_type: 'db',
use_fal_relation: 1,
allowed: 'sys_file',
maxitems: 1,
minitems: 0,
show_thumbs: 1,
appearance: {
elementBrowserAllowed: 'jpg,png,svg,gif',
elementBrowserType: 'file'
}
}
"/>
im trying to add an additional source to the dce-image for further actions e.g. an alternate source to perform some JavaScript actions.
The wanted output should look like this:
<img src="path/to/foo.png" data-altsrc="path/to/bar.png">
The problem is the dce i'm using - its iterating through the "images" like this:
<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference">
<f:image src="{fileReference.uid}" treatIdAsReference="1" />
</f:for>
So if I would insert multiple images to this I have no real relation between the images where i know which one is the normal-source and which one is the alternate source.
So there was the possibility to create a section and add two fields for images which we can restrict to one image per field. But there again is the for-loop which doesn't allow me to access the source of the second image for the first image.
It should be a visible relation between these images for the user which is working with the dce.
Im trying to achieve something like this:
<f:for each="{field.images}" as="images">
<!-- want to achieve something like this -->
<f:image image="{images.foo.src}" data-altsrc="{images.bar.src}">
<!-- thats the normal way iterating through images -->
<f:for each="{images.foo}" as="image">
<f:image image="{image}" />
</f:for>
</f:for>
Another idea would be to iterate first through the alternate images and store them into an array and on the main-images to access them but I have no idea if this is even possible also this will restrict the usability of the dce for the user.
Is there any way to achieve this with dce-fluid ?
Thanks in advance
Well, i guess you could extend the sys_file_reference table to add a relation from there. So you would have nested relations (never done that, so you would have to try).
You would also have to add the field to the tca type in the place you need it, that could be a little tricky. Have a look at Tca types overrides.
You could extend the sys_file_reference table with a field "alternative_reference" and add the neccessary TCA setup. Then you would have to retrieve the FileReferences via the FileRepository and use sys_file_reference as foreign table (and of course the sys_file_reference uid as identifier).
FileRepository::findByRelation(
'sys_file_reference',
'alternative_reference',
$uidOfActualSysFileReferenceRecord
);
The other possibility would be a completely new record with 2 different sys_file_reference relations. That record (eg: tx_ext_domain_model_imageset) would have an image_default and image_alternate field, both would be configured as file_relations. That would work for sure.
$defaultImages = FileRepository::findByRelation(
'tx_ext_domain_model_imageset',
'image_default',
$uidOfRecord
);
$alternativeImages = FileRepository::findByRelation(
'tx_ext_domain_model_imageset',
'image_alternative',
$uidOfRecord
);
I assume you do have knowledge about creating records, models, tca and so on.
I personally would prefer the second way, it is more clean and does not change the core-table structures.
Also there is a second image generation viewhelper, that might suite your needs better
<img src="{f:uri.image()}" data-altsrc="{f:uri.image()}" />
But the best way to go might be to write your own ViewHelper for that purpose. You could pass your Object (ImageSet) as parameter and handle all logic there. So your template would be simpler and easier to read/work on.
You have to use data attribute of fluid viewhelper and then get the uri of the image with inline call. Here is how to achieve :
<f:image src="{fileReference.uid}" data="{altsrc: '{f:uri.image(src: \'{fileReference.uid}\', treatIdAsReference: 1}" treatIdAsReference="1"/>
This should do the work.
Out of this question: Random image with v:iterator.random | cache issue
I use a partial to render non-cacheable stuff (in this case a random image).
I do this with this code in the main-template:
{v:render.uncache(partial: 'Random-Image', arguments: {iterator: images})}
Have this directly in the template outputs the right thing (the url to an image, for example fileadmin/upload/abc.jpg). But if I want to use this as a variable for the src from <f:image it does not work:
<f:image src="{v:render.uncache(partial: 'Random-Image', arguments: {iterator: images})}" alt="alt text" />
Also set as a variable it with v:variable.set does not work.
All I get is: <!--INT_SCRIPT.0081e57d9fd92c925bb35d79fd9d3f79-->
Also when I debug it:
<f:debug>
{v:render.uncache(partial: 'Random-Image', arguments: {iterator: images})}
</f:debug>
I get <!--INT_SCRIPT.0081e57d9fd92c925bb35d79fd9d3f79-->
So, is it possible to use the output of a partial as a variable? Or is it possible to set a variable in the partial and use it in the main-template?
I think you mixed up two things a bit, so I would like to separate your questions:
1) Is it possible to use the output of a partial as a variable?
Yes, like the way you wanted it. Actually you did it.
But let see a test:
There is a Partial : Test/Message
With the content: "It is a test"
Then in the main template you can use something like this:
<div class="test">
<f:if condition="{f:render(partial:'Test/Message')}
== 'It is a test'">
<f:then>Passed</f:then>
<f:else>Failed</f:else>
</f:if>
</div>
In this case you would see "Passed" and if you change the Partial to "It should failed" then you will get "Failed" rendered.
2) Why do you see <!--INT_SCRIPT.0081e57d9fd92c925bb35d79fd9d3f79--> ?
This is a not cached content, so like COA_INT or USR_INT objects in TypoScript.
You can find a function in the typo3/sysext/frontend/Classes/Controller/TypoScriptFrontendController.php its name is INTincScript_process. It is responsible to find such lines in the code and replace them with the not cached content.
It means, if you render your Template, that partial renders only a reference to a not cached object, but not the content itself.
Finally to suggest a solution to the original problem, try to render the whole image inside the partial not just the path to it. So include the into the partial where the v:iterate.random ViewHelper is used. Then the v:render.uncache should mark the whole image block as not cacheable.
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')}