JSON data

Are you familiar with JSON, Ajax and Javascript? Since jAlbum 12.2 you can create skins that uses JavaScript to read files with JSON data about the album, instead of having to learn the jAlbum specific Tags and Variables in index.htt and slide.htt.

Just add an empty data-config.json file to the root of the skin, and jAlbum will generate all the JSON files you need:

• In the root of the final album a tree.json file is added, containing all folder data for the entire album.
• For each folder in the final album a number of dataN.json files will be added, where N is the paging number, starting with 1.

Quick example

Create an album with the image "Clock.jpg" in the root and one folder called "Nature" with "Horses.jpg", and add a data-config.json file to the root of the skin that looks like this:

{"paging":0}

jAlbum will then generate these files (depending on the metadata in the images):

tree.json:

{
  "path": "JSON-example",
  "folders": [
    {
      "path": "Nature",
      "counters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "thumb": {
        "path": "Nature\/thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "name": "Nature",
      "fileDate": "2015-02-12T15:57:07.0Z"
    }
  ],
  "counters": {
    "total": 2,
    "images": 1,
    "folders": 1,
    "files": 1
  },
  "name": "JSON-example",
  "comment": "Minimal JSON album.",
  "fileDate": "2015-02-12T15:57:27.0Z"
}

data1.json:

{
  "path": "JSON-example",
  "deepCounters": {
    "total": 3,
    "images": 2,
    "folders": 1,
    "files": 2
  },
  "counters": {
    "total": 2,
    "images": 1,
    "folders": 1,
    "files": 1
  },
  "album": {
    "description": "Minimal JSON album."
  },
  "objects": [
    {
      "path": "Clock.jpg",
      "image": {
        "path": "slides\/Clock.jpg",
        "width": 900,
        "height": 668
      },
      "creator": "Laza",
      "thumb": {
        "path": "thumbs\/Clock.jpg",
        "width": 216,
        "height": 160
      },
      "fileSize": 78560,
      "name": "Clock.jpg",
      "rating": 4,
      "fileDate": "2013-07-02T12:56:42.0Z",
      "category": "image",
      "title": "Clock",
      "camera": {
        "aperture": 4.5,
        "exposureTime": "1\/50s",
        "originalDate": "2009-08-09T15:46:18.0Z",
        "cameraModel": "Canon EOS 1000D",
        "focusDistance": "0.26m",
        "focalLength35mm": "29.2mm",
        "cameraMake": "Canon",
        "isoEquivalent": 400,
        "flash": "Flash did not fire, auto",
        "focalLength": "18.0mm"
      }
    },
    {
      "path": "Nature",
      "deepCounters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "counters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "thumb": {
        "path": "Nature\/thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "name": "Nature",
      "fileDate": "2015-02-12T15:57:07.0Z",
      "category": "folder"
    }
  ],
  "name": "JSON-example",
  "comment": "Minimal JSON album.",
  "fileDate": "2015-02-12T15:57:27.0Z"
}

The purpose of this JSON generation is to make creating skins much easier for those knowing "only" HTML, CSS, Javascript and maybe jQuery. You don't have to learn any of the jAlbum variables. You instead just look at the generated json-files and grab the data. If you have developed a service reading an API with JSON-data using Ajax, creating a skin with this new system should be faily simple.

The format of the JSON-data isn't finalized in jAlbum 12.1.9, but we aim that it should be that in jAlbum 12.2. (Or at least backward compatible.) We therefore want to have your input on it. We can always add data later, but changing the basic format later is trickier. The data-config.json-file will be used as a config file for the JSON-data. It currently only support "paging". Saying {"paging":0} turns off paging, but setting it to a number X will generate a new dataN.json file every X album object.

SEO support has been a concern with these Javascript-generated skins. Our solution is to add the include-file "seodatatags.inc" to jAlbum. It generates plain HTML for the album and removes it using Javascript when viewing the page. But we're not sure that this is the best way. Is there a better way? Should it generate better/other HTML? Should the removal be done differently?

I have attached a beta version of a skin that uses this new system. This skin should be the "Minimal"-version of this JSON-system, and work as a template of how one can use this data. I need input on this one too. What is missing and what does not work? (I know that video support is a bit rough. The slide-navigation can be blocked with some combinations of window- and video-sizes.) And the skin does not support paging. And I'm not a designer, so can the css be improved to make it look nicer?