Documentation
Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'
Standard
Description
- Purpose
- The standard image is used if the image is to be rendered in it's the original size.
Example 1: Base
<?php declare(strict_types=1); namespace ILIAS\UI\examples\Image\Standard; /** * Base Example for rendering an Image */ function base() { //Loading factories global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); //Generating and rendering the image $image = $f->image()->standard( "src/UI/examples/Image/HeaderIconLarge.svg", "Thumbnail Example" ); $html = $renderer->render($image); return $html; }
Example 2: Decorative
<?php declare(strict_types=1); namespace ILIAS\UI\examples\Image\Standard; /** * Base Example for rendering an Image with only decorative purpose (see accessibility rules in images) */ function decorative() { //Loading factories global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); //Generating and rendering the image $image = $f->image()->standard( "src/UI/examples/Image/HeaderIconLarge.svg", "" ); $html = $renderer->render($image); return $html; }
Example 3: With additional on load code
<?php declare(strict_types=1); namespace ILIAS\UI\examples\Image\Standard; /** * Example showing how JS-Code can be attached to images. * In this example, an alert is popping up a soon as the image * is clicked. */ function with_additional_on_load_code() { //Loading factories global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); //Generating and rendering the image and modal $image = $f->image()->standard( "src/UI/examples/Image/HeaderIconLarge.svg", "Thumbnail Example" )->withAction("#") ->withAdditionalOnLoadCode(function ($id) { return "$('#$id').click(function(e) { e.preventDefault(); alert('Image Onload Code')});"; }); $html = $renderer->render($image); return $html; }
Example 4: With signal action
<?php declare(strict_types=1); namespace ILIAS\UI\examples\Image\Standard; /** * Example for rendering an Image with a signal as action */ function with_signal_action() { //Loading factories global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); //Generating and rendering the image and modal $image_in_modal = $f->image()->standard( "src/UI/examples/Image/mountains.jpg", "" ); $page = $f->modal()->lightboxImagePage($image_in_modal, "Nice view"); $modal = $f->modal()->lightbox($page); $image = $f->image()->standard( "src/UI/examples/Image/HeaderIconLarge.svg", "Thumbnail Example" )->withAction($modal->getShowSignal()); $html = $renderer->render([$image, $modal]); return $html; }
Example 5: With string action
<?php declare(strict_types=1); namespace ILIAS\UI\examples\Image\Standard; /** * Example for rendering an Image with a string as action */ function with_string_action() { //Loading factories global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); //Generating and rendering the image and modal $image = $f->image()->standard( "src/UI/examples/Image/HeaderIconLarge.svg", "Thumbnail Example" )->withAction("https://www.ilias.de"); $html = $renderer->render($image); return $html; }
Relations
- Parents
- UIComponent
- Image