Применение методов подчеркивания для объектов CloudinaryImage в keystone.js с рулем

Я хочу изменить размер и качество изображения при загрузке с помощью Cloudinary в моем приложении keystone.js.

Все примеры (на github) того, как использовать методы подчеркивания для облачных вычислений, написаны на pug/jade. См., например, (из 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

Как перевести это на руль? Я немного не знаком с нефритом / мопсом и не могу понять, что именно здесь происходит.


keystonejs cloudinary handlebars.js
person obauma    schedule 14.01.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Несколько месяцев, но я сам стучал головой о стену об этом. Я, наконец, «застрелил» его, пока не нашел то, что сработало. Вот что сработало для меня:

  1. Поместите код в файлы javascript в папку маршрутов, в основном контроллеры.

  2. В этом файле поместите код в метод exec. Ниже приведен фрагмент того, что я сделал в моем файле about.js для переменной 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');
};

Для некоторого контекста у меня есть страница «О нас», где может быть несколько профилей. Поле defaultAbout — это логическое поле, которое устанавливает этот профиль как профиль по умолчанию, который будет отображаться на странице «О нас». Кроме того, я использую Handlebars, но мне не нужно ничего делать в представлении относительно методов подчеркивания.

Я полагаю, что для нескольких изображений вы могли бы сделать то же самое с циклом for, но мне еще не приходилось этого делать......пока. Надеюсь, это поможет кому-то, хотя я не могу обещать, что то, как я это сделал, является лучшей практикой.

person User1    schedule 15.06.2017

arrow_upward
0
arrow_downward

Обратите внимание, что это аналогичный пример, а не фактический код, на который вы ссылаетесь.

При условии, что

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')
        ]
    }

];

затем после

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

эквивалентно

<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" />
person Maciej Caputa    schedule 14.01.2017