TYPO3 Produce images in different sizes

问题

I have this implementation, using it in a page level 2 submenu. Each level 2 menu has multiple subpages. Each subpage has one image. So this implementation produces an image from each page for each submenu. For example, a submenu with 2 subpages will have 2 images (one from each subpage).

1 = FILES
1 {
    references {
        table = pages
        fieldName = media
        data = levelmedia:-1, slide
    }

    begin = 0
    maxItems = 2

    renderObj = COA
    renderObj {
        2 = IMAGE
        2 {
            file {
                //params = -sharpen 50  +profile "*" -quality 100
                import.data = file:current:uid
                treatIdAsReference = 1
                width.optionSplit = 300c|*|400c
                height.optionSplit = 350c|*|450c
            }
        }
    }
}

Would like to have images cropped in different sizes such that image 1 is cut to different dimensions from image 2 and so on.

My ImageMagick installation works perfectly. Am actually cropping single images with it without a hitch.

Without the optionSplit above, the images are cut to size nicely. Unfortunately with the optionSplit it simply outputs the images in their original sizes.

How can I produce different image sizes? My understanding is that optionSplit is the way to go (from the manuals). I read in articles that soureCollection for responsive images use optionSplit. I imagine another way would be to use an image register counter and use CASE to determine how to cut image 1, 2, 3 and so on, but am not familiar with register counters (maybe someone can show me how to do this?). And yet another way would be to use a file/image index number but I've tried looking at the manuals for hours for such a pointer and nowhere is it listed if there's any to help with processing. Anybody know a way to do this?

回答1:

rendering two consecutive images with different paramters will be difficult in typoscript:
your optionsplit can not success as in the renderObj you always have only one file. A bad habit of all renderObj.

on the other hand: there is no property optionSplit. the functionality is build in any wrap property.

therefore a handling in typoscript could be to concatenate the elements, then split them again, but then use different options in the split renderObj to handle it separately.
or implement a counter with a register variable, then evaluate the register to set different values.

easier would be a handling in fluid, where you could use an iterator with the f:forviewhelper, and then do an f:if (for two cases) or an f:switch (for more cases) on {iterator.index} to render individual versions.

回答2:

Based on @Bernd answer on the fact that each page (as item) is delivered as an object in TMENUs in each iteration, it is possible to achieve such image rendering in one of two ways:

First, Through the use of two register entries register:count_menuItems which holds the total number of items you will be processing; and register:count_MENUOBJ which holds the index of the current item being iterated (starts at 1). These two can be use in conjunction with a CASE statement to thoroughly process each image to one's liking. If a page has multiple images, there are two more register items one can use, these are, register:FILES_COUNT (which starts to count starting with 0) and register:FILES_NUM_CURRENT. No need for implementing a registry counter since these registry entries are in-themselves, counters.

Secondly, There's a much easier way, a far less time-consuming way, that uses a wrap as explained by @Bernd, as follows;

NO = 1
NO {
    1 = LOAD_REGISTER
    1 {
        width.cObject = TEXT
        width.cObject.stdWrap.wrap = 100c||200c

        height.cObject = TEXT
        height.cObject.stdWrap.wrap = 300c||400c
    }

    2 = FILES
    2 {
        # Get the images related to the current page
        references {
            table = pages
            fieldName = media
        }
        # Render each image and wrap it as appropriate
        renderObj = IMG_RESOURCE
        renderObj {
            file {
                treatIdAsReference = 1
                import.data = file:current:uid
                width = {REGISTER:width}
                width.insertData = 1
                height = {REGISTER:height}
                height.insertData = 1
            }
        }
        stdWrap {
            wrap = <img src="|"  />
        }
    }
}

As you can see, this code is being used in a TMENU and processes each image based on different rules defined in segment 1 and stored by the LOAD_REGISTER. The trick is in the wraps. stdWrap's wrap already contains optionSplit. So by storing the desired pattern, the stdWrap will process the correct value to be stored for each iteration.

It has worked for me. Hope it helps someone.

来源：https://stackoverflow.com/questions/60957586/typo3-produce-images-in-different-sizes