src/app/modules/newsfeed/feeds/tiles.component.html

@@ -12,15 +12,19 @@
       }"
       [routerLink]="['/newsfeed', entity.guid]"
     >
-      <img [src]="getThumbnailSrc(entity$ | async)" />
+      <img
+        [src]="getThumbnailSrc(entity$ | async)"
+        (click)="clickedImage(entity, $event)"
+      />
       <i
         *ngIf="attachment.shouldBeBlurred(entity)"
         class="material-icons mature-icon"
-        >explicit</i
-      >
-      <i *ngIf="isUnlisted(entity)" class="material-icons unlisted-icon"
-        >visibility_off</i
       >
+        explicit
+      </i>
+      <i *ngIf="isUnlisted(entity)" class="material-icons unlisted-icon">
+        visibility_off
+      </i>
     </a>
   </ng-container>
 </div>

src/app/modules/newsfeed/feeds/tiles.component.scss

@@ -26,6 +26,7 @@ m-newsfeed__tiles {
     margin: 4px;
     overflow: hidden;
     transform-style: preserve-3d;
+
     @include m-theme() {
       background-color: rgba(themed($m-black), 0.65);
     }

src/app/modules/newsfeed/feeds/tiles.component.ts

 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { AttachmentService } from '../../../services/attachment';
+import { MediaModalComponent } from '../../media/modal/modal.component';
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+import { Router } from '@angular/router';
+import isMobile from '../../../helpers/is-mobile';
+import { FeaturesService } from '../../../services/features.service';
 
 @Component({
   selector: 'm-newsfeed__tiles',
@@ -9,7 +14,11 @@ import { AttachmentService } from '../../../services/attachment';
 export class NewsfeedTilesComponent {
   @Input() entities: any[] = [];
 
-  constructor(public attachment: AttachmentService) {}
+  constructor(
+    public attachment: AttachmentService,
+    private router: Router,
+    private overlayModalService: OverlayModalService
+  ) {}
 
   getThumbnailSrc(entity: any) {
     let src: string = '';
@@ -37,4 +46,47 @@ export class NewsfeedTilesComponent {
   isUnlisted(entity: any) {
     return entity && (entity.access_id === '0' || entity.access_id === 0);
   }
+
+  /**
+   * @param entity
+   * @param event
+   */
+  clickedImage(entity: any, event: MouseEvent) {
+    const isNotTablet = Math.min(screen.width, screen.height) < 768;
+    const pageUrl = `/media/${entity.entity_guid}`;
+
+    if (isMobile() && isNotTablet) {
+      this.router.navigate([pageUrl]);
+      return;
+    }
+
+    if (entity.width === '0' || entity.height === '0') {
+      this.setImageDimensions(entity, event.target as HTMLImageElement);
+    }
+    this.openModal(entity);
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  setImageDimensions(entity, imageElement: HTMLImageElement) {
+    const img: HTMLImageElement = imageElement;
+    entity.width = img.naturalWidth;
+    entity.height = img.naturalHeight;
+  }
+
+  openModal(entity) {
+    entity.modal_source_url = this.router.url;
+
+    this.overlayModalService
+      .create(
+        MediaModalComponent,
+        {
+          entity: entity,
+        },
+        {
+          class: 'm-overlayModal--media',
+        }
+      )
+      .present();
+  }
 }