{"id":18039651,"url":"https://github.com/timbokz/von","last_synced_at":"2026-02-26T06:46:29.135Z","repository":{"id":57393784,"uuid":"110319203","full_name":"TimboKZ/Von","owner":"TimboKZ","description":"🖼️ Elegant single page gallery generator","archived":false,"fork":false,"pushed_at":"2018-06-18T02:59:05.000Z","size":152,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-28T14:58:29.562Z","etag":null,"topics":["gallery","generator","javascript","lazy-loading","nodejs","photos","responsive","static-site","von"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/von-gallery","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TimboKZ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-11T04:56:33.000Z","updated_at":"2023-04-14T06:27:38.000Z","dependencies_parsed_at":"2022-09-26T16:51:16.773Z","dependency_job_id":null,"html_url":"https://github.com/TimboKZ/Von","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FVon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FVon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FVon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FVon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimboKZ","download_url":"https://codeload.github.com/TimboKZ/Von/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222235864,"owners_count":16953366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gallery","generator","javascript","lazy-loading","nodejs","photos","responsive","static-site","von"],"created_at":"2024-10-30T14:09:58.598Z","updated_at":"2026-02-26T06:46:29.066Z","avatar_url":"https://github.com/TimboKZ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![](https://s3-eu-central-1.amazonaws.com/foxypanda-ghost/2017/11/von-small.png)\n\n[![npm](https://img.shields.io/npm/v/von-gallery.svg)]()\n[![npm](https://img.shields.io/npm/dt/von-gallery.svg)](https://www.npmjs.com/package/von-gallery)\n[![Build Status](https://travis-ci.org/TimboKZ/Von.svg?branch=master)](https://travis-ci.org/TimboKZ/Von)\n\n🖼️🤔 Node.js generator for (static) single page galleries. The default template is responsive and supports lazy loading.\nAvailable as a CommonJS module and as a command line tool.\n\nBuilding a single page gallery using just the `von` command:\n\n![The concept behind Von.](https://s3-eu-central-1.amazonaws.com/foxypanda-ghost/2017/12/von-concept.png)\n\n# Example usage\n\nInstall [Node.js](https://nodejs.org/en/), which will automatically install NPM. Then, install Von globally:\n\n```bash\nnpm install -g von-gallery\n```\n\nNow go into any folder on your computer with some images, open a terminal window, and simply run:\n\n```bash\nvon -r\n```\n\nWhere `-r` stands for \"recursive\". This will create an `index.html` file with a gallery of all of the images in\nthat folder. By default, Von groups images either using their directory or prefix (e.g. `prefix-my_image.jpg`), but\nyou can adjust this behaviour. \n\n# About\n\nVon was meant to be very simple to use. Most of the time, `von` command will be all you need. You can also specify some\nextra options - this can all be done by passing command line arguments to `von`, for example:\n \n```bash\nvon -o ./build/output.html -tp ./custom-template.pug --recursive\n```\n\nAlternatively, you can create a config file called `vonrc.js`. The config lets you do anything that command line\narguments can do, plus a little extra. Namely, you can use the config to define groups and custom grouping/sorting\nfunctions. Once you have defined a config, simply run `von` in the same directory. Check out this\n[example config](test/util/vonrc.js) for more info.\n\nIf you want to automate the process even further, you can add `von-gallery` as a dependency to your NPM project and use\nit as a CommonJS module, for example:\n\n```javascript\nconst Von = require('von-gallery');\n\n// Specify options for Von\nlet options = {\n    directory: './path/to/images/',\n    output: './build/my-gallery.html',\n    template: 'mini',\n    groupOrder: 'desc',\n};\n\n// Only generate a schema, without actually creating any new files:\nlet schema = Von.generateSchema(options);\nconsole.log(schema);\n\n// Build a single page gallery and store in the specified `output` file:\nVon.run(options);\n```\n In fact,\nthe command line tool is simply a wrapper around this module, so both offer identical functionality.\n\nRemember that Von is a single page gallery generator - if you want to develop something complex\nyou should use a proper [static site generator](https://www.staticgen.com/). \n\n## How Von works\n\nThere are 4 components Von works with:\n\n1. **Images.** Images are the actual files located in the folder Von is working with.\n2. **Groups.** Groups are collection of images. You tell Von which heuristics to use to group images by specifying\neither command line arguments or config properties.\n3. **Schema.** Schema contains information about your gallery. This includes the page title, page description, array of\nall groups, and other arbitrary information. You can append extra information to it using the config.\n4. **Template.** Template uses the schema created in the previous step to produce HTML for your gallery. Currently Von\nuses `mini` as the default template, but you can also define custom templates.\n\nThe logic Von executes can be separated into two distinct steps: schema generation and template compilation.\n\n### Phase 1: Schema generation\n\nNo new files are created during this phase. First, Von scans the working directory for images. Once all of the images\nhave been discovered, they are grouped and sorted using the options you specified. Then, said groups, images and options\nare used to generate a schema object which describes your gallery.\n\nThis new schema is an independent piece of data. In fact, you don't even have to proceed to the next step - you can\nsimply export the schema using the `von -s` command or `Von.generateSchema({...})` function. The former might be useful\nfor debugging your `vonrc.js`.  \n\n### Phase 2: Template compilation\n\nDuring this phase Von takes the generated schema and uses it to build the template you chose. At the moment, the only\nbuilt-in template is `mini` but you can specify your own templates.\n\nThere is a built-in support for Pug templates, so you can simply point Von at a Pug file using\n`von -tp ./path/to/template.pug`. If you use Pug, the `schema` object will be available in your Pug code. For example,\nyou can use `schema.title` and `schema.description` to access the title and the description of the gallery respectively. \n\nIf you want to use some other templating engine, you can define a `my-template.von.js`, where `my-template` is the name\nof your template. Then, you can tell Von to use it by specifying the appropriate command line arguments:\n\n```bash\nvon -tp ./path/to/my-template.von.js\n```\n\nVon will initialise your template and call the `.compile()` method letting you handle the rest of the logic. See\n[mini.von.js](./templates/mini/mini.von.js) for example implementation. \n\nFinally, built-in Von templates will write HTML out to the output file you specified. Note that your custom template\ncan override this logic: it can write out to a different file, to multiple files or not write anything at all. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbokz%2Fvon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimbokz%2Fvon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbokz%2Fvon/lists"}