UPDATE-RATE

Die Test-Installation wird aktuell zwischen 8:00 und 18:00 Uhr stündlich zur vollen Stunde aktualisiert.

Alles neu macht der Mai

ILIAS 9 ist da! Alle Infos zu den Highlights der neuen Version gibt es hier!

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

Thumbnail Example
<?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

Thumbnail Example
<?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
  1. UIComponent
  2. Image