Applying underscore methods for CloudinaryImage objects in keystone.js with handlebars

Question

I want to resize and alter image quality on upload using Cloudinary in my keystone.js app.

All examples (on github) of how to use underscore methods for cloudinary are written in pug/jade. See for example (from https://github.com/keystonejs/keystone-demo/blob/master/templates/views/gallery.jade):

img(src=image.fill(300,300), alt=gallery.name + ' image ' + (i+1)).img-thumbnail

How does one translate this into handlebars? I'm kind of unfamiliar with jade/pug and can't for the life of me figure out what exactly is going here.

score 0 · Answer 1 · answered Jan 14 '17 at 16:03

Note that this is analogous example, not actual code that you refer to.

Assuming that

Image = function(url) {
    this.url = url;
    this.fill = (sizeX, SizeY) => {
        return `${this.url}/${sizeX}x${sizeY}.png`;
    }
}


galleries = [
    {
        name: 'Gallery1',
        images: [
            new Image('img/gallery/1/image/1'),
            new Image('img/gallery/1/image/2')
        ]

    },
    {
        name: 'Gallery2',
        images: [
            new Image('img/gallery/2/image/1'),
            new Image('img/gallery/2/image/2'),
            new Image('img/gallery/2/image/3')
        ]
    }

];

then following

for gallery in galleries
    for image in gallery
        img(src=image.fill(300,300), alt=gallery.name + ' image ' + (i+1)).img-thumbnail

is equivalent to

<img class="img-thumbnail" src="img/gallery/1/image/1/300x300.png" alt="Gallery1 image 1" />
<img class="img-thumbnail" src="img/gallery/1/image/1/300x300.png" alt="Gallery1 image 2" />

<img class="img-thumbnail" src="img/gallery/2/image/1/300x300.png" alt="Gallery2 image 1" />
<img class="img-thumbnail" src="img/gallery/2/image/2/300x300.png" alt="Gallery2 image 2" />
<img class="img-thumbnail" src="img/gallery/2/image/3/300x300.png" alt="Gallery2 image 3" />

score 0 · Accepted Answer · answered Jun 15 '17 at 18:42

A few months old, but I pounded my head against the wall on this myself. I finally "shotgunned" it until I found what worked. This is what worked for me:

Put the code in the javascript files in the routes folder, basically the controllers.

Within that file, put the code in the exec method. Below is a snippet of what I did in my about.js file for the variable locals.myPicture.

var keystone = require('keystone');

exports = module.exports = function (req, res) {

var view = new keystone.View(req, res);
var locals = res.locals;

// Set locals
locals.section = 'about';
locals.welcome = "";
locals.background;
locals.myPicture;

view.on('init',function (next) {
    var q = keystone.list('About').model.find().where('defaultAbout').eq(true);

    q.exec(function (err, result) {
        locals.welcome = result[0].welcome;
        locals.background = result[0].backGround.url;
        locals.myPicture = result[0]._.heroImage.fit(400,400);

        next(err);
    });
})



// Render the view
view.render('about');
};

For some context, I have an about page where there can be multiple profiles. The field defaultAbout is a boolean field that sets that about profile as the default one to be shown on the about page. Also, I'm using Handlebars, but I didn't have to do anything within the view concerning underscore methods.

For multiple images, I imagine you could do the same thing with a "for" loop, but I haven't had to do that......yet. Hopefully this helps someone, although I can't promise the way I did it is best practice.

Applying underscore methods for CloudinaryImage objects in keystone.js with handlebars

2 Answers2