src/app/modules/legacy/components/cards/activity/activity.ts

@@ -479,7 +479,7 @@ export class Activity implements OnInit {
   openModal() {
     this.activity.modal_source_url = this.router.url;
 
-    this.overlayModal.create(MediaModalComponent, this.activity, {
+    this.overlayModal.create(MediaModalComponent, { entity: this.activity }, {
       class: 'm-overlayModal--media'
     }).present();
   }

src/app/modules/legacy/components/cards/remind/remind.ts

@@ -187,7 +187,7 @@ export class Remind {
   openModal() {
     this.activity.modal_source_url = this.router.url;
 
-    this.overlayModal.create(MediaModalComponent, this.activity, {
+    this.overlayModal.create(MediaModalComponent, { entity: this.activity }, {
       class: 'm-overlayModal--media'
     }).present();
   }

src/app/modules/media/modal/modal.component.html

@@ -21,9 +21,34 @@
 
         <!-- MEDIA STAGE -->
         <div class="m-mediaModal__stage">
+
+          <div class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--blog"
+               *ngIf="entityType === 'blog'"
+               [style.width]="mediaWidth + 'px'"
+               [style.height]="mediaHeight + 'px'"
+          >
+            <!--                [@slowFadeAnimation]="isLoading ? 'out' : 'in'" -->
+
+            <minds-banner [src]="entity.thumbnail_src" [object]="entity" *ngIf="entity.header_bg"></minds-banner>
+            <div class="mdl-grid" style="max-width:740px">
+              <div class="mdl-grid" style="width:100%">
+                <div class="mdl-cell mdl-cell--12-col">
+                  <h1 class="m-blog--title">{{entity.title}}</h1>
+                </div>
+              </div>
+
+              <div style="width:100%; padding:8px; position:relative;">
+                <div class="mdl-cell mdl-cell--12-col minds-blog-body"
+                     [innerHtml]="entity.description | safe"
+                     [hidden]="!entity.description"
+                ></div>
+              </div>
+            </div>
+          </div>
+
           <!-- MEDIA: IMAGE -->
           <div class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--image"
-            *ngIf="!isVideo"
+            *ngIf="!isVideo && entityType === 'image'"
             [style.width]="mediaWidth + 'px'"
             [style.height]="mediaHeight + 'px'"
             [@slowFadeAnimation]="isLoading ? 'out' : 'in'"
@@ -55,6 +80,7 @@
               [torrent]="[{ res: '360', key: entity.custom_data.guid + '/360.mp4' }]"
               (videoCanPlayThrough)="isLoaded()"
               [@slowFadeAnimation]="isLoading ? 'out' : 'in'"
+              #player
             >
               <video-ads [player]="player" *ngIf="entity.monetized"></video-ads>
             </m-video>

src/app/modules/media/modal/modal.component.scss

@@ -100,6 +100,48 @@ m-overlay-modal {
   }
 }
 
+.m-mediaModal__mediaWrapper--blog {
+  line-height: initial;
+  overflow-y: auto;
+  text-align: left;
+
+  @include m-theme() {
+    color: themed($m-white-always);
+  }
+
+  h1.m-blog--title {
+    font-weight: 600;
+    font-size: 42px;
+    letter-spacing: 1.5px;
+    font-family: 'Roboto', Helvetica, sans-serif;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    text-align: left;
+  }
+
+  p {
+    @include m-theme() {
+      color: themed($m-white-always);
+    }
+  }
+
+  .minds-blog-body img {
+    @media screen and (max-width: 891px) {
+      width: 100vw;
+    }
+    max-width: initial;
+    height: auto;
+    width: 80%;
+    margin: 0 -100px;
+  }
+
+  .m-blog--image--caption {
+    @include m-theme() {
+      color: themed($m-white-always);
+    }
+  }
+}
+
 .m-mediaModal__stage {
   display: flex;
   align-items:center;

src/app/modules/media/modal/modal.component.ts

@@ -9,6 +9,11 @@ import { AnalyticsService } from '../../../services/analytics';
 import { MindsVideoComponent } from '../components/video/video.component';
 import isMobileOrTablet from '../../../helpers/is-mobile-or-tablet';
 
+export type MediaModalParams = {
+  redirectUrl?: string,
+  entity: any,
+};
+
 @Component({
   selector: 'm-media--modal',
   templateUrl: 'modal.component.html',
@@ -40,14 +45,17 @@ import isMobileOrTablet from '../../../helpers/is-mobile-or-tablet';
 
 export class MediaModalComponent implements OnInit, OnDestroy {
   minds = window.Minds;
+
   entity: any = {};
+  redirectUrl: string;
   isLoading: boolean = true;
   navigatedAway: boolean = false;
   fullscreenHovering: boolean = false; // Used for fullscreen button transformation
 
   isTablet: boolean = false;
   isFullscreen: boolean = false;
-  isVideo: boolean = false; // Otherwise it's an image
+  isVideo: boolean = false;
+  entityType: string;
 
   aspectRatio: number;
   modalWidth: number;
@@ -83,8 +91,9 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
   routerSubscription: Subscription;
 
-  @Input('entity') set data(entity) {
-    this.entity = entity;
+  @Input('entity') set data(params: MediaModalParams) {
+    this.entity = params.entity;
+    this.redirectUrl = params.redirectUrl || null;
     this.entityWidth = 0;
     this.entityHeight = 0;
   }
@@ -139,13 +148,24 @@ export class MediaModalComponent implements OnInit, OnDestroy {
     this.isTablet = isMobileOrTablet() && Math.min(screen.width, screen.height) >= 768;
 
     this.isVideo = this.entity.custom_type === 'video';
+    this.entityType = this.entity.custom_type || this.getEntityType(this.entity);
 
-    this.analyticsService.send('pageview', {url: `/media/${this.entity.entity_guid}?ismodal=true`});
+    if (this.entityType === 'blog') {
+      this.isLoaded();
+    }
+
+    this.analyticsService.send('pageview', { url: `/media/${this.entity.entity_guid}?ismodal=true` });
 
     // * LOCATION & ROUTING * -----------------------------------------------------------------------------------
     // Change the url to point to media page so user can easily share link
     // (but don't actually redirect)
-    this.location.replaceState(`/media/${this.entity.entity_guid}`);
+    if (this.redirectUrl) {
+      this.location.replaceState(this.redirectUrl);
+    } else if (this.entityType === 'blog') {
+      this.location.replaceState(`/blog/${this.entity.slug}-${this.entity.guid}`);
+    } else {
+      this.location.replaceState(`/media/${this.entity.entity_guid}`);
+    }
 
     // When user clicks a link from inside the modal
     this.routerSubscription = this.router.events.subscribe((event: Event) => {
@@ -167,11 +187,15 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
     // * DIMENSION CALCULATIONS * ---------------------------------------------------------------------
 
-    if (!this.isVideo) {
+    if (!this.isVideo && this.entityType === 'image') {
       // Image
       this.entityWidth = this.entity.custom_data[0].width;
       this.entityHeight = this.entity.custom_data[0].height;
       this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
+    } else if(this.entityType === 'blog') {
+      this.entityWidth = this.entity.custom_data[0].dimensions.width;
+      this.entityHeight = this.entity.custom_data[0].dimensions.height;
+      this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
     } else {
       this.entityWidth = this.entity.custom_data.dimensions.width;
       this.entityHeight = this.entity.custom_data.dimensions.height;
@@ -434,6 +458,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
     }
   }
 
+  getEntityType(entity: any) {
+    return entity.type === 'object' ? `${entity.type}:${entity.subtype}` : entity.type;
+  }
+
   ngOnDestroy() {
     if (this.routerSubscription) {
       this.routerSubscription.unsubscribe();

src/app/modules/pro/channel/channel.service.ts

@@ -5,7 +5,6 @@ import { Client } from '../../../services/api/client';
 import { EntitiesService } from '../../../common/services/entities.service';
 import normalizeUrn from '../../../helpers/normalize-urn';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
-import { BlogView } from "../../blogs/view/view";
 import { Session } from '../../../services/session';
 import { ActivatedRoute } from '@angular/router';
 
@@ -180,9 +179,6 @@ export class ProChannelService {
       case 'group':
         window.open(`${window.Minds.site_url}groups/profile/${entity.guid}`, '_blank');
         break;
-      case 'object:blog':
-        modalServiceContext.create(BlogView, entity).present();
-        break;
     }
   }
 

src/app/modules/pro/channel/tiles/media/tile.component.ts

 import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
-import { MediaModalComponent } from "../../../../media/modal/modal.component";
+import { MediaModalComponent, MediaModalParams } from "../../../../media/modal/modal.component";
 import { FeaturesService } from "../../../../../services/features.service";
 import { OverlayModalService } from "../../../../../services/ux/overlay-modal";
 import { Router } from "@angular/router";
@@ -61,10 +61,8 @@ export class ProTileComponent {
     switch (this.getType(this.entity)) {
       case 'object:image':
       case 'object:video':
-        this.showMediaModal();
-        break;
       case 'object:blog':
-        this.channelService.open(this.entity, this.modalService);
+        this.showMediaModal();
         break;
     }
   }
@@ -88,7 +86,13 @@ export class ProTileComponent {
 
       activity.modal_source_url = this.router.url;
 
-      this.modalService.create(MediaModalComponent, activity, {
+      const params: MediaModalParams = { entity: activity };
+
+      if (window.Minds.pro && this.getType(this.entity) === 'object:blog') {
+        params.redirectUrl = `/blog/${this.entity.slug}-${this.entity.guid}`;
+      }
+
+      this.modalService.create(MediaModalComponent, params, {
         class: 'm-overlayModal--media'
       }).present();
     } else {