pigallery2/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html

<div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()">


  <img alt="{{gridPhoto.media.name}}" #img [src]="thumbnail.Src | fixOrientation:gridPhoto.Orientation | async"
       *ngIf="thumbnail.Available">

  <app-gallery-grid-photo-loading
    [error]="thumbnail.Error"
    [animate]="thumbnail.loading"
    *ngIf="!thumbnail.Available">
  </app-gallery-grid-photo-loading>


  <div *ngIf="gridPhoto.isVideo()" class="video-indicator"
       [style.marginTop.px]="-container.nativeElement.offsetHeight"
       [style.marginLeft.px]="container.nativeElement.offsetWidth">
    {{gridPhoto.Video.metadata.duration  | duration}} <span class="oi oi-video"></span></div>


  <!--Info box -->
  <div #info class="info"
       *ngIf="infoBar.visible"
       [style.margin-top.px]="infoBar.marginTop"
       [style.background]="infoBar.background"
       [style.width.px]="container.nativeElement.offsetWidth">
    <div class="photo-name">{{gridPhoto.media.name}}</div>

    <div class="photo-position" *ngIf="gridPhoto.hasPositionData()">
      <span class="oi oi-map-marker"></span>
      <ng-template [ngIf]="getPositionText()">
        <a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
           *ngIf="searchEnabled">
          {{getPositionText()}}
        </a>
        <span *ngIf="!searchEnabled">{{getPositionText()}}</span>
      </ng-template>
    </div>

    <div class="photo-keywords" *ngIf="gridPhoto.media.metadata.keywords && gridPhoto.media.metadata.keywords.length">
      <ng-template ngFor let-keyword [ngForOf]="gridPhoto.media.metadata.keywords" let-last="last">
        <a *ngIf="searchEnabled"
           [routerLink]="['/search', keyword, {type: SearchTypes[SearchTypes.keyword]}]">#{{keyword}}</a>
        <span *ngIf="!searchEnabled">#{{keyword}}</span>
        <ng-template [ngIf]="!last">,</ng-template>
      </ng-template>

    </div>
  </div>
</div>