Fixes #497, Fixes #496.

Images from wikipmedia are now being resized and rotated on wikimedia server before presented.
IsraelHikingMap · Oct 8, 2017 · fc48c80 · fc48c80
1 parent 80b895e
commit fc48c80
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/IsraelHiking.Web/sources/application/components/dialogs/image-dialog.component.html b/IsraelHiking.Web/sources/application/components/dialogs/image-dialog.component.html
@@ -8,17 +8,17 @@
     <div mat-dialog-content>
         <div fxLayout="row" [hidden]="imagesUrls.length > 1">
             <div class="img-container" >
-                <img class="img-responsive img-center" [src]="imagesUrls[0]"/>
+                <img class="img-responsive img-center" [src]="resources.getResizedWikipediaImage(imagesUrls[0], 800)"/>
             </div>
         </div>
         <mat-tab-group [hidden]="imagesUrls.length <= 1" [(selectedIndex)]="selectedTabIndex">
             <mat-tab *ngFor="let imageUrl of imagesUrls">
                 <ng-template mat-tab-label>
-                    <img [src]="imageUrl" height="32"/>
+                    <img [src]="resources.getResizedWikipediaImage(imageUrl, 64)" height="32"/>
                 </ng-template>
                 <div fxLayout="row" #imageContainer>
                     <div class="img-container">
-                        <img class="img-responsive img-center" [src]="imageUrl"/>
+                        <img class="img-responsive img-center" [src]="resources.getResizedWikipediaImage(imageUrl, 800)"/>
                     </div>
                 </div>
             </mat-tab>

diff --git a/IsraelHiking.Web/sources/application/components/dialogs/update-point-dialog.component.ts b/IsraelHiking.Web/sources/application/components/dialogs/update-point-dialog.component.ts
@@ -135,7 +135,7 @@ export class UpdatePointDialogComponent extends BaseMapComponent {
         if (this.imagesUrls.length === 0) {
             return null;
         }
-        return this.imagesUrls[this.currentImageIndex];
+        return this.resources.getResizedWikipediaImage(this.imagesUrls[this.currentImageIndex], 800);
     }
 
     public nextImage() {

diff --git a/IsraelHiking.Web/sources/application/components/markerpopup/poi-marker-popup.component.html b/IsraelHiking.Web/sources/application/components/markerpopup/poi-marker-popup.component.html
@@ -15,7 +15,7 @@ <h2 [ngClass]="resources.getTextAlignment()" (click)="setEditMode()">{{resources
         </div>
     </div>
     <div fxLayout="row" fxLayoutAlign="space-around none" fxLayoutGap="10px" [hidden]="imagesUrls.length === 0">
-        <img [src]="imagesUrls[0]" class="img-responsive curson-zoom-in" height="100" (click)="showImage()"/>
+        <img [src]="resources.getResizedWikipediaImage(imagesUrls[0], 300)" class="img-responsive curson-zoom-in" height="100" (click)="showImage()"/>
         <div [hidden]="!sourceImageUrl">
             <img [src]="sourceImageUrl" alt="" height="64"/>
         </div>

diff --git a/IsraelHiking.Web/sources/application/services/resources.service.ts b/IsraelHiking.Web/sources/application/services/resources.service.ts
@@ -859,4 +859,14 @@ export class ResourcesService {
     public getCurrentLanguageCodeSimplified = () => {
         return this.currentLanguage.code.split("-")[0];
     }
+
+    public getResizedWikipediaImage(imageUrl: string, size: number) {
+        if (!imageUrl) {
+            return imageUrl;
+        }
+        if (imageUrl.indexOf("//upload.wikimedia.org/wikipedia/commons/") === -1) {
+            return imageUrl;
+        }
+        return imageUrl.replace(/(http.*\/\/upload\.wikimedia\.org\/wikipedia\/commons\/)(.*\/)(.*)/, `$1thumb/$2$3/${size}px-$3`);
+    }
 }