How to map an uploaded image (using specific colPos in the backend layout) to the image Fluid Viewhelper src attribute

Question

I am using the basetemplate9 extension provided by Sebastian Klein (https://github.com/sebkln/basetemplate9). I customize it using other HTML templates (from Bootstrap) and of course adapting the backendend layout. Everything is working fine, content from the backend layout is mapped to the HTML templates. BUT, I am not happy with the current solution with respect to uploaded images.

Currently, for images , I just upload them into the /fileadmin/user_uploads directory and I map them using <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 'x'}"/> where x is number of the accordant colPos defined in the backend layout. The image is then rendered using TYPO3 styles. But I want to control the images properties. The image shall always be rendered in the same way irrespectively what the editor edits.

Therefore, in the HTML template I want to define image properties like width, height and I want to use the f:image view helper (https://docs.typo3.org/other/typo3/view-helper-reference/9.5/en-us/typo3/fluid/latest/Image.html).

My question now is: How I can map the uploaded image (using specific colPos in the backend layout) into the src of the image view helper? <f:image src="{THIS_VALUE_SHOULD_POINT_TO_THE_IMAGE_UPLOADED_VIA_COLPOS_OF_ASSOCIATED_BACKENDLAYOUT}}" width="400" height="200" alt="My Image" />

If I specify hardcoded the uid of table sys_file (in my case it is 2), then I can "find" the respective image using a FileProcessor (see code below) but how can I nest this FileProcessor in a DatabaseQueryProcessor so that I find the associated colPos from my backend layout. I am missing this piece of logic.

   // In the FLUIDTEMPLATE TypoScript
   dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
   dataProcessing.10 {
      references.fieldName = image
      references.table = tt_content
      files = 2 //hardcoded uid of table sys_file

      folders = 1:fileadmin/user_upload/
      folders.recursive = 1
      sorting = description
      sorting.direction = descending

      as = myfiles
   }

<f:for each="{myfiles}" as="file">
  <li><a href="{file.identifier}">{file.name}</a></li>
  <f:image class="img-fluid rounded mb-4 mb-lg-0" 
   src="/fileadmin/{file.identifier}" width="900c" height="400c" 
   alt="Christian Alt Default Titel" title="Christian Default Titel" 
   />
</f:for>

Update on 22/07/2019

I was inspired by the approach described in https://www.rutschmann.biz/en/blog/post/dataprocessor-gridelements-und-fal-bilder-im-fluidtemplate-4-beginners/.

Basically the author selects the image uploaded by a specific colPos using tt_content and passes the record to a FilesProcessor.

I want to follow the same approach below but it is based on the Typo3 7 LTS, I am using version 9.5.8 and the typoscript code is not working in my version, especially the following code snippet:

 where.wrap = tx_gridelements_columns = 101 AND tx_gridelements_container=|

Here the approach from the author of the link above:

imagetextbox < lib.gridelements.defaultGridSetup
    imagetextbox {
        cObject = FLUIDTEMPLATE
        cObject {
            file = EXT:customtheme/Resources/Private/Templates/GridElements/Imagetextbox.html
            dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
                10 {
                    table = tt_content
                    where.data = field:uid
                    where.wrap = tx_gridelements_columns = 101 AND tx_gridelements_container=|
                    orderBy = sorting
                    as = content

                    dataProcessing {
                        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                        10 {
                            references.fieldName = image
                            references.table = tt_content
                            as = image
                        }
                    }
                }
            }
        }
        outerWrap = |
    }

Answer 1

you should verify your available data at each level of processing. and you should know the processing and applied technique.

with <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 'x'}"/> you give control from fluid to typoscript. Dependent of kind of fluid you might have information about the currently rendered column.
if you want to know all available data insert a <f:debug title="pre TS call">{_all}</f:debug> in the template.

colPos belongs to content elements (records in tt_content) which are assigned to a page, which has a layout (backend and frontend).
Other kind of records (e.g. sys_file) could be assigned a colPos only if there is a connection/relation to a tt_content-record. for CEs (content elements) of type text with media it is open, for records like news (tx_news_domain_model_news) it is a CE of type 'plugin', subtype 'news list'.

of course for a specific part of your page you can render anything without tt_content-records if you specify it in your typoscript. but then the keyword colPos does not make sense.

At the moment I can't get what parts of fluid and typoscript you use in which order or context, how those files can be identified for a page (what are the relations which connect the pages-record with the sys_file-records?)

pages -> tt_content -> sys_file
pages -> files in specifc folder
pages -> sys_file
pages -> tt_content -> another kind of record -> sys_file

if you want to configure/program these dependencies you have to specify the dependencies precisely.
first step: describe it with words before refining it into a programming language