Responsive image backend definition and frontend rendering with helhum/typo3-top-image

ANewsImageVariantExample.php

<?php
declare(strict_types=1);

namespace Dkn\SitePackage\Configuration\ImageVariants;

use Helhum\TopImage\Definition;
use Helhum\TopImage\TCA\ImageVariantConfigurationInterface;

class ANewsImageVariantExample implements ImageVariantConfigurationInterface
{
    /**
     * @return Definition\ImageVariant[]
     */
    public function getImageVariantDefinitions(): array
    {
        return [
            new Definition\ImageVariant(
                id: 'news-overview',
                appliesTo: new Definition\ContentField(
                    table: 'tx_news_domain_model_news',
                    field: 'fal_media',
                    type: '0',
                ),
                sources: [
                    new Definition\ImageSource(
                        widths: [
                            700,
                            1400,
                        ],
                        artDirection: new Definition\ImageSource\ArtDirection(
                            cropVariant: 'square',
                            media: '(min-width: 769px)',
                        ),
                    ),
                    new Definition\ImageSource(
                        widths: [
                            700,
                            1400,
                        ],
                        artDirection: new Definition\ImageSource\ArtDirection(
                            cropVariant: 'sixteenToNine',
                        ),
                    ),
                ],
                cropVariants: [
                    new Definition\CropVariant(
                        id: 'sixteenToNine',
                        title: 'Mobile (Overview and Detail)',
                        allowedAspectRatios: [
                            new Definition\CropVariant\Ratio(
                                id: '16/9',
                                title: '16/9',
                                value: 16/9,
                            )
                        ],
                    ),
                    new Definition\CropVariant(
                        id: 'square',
                        title: 'Overview',
                        allowedAspectRatios: [
                            new Definition\CropVariant\Ratio(
                                id: '1/1',
                                title: '1/1',
                                value: 1,
                            )
                        ],
                        coverAreas: [
                            new Definition\CropVariant\Area(
                                width: 0.3,
                                height: 1,
                                offsetLeft: 0,
                                offsetTop: 0,
                            ),
                            new Definition\CropVariant\Area(
                                width: 0.3,
                                height: 1,
                                offsetLeft: 0.7,
                                offsetTop: 0,
                            ),
                        ],
                    ),
                ],
            ),
            new Definition\ImageVariant(
                id: 'news-detail',
                appliesTo: new Definition\ContentField(
                    table: 'tx_news_domain_model_news',
                    field: 'fal_media',
                    type: '0',
                ),
                sources: [
                    new Definition\ImageSource(
                        widths: [
                            1400,
                            2800,
                        ],
                        sizes: [
                            '(min-width: 1024px) 75vw',
                            '100vw',
                        ],
                        artDirection: new Definition\ImageSource\ArtDirection(
                            cropVariant: 'default',
                            media: '(min-width: 769px)',
                        ),
                    ),
                    new Definition\ImageSource(
                        widths: [
                            700,
                            1400,
                        ],
                        artDirection: new Definition\ImageSource\ArtDirection(
                            cropVariant: 'sixteenToNine',
                        ),
                    ),
                ],
                cropVariants: [
                    new Definition\CropVariant(
                        id: 'default',
                        title: 'News Detail',
                        allowedAspectRatios: [
                            new Definition\CropVariant\FreeRatio()
                        ],
                    ),
                    new Definition\CropVariant(
                        id: 'sixteenToNine',
                        title: 'Mobile (Overview and Detail)',
                        allowedAspectRatios: [
                            new Definition\CropVariant\Ratio(
                                id: '16/9',
                                title: '16/9',
                                value: 16/9,
                            )
                        ],
                    ),
                ],
            ),
        ];
    }
}

ImageComponent.html

<html
    xmlns:fc="http://typo3.org/ns/SMS/FluidComponents/ViewHelpers"
    xmlns:ti="http://typo3.org/ns/Helhum/TopImage/ViewHelpers"
    data-namespace-typo3-fluid="true">

<fc:component>
    <fc:param name="image" type="Image" />
    <fc:param name="imageVariant" type="string" optional="1" />

    <fc:renderer>

        <ti:responsiveImage
            image="{image.file}"
            variant="{imageVariant}" <!-- can be "news-overview" or "news-detail" in this example -->
            additionalAttributes="{class: class}"
        />

    </fc:renderer>

</fc:component>

</html>

ResultNewsDetailImage.html

<picture>
    <source srcset="/fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_ca3f978aca.jpg 1400w, /fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_bf3a9d8a89.jpg 2800w" sizes="(min-width: 1024px) 75vw, 100vw" media="(min-width: 769px)"/>
    <source srcset="/fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_cd226578b6.jpg 700w, /fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_7f3052d571.jpg 1400w"/>
    <img src="/fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_cd226578b6.jpg" width="700" height="394" alt="Old man walking into shop" class="tile__image"/>
</picture>

ResultNewsOverviewImage.html

<picture>
    <source srcset="/fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_5fafafa085.jpg 700w, /fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_85844ebcc7.jpg 1400w" media="(min-width: 769px)"/>
    <source srcset="/fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_cd226578b6.jpg 700w, /fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_7f3052d571.jpg 1400w"/>
    <img src="/fileadmin/_processed_/1/e/csm_pexels-caroline-cagnin-1786781_cd226578b6.jpg" width="700" height="394" alt="Old man walking into shop" class="tile__image"/>
</picture>