ILIAS\UI\examples\Image\Responsive Namespace Reference

Functions
	base ()
	description: > Base example for rendering a responsive Image. More...
	with_additional_high_resolution_source ()
	description: > Example for rendering a responsive image with additional high resolution sources. More...

Function Documentation

base()

ILIAS\UI\examples\Image\Responsive\base

(

)

---

description: > Base example for rendering a responsive Image.

expected output: > ILIAS shows a rendered image. While changing the size of the browser window the image will

decrease in size bit by bit. If the element gets analyzed a text entry for "alt" is shown within the HTML.

Definition at line 33 of file base.php.

References $DIC, Vendor\Package\$f, and $renderer.

{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();

    //Genarating and rendering the image
    $image = $f->image()->responsive(
        "assets/ui-examples/images/Image/HeaderIconLarge.svg",
        "Thumbnail Example"
    );
    $html = $renderer->render($image);

    return $html;
}

with_additional_high_resolution_source()

ILIAS\UI\examples\Image\Responsive\with_additional_high_resolution_source

(

)

---

description: > Example for rendering a responsive image with additional high resolution sources.

expected output: > Example showing different card sizes which use an image with additional high resolution sources. The selected version of the image depends on the space available, meaning that the large image version is displayed on very large screens (even if the browser does not use the entire screen width). On very small screens, the small image version is displayed. The effect is best seen on desktop devices: Open the browser's developer tools ("Inspect" or F12). Select a screen width (very small, medium, large, extra-large) one after the other, reload the page each time and check the image source (img src) of the image. Depending on the screen width, different versions of the image are loaded

here (144w, 301w, 602w, original).

Definition at line 42 of file with_additional_high_resolution_source.php.

References $DIC, and $renderer.

                                                 : 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>';
}