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

<div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
    <img #image [src]="imageSrc" [hidden]="!showImage">
    <div class="sk-cube-grid" *ngIf="!showImage">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div>
    </div>

    <!--Info box -->
    <div #info [hidden]="!showImage" class="info" [style.margin-top.px]="-infoStyle.height"
         [style.background]="infoStyle.background">
        <div class="photo-name">{{gridPhoto.photo.name}}</div>

        <div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">
            <span class="glyphicon glyphicon-map-marker"></span>
            <template [ngIf]="getPositionText()">
                <a [routerLink]="['Search',{searchText: getPositionText(), type:SearchTypes[SearchTypes.position]}]"
                   *ngIf="searchEnabled">
                    {{getPositionText()}}
                </a>
                <span *ngIf="!searchEnabled">{{getPositionText()}}</span>
            </template>
        </div>


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

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