folder._contents ? Ability to iterate over and return file names in a folder?

[dblodorn]

Hi, I've used the harp static site generator with jade for some time, and was very into a particular feature which let me just dump a bunch of images in a folder and then iterate over them as the contents -> For example (setting the directory in my json file - so the for statement just returned the image names)

 ul#image-gallery
    for image in public.imgs._contents
      li
        img(src="#{directory}/#{image}")

My question is whether pug supports this functionality (changing for to each) - if this was something that was added by the author of harp.js , or didn't make it from jade to pug. Im rolling my own ssg for personal projects and this feature is amazing. thanks!!!

[jbsulli]

Should work with minor changes. Change your pug to something like:

ul#image-gallery
    each image in public.imgs._contents
      li
        img(src=("" + directory + "/" + image))

You should be able to do something like:

pug.renderFile(
    'image-gallery.pug', 
    { 
        directory: 'img',
        public: {
            imgs: {
                _contents:[
                    "image-1.jpg",
                    "image-2.jpg",
                    "image-3.jpg"
                ]
            }
        }
    }
);

You should get something like:

<ul id="image-gallery">
    <li><img src="img/image-1.jpg"/></li>
    <li><img src="img/image-2.jpg"/></li>
    <li><img src="img/image-3.jpg"/></li>
</ul>

Note: I pretty-printed the html by hand. Pug will output it all on one line.

[dblodorn]

Awesome @jbsulli - I will give this a try! One question tho - do i still need to declare the images in a JSON string?

[jbsulli]

Nope, it's just JavaScript. So pass it an array of file names and you're golden.

Sounds like you're trying to do something like:

ul#image-gallery
    each image in images
        li
            img(src=("" + directory + image))

var dir = "./images/";
var fs = require('fs');

fs.readdir(dir, function(err, files){
    var html = pug.renderFile(
        'image-gallery.pug',
        {
            directory: dir,
            images: files
        }
    )

    // do something with html
    console.log(html);
});

Obviously there are security concerns with this and fs.readdir is going to give you folders and literally everything in the folder but I assume you got it from here.

[dblodorn]

So awesome! thanks!! @jbsulli - no worries about security, as this is just for a simple static site generator tool i'm building. - more oriented towards getting lots of pictures up with minimal fuss, just want to dump em all in folder and render out the html: this is the example for my current site( http://www.db13.us/field/bcn.html) , I've been using harp.js- which is really great, https://harpjs.com/ - but wanted to tweak some things and just roll my own out. I really appreciate the guidance! this is the project i'm creating https://github.com/dblodorn/SSG-OMG -Cheers!