All files / src/app/shared/cms/components/cms-image-enhanced cms-image-enhanced.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (pagelet?.hasParam('Link') && !pagelet.hasParam('LinkText')) { @if (isRouterLink(pagelet, 'Link')) {
<a [routerLink]="routerLink(pagelet, 'Link')" [attr.title]="pagelet.stringParam('LinkTitle')" class="teaser-link">
  <ng-container *ngTemplateOutlet="imageEnhanced" />
</a>
} @else {
<a [href]="pagelet.stringParam('Link')" [attr.title]="pagelet.stringParam('LinkTitle')" class="teaser-link">
  <ng-container *ngTemplateOutlet="imageEnhanced" />
</a>
} } @else {
<ng-container *ngTemplateOutlet="imageEnhanced" />
}
 
<ng-template #imageEnhanced>
  <div class="enhanced-image-container" [ngClass]="pagelet.stringParam('CSSClass')">
    <picture class="enhanced-image">
      @if (pagelet.hasParam('ImageXS')) {
      <source [srcset]="pagelet.stringParam('ImageXS')" media="(max-width: 767px)" />
      } @if (pagelet.hasParam('ImageSM')) {
      <source [srcset]="pagelet.stringParam('ImageSM')" media="(max-width: 991px)" />
      } @if (pagelet.hasParam('ImageMD')) {
      <source [srcset]="pagelet.stringParam('ImageMD')" media="(max-width: 1199px)" />
      }
      <img
        [src]="pagelet.stringParam('Image')"
        [alt]="pagelet.stringParam('AlternateText') || ('image.alt_text.default' | translate)"
        [attr.loading]="loading"
        [attr.fetchpriority]="loading === 'eager' ? 'high' : null"
        class="enhanced-image"
      />
    </picture>
    <div class="enhanced-image-text">
      @if (pagelet.hasParam('Heading1')) {
      <h1>{{ pagelet.stringParam('Heading1') }}</h1>
      } @if (pagelet.hasParam('Heading2')) {
      <h2>{{ pagelet.stringParam('Heading2') }}</h2>
      } @if (pagelet.hasParam('Description')) {
      <div class="d-none d-sm-inline" [ishServerHtml]="pagelet.stringParam('Description')"></div>
      } @if (pagelet.hasParam('Link') && pagelet.hasParam('LinkText')) {
      <a
        [routerLink]="routerLink(pagelet, 'Link')"
        [attr.title]="pagelet.stringParam('LinkTitle')"
        class="btn btn-lg btn-primary"
      >
        {{ pagelet.stringParam('LinkText') }}
      </a>
      }
    </div>
  </div>
</ng-template>