Skip to main navigation Skip to main content Skip to page footer

Handle preview images

Put a check in the checkbox "Show in preview" (preview) to decide whether product images should be used in the list or in teasers, for example. This can be one or more images. The following variables can then be used in fluid:

  • {product.imagesPreviewOnly} - Returns all images marked as "Show in preview" (preview)
  • {product.imagesNonPreview} - Returns all images not marked as "Show in preview" (preview)

How to use:

<f:for each="{product.imagesPreviewOnly}" as="image" iteration="imageIteration">
    <f:if condition="{imageIteration.isFirst}">
        <f:then>
            <f:image image="{image}" class="first"
                     width="{settings.list.image.width}" height="{settings.list.image.height}"
                     alt="{product.title}" title="{product.title}" />

        </f:then>
        <f:else>
            <f:image image="{image}" class="non-first"
                     width="{settings.list.image.width}" height="{settings.list.image.height}"
                     alt="{product.title}" title="{product.title}" />
        </f:else>
    </f:if>
</f:for >

Feature icons

You can do the same thing with feature icons:

  • {product.featureIconsPreviewOnly} - Returns all images marked as "Show in preview" (preview)
  • {product.featureIconsNonPreview} - Returns all images not marked as "Show in preview" (preview)
Shopping basket 0 Products

The Demo is build with*

EXT:bootstrap_package for site-package aka theme build on Bootsrap 5.

EXT:modules for user plugins like user-profile, registration, user-addresses, and more.

EXT:shop for the whole shop functionality.

EXT:questions for the FAQ page and FAQs attached in the product detail views.

EXT:glossaries for the glossaries and definitions.

EXT:fluid_fpdf for generating invoices, delivery-notes, product-sheets and more.

EXT:parsedown_extra for rendering the extension documentations from markdown to HTML.

* There are only build-in settings made using site-settings & TypoScript – no templates or other files were changed or overridden!