manithree/theme-cards-flow - Change 5TZPO2XG4EGASWQOWU6O26A63546YUJRR2MPXP5QCSRIJYZ3AYTAC

new photo metadata plugin

Created by Peter Siebler on June 13, 2019

5TZPO2XG4EGASWQOWU6O26A63546YUJRR2MPXP5QCSRIJYZ3AYTAC

Dependencies

In channels

main

Change contents

Insertion in theme/public/styles/metadata.less at line 33 [4.30799]

[4.31351]

[5.13366]

}
div.metadata h3{
    display: block;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 500;
    width: 95%;
    float: none;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-transform: uppercase;
    padding-top:2em;
    margin-bottom: 2em;
    border-bottom: 1px solid

Replacement in theme/public/styles/metadata.less at line 76 [4.30799]
B:BD[4.31535] → [4.31535:31561]
```
    padding: 0 0 1em 1em;
```
[4.31535]
[4.31561]
```
    padding: 0 0 1em 0.6em;
```
Replacement in theme/public/styles/metadata.less at line 84 [4.30799]
B:BD[4.31681] → [4.31681:31682]
```
}
```
[4.31681]
```
}
```

Replacement in theme/public/styles/header.less at line 16 [6.280538]

B:BD[6.280896] → [7.417:526]

    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);

[6.280896]

