*/ private array $macros = []; public function __construct(Environment $env) { parent::__construct($env); $this->source = $this->getSourceContext(); $this->parent = false; $this->blocks = [ ]; } protected function doDisplay(array $context, array $blocks = []): iterable { $macros = $this->macros; $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"]; $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/ui-images.html.twig")); $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"]; $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/ui-images.html.twig")); // line 1 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/main.html.twig"); yield " "; // line 5 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/title-meta.html.twig", ["title" => "Images"]); yield " "; // line 7 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/head-css.html.twig"); yield "
"; // line 16 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/menu.html.twig"); yield "
"; // line 26 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/page-title.html.twig", ["pagetitle" => "Base UI", "title" => "Images"]); yield "

Image Rounded & Circle

Use rounded class and rounded-circle class to show an image with a round border and rounded shape respectively.

\"200x200\"
\"200x200\" 
<!-- Rounded Image -->
<img class="rounded" alt="200x200" width="200" src="assets/images/small/img-4.jpg">

<!-- Rounded-circle Image -->
<img class="rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-4.jpg">

Image Thumbnails

Use img-thumbnail class to give an image rounded 1px border appearance.

\"200x200\"
\"200x200\" 
<!-- Thumbnails Images -->
<img class="img-thumbnail" alt="200x200" width="200" src="assets/images/small/img-3.jpg">

<img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-3.jpg">

Image Sizes

Use avatar-xxs, avatar-xs, avatar-sm, avatar-md, avatar-lg, avatar-xl class for different image sizes.

\"\"

avatar-xxs

\"\"

avatar-xs

\"\"

avatar-sm

\"\"

avatar-md

\"\"

avatar-lg

\"\"

avatar-xl

\"\"

avatar-xxs

\"\"

avatar-xs

\"\"

avatar-sm

\"\"

avatar-md

\"\"

avatar-lg

\"\"

avatar-xl

<!-- Image Sizes -->
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded avatar-xxs">

<img src="assets/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs">

<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm">

<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded avatar-md">

<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg">

<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl">

<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">

<img src="assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs">

<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">

<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md">

<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">

<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl">

Avatar With Content

Use avatar-xxs, avatar-xs,avatar-sm,avatar-md,avatar-lg,avatar-xl class to set different avatar content.

XXS
XS
SM
MD
LG
XL 
<!-- Avatar With Content -->
<div class="avatar-xxs">
    <div class="avatar-title rounded bg-primary-subtle text-primary">
        XXS
    </div>
</div>

<div class="avatar-xs">
    <div class="avatar-title rounded bg-secondary-subtle text-secondary">
        XS
    </div>
</div>

<div class="avatar-sm">
    <div class="avatar-title rounded bg-success-subtle text-success">
        Sm
    </div>
</div>

<div class="avatar-md">
    <div class="avatar-title rounded bg-info-subtle text-info">
        Md
    </div>
</div>

<div class="avatar-lg">
    <div class="avatar-title rounded bg-warning-subtle text-warning">
        Lg
    </div>
</div>

<div class="avatar-xl">
    <div class="avatar-title rounded bg-danger-subtle text-danger">
        Xl
    </div>
</div>

Avatar Group

Use avatar-group class to show avatar images with the group.

\"\"
\"\"
A
\"\"

Use avatar-group class with data-bs-toggle=\"tooltip\" to show avatar group images with tooltip.

\"\" \"\"
C
2+ 
<!-- Simple Group -->
<div class="avatar-group">
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle bg-light text-primary">
                A
            </div>
        </div>
    </div>
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
</div>

<!-- Avatar Group with Tooltip -->
<div class="avatar-group">
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
        <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Frank Hook">
        <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle bg-light text-primary">
                C
            </div>
        </div>
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="more">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle">
                2+
            </div>
        </div>
    </a>
</div>

Figures

Use the included figure, figure-img and figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

\"...\"
A caption for the above image.
\"...\"
A caption for the above image.
<!-- figures Images -->
<figure class="figure">
    <img src="assets/images/small/img-4.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

<figure class="figure mb-0">
    <img src="assets/images/small/img-5.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Responsive Images

Responsive Images with img-fluid,max-width: 100%; and height: auto; to the image so that it scales with the parent width.

