Naphthalene Possum Management

    metalsmith-project-images

    1.1.2 • Public • Published

    Metalsmith Project Images

    npm version Build Status

    A metalsmith plugin that can scan all images in subfolders and add it to a files metadata.

    The idea

    Let's say we want to show all images per project. Assume we have a folder structure like below:

    projects/
    |-- hello/
    |	|-- hello.md
    |	|-- images/
    |		|-- image-1.png
    |		|-- image-2.png
    |-- world/
        |-- world.md
        |-- images/
            |-- beautiful-world.png
            |-- skyfall.jpg
    

    This would be possible with the following configuration:

    var Metalsmith = require('metalsmith');
    var images = require('metalsmith-project-images');
    
    var metalsmith = new Metalsmith(__dirname)
      .use(images({
        pattern: 'projects/**/*.md'
      })
      .build();
    

    Combined with the collections metalsmith plugin, we can loop over each collection and have access to the images for each project.

    {{#each project in projects}}
        <h1>{{project.title}}</h1>
        <ul>
            {{#each image in project.images}}
                <li><img src="{{image}}"/></li>
            {{/each}}
        </ul>
    {{/each}}

    Install

    npm install --save metalsmith-project-images

    Quick usage

    var Metalsmith = require('metalsmith');
    var images = require('metalsmith-project-images');
     
    var metalsmith = new Metalsmith(__dirname)
      .use(images({
       pattern: 'projects/**/*'
      }))
      .build();

    Api

    var metalsmith = new Metalsmith(__dirname);
     
    var defaultOptions = {
        authorizedExts: ['jpg', 'jpeg', 'svg', 'png', 'gif', 'JPG', 'JPEG', 'SVG', 'PNG', 'GIF'],
        pattern: '',
        imagesDirectory: 'images',
    };
     
    metalsmith.use(images(defaultOptions))
    // or passing in no options will use the defaults
    metalsmith.use(images())
    One options object
    var options = {
        authorizedExts: ['gif']
        pattern: 'memes/**/*.md',
        imagesDirectory: 'giphys',
    }
    Multiple options objects

    It is possible to define multiple configuration objects.

    var options = [
        // only add gif's to memes ;)
        {
            authorizedExts: ['gif']
            pattern: 'memes/**/*.md',
            imagesDirectory: 'giphys',
        },
     
        // add all images to its matching project
        {
            pattern: 'projects/**/*.md',
        },
     
        // add all images to its matching project with a different metadata key
        {
            pattern: 'projects/**/*.md',
            imagesDirectory: 'maps',
            imagesKey: 'maps',
        },
    ]

    Options

    name default description
    pattern **/*.md pattern for files to scan images for
    authorizedExts jpg, jpeg, svg, png, gif, JPG, JPEG, SVG, PNG, GIF allowed image extensions
    imagesDirectory images directory inside the pattern to look for images to add
    imagesKey images name of metadata key to hold images collection

    Note:

    • If imagesDirectory does not exist, it is skipped and no collection will be created

    License

    MIT

    Install

    npm i metalsmith-project-images

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    ISC

    Last publish

    Collaborators

    • hoetmaaiers