[8.3085]

    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    transition: height 0.3s linear 0s, padding 0.3s linear 0s;
    transition: box-shadow 250ms;
}
.header-notFixed {
    position: relative;
    color: @header-titlecolor;
    display: none;
    z-index: 1000;
    width: 100%;
    height: 54px;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 37 [4.31750]
B:BD[4.32710] → [4.32710:32739]
```
        this.photodata = {};
```
[4.32710]
[4.32739]
```
        this.photodata = [];
```
Replacement in theme/public/lightgallery/js/lg-metadata.js at line 120 [4.31750]
B:BD[4.42051] → [4.42051:42080]
```
        this.photodata = {};
```
[4.42051]
[4.42102]
```
        this.photodata = [];
```
Replacement in theme/public/lightgallery/js/lg-metadata.js at line 123 [4.31750]
B:BD[4.42195] → [5.13794:13849]
```
        this.metafile = $(thumbnail).data('metadata');
```
[4.42195]
[4.42195]
```
        this.metafile = $(thumbnail).data('metafile');
```

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 136 [4.31750]

∅:D[9.157] → [5.14256:14313]

B:BD[5.14256] → [5.14256:14313]

B:BD[5.14313] → [10.156:217]

B:BD[10.217] → [11.156:811]

                        $.each(m, function(key, value) {
                            if (isEmpty(isEmpty) == false) {
                                // check geo data                            
                                if (b && key.startsWith('GPS')) {
                                    // TODO ???
                                    // if (key == "GPSLatitude")
                                    //     value = Number.parseFloat(Math.abs(value).toFixed(5));
                                    // if (key == "GPSLongitude")
                                    //     value = Number.parseFloat(Math.abs(value).toFixed(5));
                                    // console.log(key, value);
                                    _geoDat[key.toLowerCase()] = value;

[5.14256]

[5.14972]

                        if (isEmpty(isEmpty) == false) {
                            $.each(m, function(key, item) {
                                if (typeof item === 'object') {
                                    s = decamelize(key, " ");
                                    _this.addPhotodata({ label: s, deep: 0, value: null });
                                    $.each(item, function(key, value) {
                                        s = decamelize(key, " ");
                                        _this.addPhotodata({ label: s, deep: 1, value: value });
                                        if (key.startsWith('GPS')) {
                                            _geoDat[key.toLowerCase()] = value;
                                        }
                                    })

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 149 [4.31750]

B:BD[5.15006] → [11.812:932]

∅:D[11.932] → [5.15126:15184]

B:BD[5.15126] → [5.15126:15184]

                                s = decamelize(key, " ");
                                _this.addPhotodata(s, value);
                            }
                        });

[5.15006]

[5.15184]

                            });
                        }

Deletion in theme/public/lightgallery/js/lg-metadata.js at line 153 [4.31750]
B:BD[5.15308] → [5.15308:15373]
```
                            console.log(_geoDat, _this.geodata);
```

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 162 [4.31750]

B:BD[10.1228] → [10.1228:1313]

                if (keytext) {
                    _this.photodata[keytext] = value;

[10.1228]

[10.1313]

                if (keytext && value) {
                    _this.addPhotodata({ label: keytext, deep: 1, value: value });

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 177 [4.31750]

B:BD[5.15693] → [5.15693:15754]

B:BD[5.15754] → [10.1332:1394]

∅:D[10.1394] → [5.15780:15821]

B:BD[5.15780] → [5.15780:15821]

    Metadata.prototype.addPhotodata = function(key, value) {
        if (isEmpty(key) == false && isEmpty(value) == false)
            this.photodata[key] = value;

[5.15693]

[4.42680]

    Metadata.prototype.addPhotodata = function(obj) {
        // { label: s, deep: 0, value: s }
        if (isEmpty(obj)) return;
        if (isEmpty(obj.label) == false) {
            this.photodata.push(obj)
        }

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 193 [4.31750]

B:BD[4.42929] → [4.42929:42973]

        if (key == 'metadata') return null;

[4.42929]

[4.42973]

        if (key == 'metafile') return null;
        if (key == 'subHtml') return null;
        // ... more will come

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 216 [4.31750]

B:BD[4.43864] → [4.43864:43995]

        $.each(this.photodata, function(key, value) {
            t.html += '<label>' + key + "</label><span>" + value + '</span>'

[4.43864]

[4.43995]

        $.each(this.photodata, function(item) {
            if (this.deep === 0)
                t.html += '<h3>' + this.label + "</h3>"
            if (this.deep === 1 && this.value)
                t.html += '<label> - ' + this.label + "</label><span>" + this.value + '</span>'

Replacement in theme/public/lightgallery/js/lg-metadata.js at line 247 [4.31750]

B:BD[4.44791] → [2.436:506]

    /* Take d/m/s array from exif-js and convert to decimal format */

[4.44791]

[2.506]

    /* 
     * Take d/m/s array from exif-js and convert to decimal format 
     */

Replacement in theme/partials/galleryHeader-home.hbs at line 1 [8.14203]

B:BD[8.14203] → [12.891718:891747]

∅:D[12.891747] → [8.14228:14288]

B:BD[8.14228] → [8.14228:14288]

B:BD[8.14288] → [13.3100:3194]

∅:D[13.3194] → [14.361526:361544]

B:BD[14.361526] → [14.361526:361544]

∅:D[14.361544] → [8.14356:14547]

B:BD[8.14356] → [8.14356:14547]

<header id="pagetop-home">  
  <h1>      
      <a href="{{relative gallery.home.url}}">
          {{#if settings.logo }}
          <img src="{{settings.logo}}" class="avatar"></img>
          {{/if}}
          <span class="appname">{{{gallery.title}}}</span>
      </a>
  </h1>
  {{#compare album.depth '==' 0}}
  <span id="pageinfo" class="pageinfo">{{album.summary}}</span>
  {{/compare}}

[8.14203]

[12.891748]

<header id="pagetop-home"> 
   <div class="header-fixed">
    <h1>      
        <a href="{{relative gallery.home.url}}">
            {{#if settings.logo }}
            <img src="{{settings.logo}}" class="avatar"></img>
            {{/if}}
            <span class="appname">{{{gallery.title}}}</span>
        </a>
    </h1>
    {{#compare album.depth '==' 0}}
    <span id="pageinfo" class="pageinfo">{{album.summary}}</span>
    {{/compare}}
  </div>  
  <div class="header-notFixed">
      <p>{{{gallery.title}}}</p>
  </div>

Insertion in theme/helpers/photoMeta.js at line 18 [7.3025]
[3.5248]
[15.1542]
Insertion in theme/helpers/photoMeta.js at line 22 [7.3025]
[15.1581]
[15.1581]

Replacement in theme/helpers/photoMeta.js at line 24 [7.3025]

B:BD[15.1628] → [3.5310:5399]

        if (meta.all && meta.all.SourceFile && config.folders && config.folders.input) {

[15.1628]

[3.5399]

        if (meta.all && meta.all.SourceFile && config.copyMetaFiles && config.copyMetaFiles.source) {

Replacement in theme/helpers/photoMeta.js at line 27 [7.3025]

B:BD[15.1787] → [15.1787:1836]

B:BD[15.1836] → [3.5451:5733]

                attr['data-metadata'] = metafile
            } else {
                if (config.writeMetaData && config.writeMetaData.target) {
                    metafile = writeMetadata(meta.all, config)
                    if (metafile != null) {
                        attr['data-metadata'] = metafile
                    }

[15.1787]

[3.5733]

                attr['data-metafile'] = metafile
            }
        }
        // 2nd check if we have a to create the metadata file 
        if (metafile == null && config.writeMetaData && config.writeMetaData.target) {
            if (config.writeMetaData && config.writeMetaData.target) {
                metafile = writeMetadata(meta.all, config)
                if (metafile != null) {
                    attr['data-metafile'] = metafile

Insertion in theme/helpers/photoMeta.js at line 56 [7.3025]
[7.4264]
[3.6511]
Insertion in theme/helpers/photoMeta.js at line 58 [7.3025]
[3.6600]
[7.4354]

Replacement in theme/helpers/photoMeta.js at line 84 [7.3025]

B:BD[3.6857] → [3.6857:6985]

    const sourceFile = config.folders.input + filename
    const targetFile = config.folders.output + 'media/large/' + filename

[3.6857]

[11.2081]

    const sourceFile = config.copyMetaFiles.source + filename
    const targetFile = config.copyMetaFiles.target + filename

Replacement in theme/helpers/photoMeta.js at line 142 [7.3025]

B:BD[3.8478] → [3.8478:8511]

        return JSON.stringify(d)

[3.8478]

[11.2218]

        if (d) {
            return JSON.stringify(new Array(d))
        }
        return null;

Replacement in theme/helpers/photoMeta.js at line 161 [7.3025]

B:BD[3.8900] → [3.8900:9001]

    const webfile = config.writeMetaData.linkfolder + data.File.FileName.replace('.', '_') + '.json'

[3.8900]

[11.2362]

    const webfile = config.writeMetaData.linkpath + filename.split(config.writeMetaData.linkpath)[1]

Replacement in theme/helpers/photoMeta.js at line 164 [7.3025]

∅:D[3.9064] → [11.2416:2462]

B:BD[11.2416] → [11.2416:2462]

B:BD[11.2462] → [3.9065:9109]

        fs.mkdirsSync(path.dirname(filename))
        fs.writeFileSync(filename, content)

[3.9064]

[11.2507]

        if (content) {
            fs.mkdirsSync(path.dirname(filename))
            fs.writeFileSync(filename, content)
        }

Replacement in theme/helpers/photoMeta.js at line 172 [7.3025]

B:BD[11.2587] → [3.9201:9256]

    console.log('    ✔︎ writeMetadata:', filename)

[11.2587]

[3.9256]

    console.log('    ✔︎ writeMetadata:', webfile)

Insertion in theme/helpers/README.md at line 5 [6.4103141]

[6.4103417]


##PHOTO META DATA
**see fotoMeta.js**: used with mediaitem to add the data section
![Lightgallery Metadata view](../../docs/photo_metadata.png)
###Requirement
####1. Modify the Thumbsup metadata.js

Replacement in theme/helpers/README.md at line 18 [6.4103141]

B:BD[6.4103418] → [6.4103418:4103444]

# Information for helpers

[6.4103418]

[6.4103445]

```js
  ...
  class Metadata {
  constructor(exiftool, picasa, opts) {
      // standardise metadata
      this.date = getDate(exiftool)
      this.caption = caption(exiftool)
      this.keywords = keywords(exiftool, picasa)
      this.video = video(exiftool)
      this.animated = animated(exiftool)
      this.rating = rating(exiftool)
      this.favourite = favourite(picasa)
      const size = dimensions(exiftool)
      this.width = size.width
      this.height = size.height
      this.exif = opts ? (opts.embedExif ? exiftool.EXIF : undefined) : undefined
      
      ////////////////////////////////////////////////////////
      this.all = exiftool // <--- Add this to get all metadata
      ////////////////////////////////////////////////////////
          // metadata could also include fields like
          //  - lat = 51.5
          //  - long = 0.12
          //  - country = "England"
          //  - city = "London"
          //  - aperture = 1.8
  }
  ...
}
```

Replacement in theme/helpers/README.md at line 50 [6.4103141]

B:BD[16.465] → [16.465:519]

**cover.js***: checks home or album / galllery cover

[6.4103446]

[6.4103542]

####2. Themes settings
see below (Copy Metadata.json, Copy / Create Metadata.json)

Replacement in theme/helpers/README.md at line 53 [6.4103141]

B:BD[16.521] → [16.521:582]

**fotoMeta.js**: used with mediaitem to add the data section

[6.4103543]

[13.4542]

**album.hbs** 
To use the metadata layer, add the css and javascript files to the main template. 
```html
    <head>
        .....    
        ## all css files
        <link rel="stylesheet prefetch"  href="{{relative 'public/lightgallery/css/lg-exif.min.css'}}" /> 
        .....
    </head>
    <body>
        ## all javascripts
        ....
        <script src="{{relative 'public/lightgallery/js/lg-metadata.js'}}"></script>
    </body>    
```

Replacement in theme/helpers/README.md at line 69 [6.4103141]

B:BD[13.4543] → [13.4543:4599]

**foldertree.js**: experimental - build navigation tree

[13.4543]

[16.582]

---
**Default**
If no --theme-settings are used the metadataview shows all form the "data-*" attributes.
```nodejs
config.json
	{
	    "input": "PATH TO OUTPUT",
	    "output": "./fotobuch",
	    "title": "Fotobuch AUTOR",
	    "include-raw-photos": false,
	    "photo-quality": 90,
	    "thumb-size": 360,
	    "large-size": 1200,
	    "embed-exif": true,
	    "sort-albums-by": "title",
	    "sort-albums-direction": "desc",
	    "theme-path": "PROJECTFOLDER/theme-cards-flow/theme",
	    "theme-settings": "PATH TO PROPERTYFILE.json"
	    "cleanup": true
	}
```
---
**Copy Metadata.json files from the photo album folder**
If  "**--theme-settings**" are used and the settings holds a  "**copyMetaFiles**" section,
all metafile.json files will be copied to the media folder. For this case the
photo metafile.json will be used to render the metaview data. Optional all additional 
"data-*" attributes will be rendered too.
```nodejs
## config.json
   {
        ....
        ## use the theme-settings 
        "theme-settings": "PATH TO THEME-SETTINGS.JSON",
        ...
   }

Insertion in theme/helpers/README.md at line 107 [6.4103141]

[16.583]

## theme-settings.json
{
    ....
    "copyMetaFiles": {
        "source": "PATH TO PHOTOS FOLDER",
        "target": "PATH TO MEDIAFOLDER/media/large/"
    },
    ...
}
```
---
**Copy / Create Metadata.json data from the photo album folder**
```nodejs
## config.json
   {
        ....
        ## use the theme-settings 
        "theme-settings": "PATH TO THEME-SETTINGS.JSON",
        ...
   }
## theme-settings.json
{
    ....
    "copyMetaFiles": {
        "source": "PATH TO PHOTOS FOLDER",
        "target": "PATH TO MEDIAFOLDER/media/large/"
    },
    "writeMetaData": {
        "target": "/Users/petsie1612/ips_apps/webfotos/fbtemp2/media/large/",
        "linkpath": "media/large/",
        "metatags": {
            "Allgemein": {
                "Dateiname": "File.Filename",
                "Ablage": "File.Directory",
                "Beschreibung": "Image.Description",
                "Fotograf": "Author.Artist"
            },
            "Foto": {
                "Fotoapperat": "EXIF.Model",
                "Marke": "EXIF.Make",
                "Bildgröße": "Composite.ImageSize",
                "Auflösung": "Composite.Megapixels",
                "Blende": "Composite.ShutterSpeed",
                "Belichtung": "Composite.LightValue",
                "ISO": "EXIF.ISO",
                "Focus": "EXIF.FocalLength",
                "Belichtungsdauer": "EXIF.ExposureTime"
            },
            "Geografie": {
                "Datum/Uhrzeit": "Composite.GPSDateTime",
                "Breitengrad": "Composite.GPSLatitude",
                "Längengrad": "Composite.GPSLongitude",
                "Höhe": "Composite.GPSAltitude",
                "Land": "Composite.Country",
                "Stadt": "Composite.City"
            }
        }
    }
}
```
---
# Information for helpers
---
**cover.js***: checks home or album / galllery cover 
**foldertree.js**: experimental - build navigation tree

Replacement in theme/album.hbs at line 117 [6.4103770]
B:BD[17.5877] → [18.420531:420547]
```
      });      
```
[17.5877]
[6.4106315]
```
      });
```
File addition: photo_metadata.png (----------)
[6.4107179]

Replacement in README.md at line 30 [6.5728420]

B:BD[18.420766] → [11.2834:2870]

- New lightgallery plugin metadata

[18.420766]

[11.2870]

- New lightgallery plugin metadata [How to do see: theme/helpers](theme/helpers/README.md)