\"Responsive 
<!-- Responsive Images -->
<img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">
"; // line 584 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/footer.html.twig"); yield "
"; // line 591 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/customizer.html.twig"); yield " "; // line 593 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/vendor-scripts.html.twig"); yield " "; $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof); $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof); yield from []; } /** * @codeCoverageIgnore */ public function getTemplateName(): string { return "theme/ui-images.html.twig"; } /** * @codeCoverageIgnore */ public function isTraitable(): bool { return false; } /** * @codeCoverageIgnore */ public function getDebugInfo(): array { return array ( 661 => 593, 656 => 591, 646 => 584, 85 => 26, 72 => 16, 60 => 7, 55 => 5, 48 => 1,); } public function getSourceContext(): Source { return new Source("{{ include('theme/partials/main.html.twig') }} {{ include('theme/partials/title-meta.html.twig', {title: 'Images'}) }} {{ include('theme/partials/head-css.html.twig') }}
{{ include('theme/partials/menu.html.twig') }}
{{ include('theme/partials/page-title.html.twig', {pagetitle: 'Base UI', title: 'Images'}) }}

Image Rounded & Circle

Use rounded class and rounded-circle class to show an image with a round border and rounded shape respectively.

\"200x200\"
\"200x200\" 
<!-- Rounded Image -->
<img class="rounded" alt="200x200" width="200" src="assets/images/small/img-4.jpg">

<!-- Rounded-circle Image -->
<img class="rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-4.jpg">

Image Thumbnails

Use img-thumbnail class to give an image rounded 1px border appearance.

\"200x200\"
\"200x200\" 
<!-- Thumbnails Images -->
<img class="img-thumbnail" alt="200x200" width="200" src="assets/images/small/img-3.jpg">

<img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-3.jpg">

Image Sizes

Use avatar-xxs, avatar-xs, avatar-sm, avatar-md, avatar-lg, avatar-xl class for different image sizes.

\"\"

avatar-xxs

\"\"

avatar-xs

\"\"

avatar-sm

\"\"

avatar-md

\"\"

avatar-lg

\"\"

avatar-xl

\"\"

avatar-xxs

\"\"

avatar-xs

\"\"

avatar-sm

\"\"

avatar-md

\"\"

avatar-lg

\"\"

avatar-xl

<!-- Image Sizes -->
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded avatar-xxs">

<img src="assets/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs">

<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm">

<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded avatar-md">

<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg">

<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl">

<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">

<img src="assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs">

<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">

<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md">

<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">

<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl">

Avatar With Content

Use avatar-xxs, avatar-xs,avatar-sm,avatar-md,avatar-lg,avatar-xl class to set different avatar content.

XXS
XS
SM
MD
LG
XL 
<!-- Avatar With Content -->
<div class="avatar-xxs">
    <div class="avatar-title rounded bg-primary-subtle text-primary">
        XXS
    </div>
</div>

<div class="avatar-xs">
    <div class="avatar-title rounded bg-secondary-subtle text-secondary">
        XS
    </div>
</div>

<div class="avatar-sm">
    <div class="avatar-title rounded bg-success-subtle text-success">
        Sm
    </div>
</div>

<div class="avatar-md">
    <div class="avatar-title rounded bg-info-subtle text-info">
        Md
    </div>
</div>

<div class="avatar-lg">
    <div class="avatar-title rounded bg-warning-subtle text-warning">
        Lg
    </div>
</div>

<div class="avatar-xl">
    <div class="avatar-title rounded bg-danger-subtle text-danger">
        Xl
    </div>
</div>

Avatar Group

Use avatar-group class to show avatar images with the group.

\"\"
\"\"
A
\"\"

Use avatar-group class with data-bs-toggle=\"tooltip\" to show avatar group images with tooltip.

\"\" \"\"
C
2+ 
<!-- Simple Group -->
<div class="avatar-group">
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle bg-light text-primary">
                A
            </div>
        </div>
    </div>
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
</div>

<!-- Avatar Group with Tooltip -->
<div class="avatar-group">
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
        <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Frank Hook">
        <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle bg-light text-primary">
                C
            </div>
        </div>
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="more">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle">
                2+
            </div>
        </div>
    </a>
</div>

Figures

Use the included figure, figure-img and figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

\"...\"
A caption for the above image.
\"...\"
A caption for the above image.
<!-- figures Images -->
<figure class="figure">
    <img src="assets/images/small/img-4.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

<figure class="figure mb-0">
    <img src="assets/images/small/img-5.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Responsive Images

Responsive Images with img-fluid,max-width: 100%; and height: auto; to the image so that it scales with the parent width.

\"Responsive 
<!-- Responsive Images -->
<img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">
{{ include('theme/partials/footer.html.twig') }}
{{ include('theme/partials/customizer.html.twig') }} {{ include('theme/partials/vendor-scripts.html.twig') }} ", "theme/ui-images.html.twig", "/var/www/cds/app/templates/theme/ui-images.html.twig"); } }