with_additional_high_resolution_source.php

Go to the documentation of this file.

<?php

declare(strict_types=1);

namespace ILIAS\UI\examples\Image\Responsive;

function with_additional_high_resolution_source(): string
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();

    $image = $factory
        ->image()
        ->responsive('assets/ui-examples/images/Image/mountains-144w.jpg', 'Mountains')
        ->withAdditionalHighResSource('assets/ui-examples/images/Image/mountains-301w.jpg', 100)
        ->withAdditionalHighResSource('assets/ui-examples/images/Image/mountains-602w.jpg', 300)
        ->withAdditionalHighResSource('assets/ui-examples/images/Image/mountains.jpg', 500);

    $card = $factory->card()->standard('Mountains', $image);

    // render each card individually so every image has a different id.
    return
        '<div style="width: 100%; display: flex; justify-content: space-between">' .
        '<div style="width: 49%;">' . $renderer->render($card) . '</div>' .
        '<div style="width: 30%;">' . $renderer->render($card) . '</div>' .
        '<div style="width: 19%;">' . $renderer->render($card) . '</div>' .
        '</div>';
}