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)
Documentation

TYPO3 Shop by coding.ms

An extensive shop for TYPO3 for realizing Webshops, Online-Shops or Payment-Subscriptions, comparable with tt_products, Cart or Aimeos. It includes PayPal, PayPal-Checkout, Klarna, Stripe, Bookmarks, UPS-API, invoice generation, a backend module, compare feature, graduated prices, plus product variants, filters, and tax and shipping logic for practical shop operations.

Menu
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!