enable fetching images and metadata from external data sources. #33

README.md

@@ -4,11 +4,11 @@
 [![npm version](https://badge.fury.io/js/angular2-image-gallery.svg)](https://badge.fury.io/js/angular2-image-gallery)
 [![npm downloads](https://img.shields.io/npm/dt/angular2-image-gallery.svg)](https://www.npmjs.com/package/angular2-image-gallery)
 
-A responsive image gallery designed for high resolution images.
+Responsive image gallery designed for high resolution images.
 
 The project consists of a gallery, a viewer and a script for image preparation.
 
-Before using the gallery, you have to process all of your images that will be part of your gallery with the node.js script. The processed images will be stored to your applications assets. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.
+Before using the gallery, you have to process all of your images that will be part of your gallery with the node.js script. The processed images will be stored to your applications assets or, if you'd like to, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.
 
 ## Demo
 
@@ -94,6 +94,10 @@ The viewerChange event notifies you when the viewer component gets opened or clo
 
 That's it, start your application and have a look!
 
+## Fetching images from an external data source
+
+If you'd like to know how you could fetch your images from an external data source [CLICK HERE](https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/externalDataSource.md).
+
 ## Currently used tools
 
 - Angular 4.0.0

docs/externalDataSource.md

@@ -0,0 +1,52 @@
+# How to fetch your images from an external/remote data source?
+
+## 1. Gallery parameter
+
+Define the input parameter `[metadataUri]` to point to the remote endpoint where the images metadata is stored.
+
+The images metadata will be created by the convert script.
+
+```javascript
+  <gallery [metadataUri]="'http://oidamo.de/angular2-image-gallery/assets/img/gallery/data.json'"></gallery>
+```
+
+## 2. Additional convert options
+
+```bash
+node node_modules/angular2-image-gallery/convert.js <path/to/your/images>
+```
+
+`--outputDir` defines the export location of the images after conversion.
+
+`--remoteBaseUrl` defines where the images will be fetched from during runtime, possibly a different host.
+
+## 3. Explain expected serving structure
+The created folder structure will look like this:
+
+    -- preview_xxs
+      -- your_image01.jpg
+         ...
+    -- preview_xs
+      -- your_image01.jpg
+         ...
+    -- preview_s
+      -- your_image01.jpg
+         ...
+    -- preview_m
+      -- your_image01.jpg
+         ...
+    -- preview_l
+      -- your_image01.jpg
+         ...
+    -- preview_xl
+      -- your_image01.jpg
+         ...
+    -- raw
+      -- your_image01.jpg
+         ...
+
+The gallery expects this exact folder structure served from your server specified via `--remoteBaseUrl`.
+
+## 4. CORS
+Please take into consideration to allow cross origin requests on your server 
+when trying to load images from a different origin.

misc/convert.js

@@ -24,21 +24,43 @@ var resolutions = [
 ];
 
 function init() {
-    if(argv["gName"]){
+    if (argv["gName"]) {
         var galleryName = argv['gName'];
-        console.log(`Gallery name provided - '${galleryName}'. Images to be created in the '${galleryName}' subfolder`);
+        console.log(`Gallery name provided - '${galleryName}'.`);
         assetsAbsoluteBasePath = assetsAbsoluteBasePath + argv['gName'] + "/";
         previewRelativePath = previewRelativePath + argv['gName'] + "/";
     }
+    if (argv["outputDir"]) {
+        var outputDirectory = argv["outputDir"];
+        if (outputDirectory.indexOf(outputDirectory.length) != '/') {
+          outputDirectory += '/';
+        }
+        assetsAbsoluteBasePath = outputDirectory;
+    }
+    if (argv["remoteBaseUrl"]) {
+        var remoteBaseUrl = argv["remoteBaseUrl"];
+        if (remoteBaseUrl.indexOf(remoteBaseUrl.length) != '/') {
+          remoteBaseUrl += '/';
+        }
+        previewRelativePath = remoteBaseUrl;
+    }
     if (argv['_'].length == 0) {
         toConvertAbsoluteBasePath = projectRoot + "/images_to_convert";
-        console.log('No path specified! Defaulting to ' + toConvertAbsoluteBasePath)
+        console.log('No path specified! Defaulting to ' + toConvertAbsoluteBasePath);
     } else if (argv['_'].length > 1) {
-        console.log('Illegally specified more than one argument!')
+        console.log('Illegally specified more than one argument!');
     }
     else {
-        toConvertAbsoluteBasePath = argv._[0]
+        toConvertAbsoluteBasePath = argv._[0];
+        if (toConvertAbsoluteBasePath.indexOf(toConvertAbsoluteBasePath.length) != '/') {
+            toConvertAbsoluteBasePath += '/';
+        }
     }
+
+    console.log(`\nImages will be scanned from this location:\n${toConvertAbsoluteBasePath}`);
+    console.log(`\nImages will be exported to this location:\n${assetsAbsoluteBasePath}`);
+    console.log(`\nImages will be expected during runtime at this location:\n${previewRelativePath}\n`);
+
     if (!argv['d'] && !argv['n'] && !argv['c']) {
         console.log('No sorting mechanism specified! Default mode will be sorting by file name.');
         sortFunction = sortByFileName;
@@ -274,7 +296,7 @@ function saveMetadataFile(sortedMetadataArray) {
 
 function calcRelativeLuminance(color) {
     return Math.sqrt(.299 * Math.pow(color.red(), 2) + .587 * Math.pow(color.green(), 2) + .114 * Math.pow(color.blue(), 2));
-};
+}
 
 // http://stackoverflow.com/a/15030117/810595
 function flatten(arr) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-image-gallery",
-  "version": "0.7.4",
+  "version": "1.0.0",
   "description": "Responsive Angular 2 image gallery",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "photo",
     "ng2",
     "ng",
-    "angular"
+    "angular",
+    "angular4"
   ]
 }

src/app/demo/demo.component.html

@@ -12,7 +12,8 @@
   <input mdInput [(ngModel)]="galleryName" placeholder="Gallery name">
 
   <gallery (viewerChange)="onViewerVisibilityChanged($event)"
-           [flexBorderSize]="flexBorderSize" [flexImageSize]="flexImageSize"
+           [flexBorderSize]="flexBorderSize"
+           [flexImageSize]="flexImageSize"
            [galleryName]="galleryName"></gallery>
 
   <br/><br/>

src/app/gallery/gallery.component.ts

@@ -16,6 +16,7 @@ export class GalleryComponent implements OnInit, OnDestroy, OnChanges {
     @Input('flexBorderSize') providedImageMargin: number = 3
     @Input('flexImageSize') providedImageSize: number = 7
     @Input('galleryName') providedGalleryName: string = ''
+    @Input('metadataUri') providedMetadataUri: string = undefined
 
     @Output() viewerChange = new EventEmitter<boolean>()
 
@@ -53,7 +54,6 @@ export class GalleryComponent implements OnInit, OnDestroy, OnChanges {
             this.fetchDataAndRender()
         else
             this.render()
-
     }
 
     public ngOnDestroy() {
@@ -69,9 +69,13 @@ export class GalleryComponent implements OnInit, OnDestroy, OnChanges {
     }
 
     private fetchDataAndRender() {
-        this.imageDataCompletePath = this.providedGalleryName != '' ?
+        this.imageDataCompletePath = this.providedMetadataUri
+
+        if (!this.providedMetadataUri) {
+            this.imageDataCompletePath = this.providedGalleryName != '' ?
             this.imageDataStaticPath + this.providedGalleryName + '/' + this.dataFileName :
             this.imageDataStaticPath + this.dataFileName
+        }
 
         this.http.get(this.imageDataCompletePath)
             .map((res: Response) => res.json())