在Keystone.js中显示包含描述的图库图像的问题

时间:2016-08-18 13:59:36

标签: node.js mongodb gallery cloudinary keystonejs

我是Keystone.js和Mongodb / nodejs开发的新手,但我已经喜欢它了。

我正在尝试更改Keystone中的默认图库行为,以便为图库中的每个图像添加名称和描述,因为" Types.CloudinaryImages"似乎不允许这样做。 正如在Image gallery with caption using CloudinaryImage on keystonejs上找到的那样,我添加了一个新的"图像"模型和修改我的主页的路线(应该显示画廊)。

检查控制台日志时,查询会检索图库并填充图像链接,但我的代码显示错误。

图库模型

var keystone = require('keystone');                                                                                                                   
var Types = keystone.Field.Types;                                                                                                                     

/**                                                                                                                                                   
 * Gallery Model                                                                                                                                      
 * =============                                                                                                                                      
 */                                                                                                                                                   

var Gallery = new keystone.List('Gallery', {                                                                                                          
    map: { name: 'name' },                                                                                                                        
    autokey: { from: 'name', path: 'key', unique: true },                                                                                         
});                                                                                                                                                   

Gallery.add({                                                                                                                                         
    name: { type: String, required: true },                                                                                                       
    published: {type: Types.Select, options: 'Yes, No', default: 'No',    index: true, emptyOption: false},                                          
    publishedDate: { type: Date, index: true, dependsOn: {published:  'Yes'} },                                                                    
    heroImage: { type: Types.Relationship, ref:'Image' },                                                                                         
    images: { type: Types.Relationship, ref: 'Image', many: true },                                                                               
});                                                                                                                                                   


Gallery.track = true;                                                                                                                                 
Gallery.defaultColumns = 'title, published|20%, publishedDate|20%';                                                                                   
Gallery.register();      

图片模型

var keystone = require('keystone');                                                                                                                   
var Types = keystone.Field.Types;                                                                                                                     


/**                                                                                                                                                   
 * Image Model                                                                                                                                        
 * =============                                                                                                                                      
 */                                                                                                                                                   

var Image = new keystone.List('Image', {                                                                                                              
map: { name: 'name' },                                                                                                                            
autokey: { from: 'name', path: 'key', unique: true },                                                                                             
});                                                                                                                                                   

Image.add({                                                                                                                                           
name: { type: String, required: true },                                                                                                           
publishedDate: { type: Date, default: Date.now },                                                                                                 
image: { type: Types.CloudinaryImage, autoCleanup: true, required: true, initial: false },                             
description: { type: Types.Textarea, height: 150 },                                                                                               
});                                                                                                                                                   

Image.relationship({ ref: 'Gallery', path: 'heroImage' });                                                                                            
Image.relationship({ ref: 'Gallery', path: 'images' });                                                                                               

Image.register();

路线:index.js

var keystone = require('keystone'),                                                                                                                   
Gallery = keystone.list('Gallery'),                                                                                                               
Image = keystone.list('Image');                                                                                                                   

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

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

    // locals.section is used to set the currently selected                                                                                       
    // item in the header navigation.                                                                                                             
    locals.section = 'home';                                                                                                                      
    locals.galleries = [];                                                                                                                        

    //Loading the galleries                                                                                                                       
    view.on('init', function(next){                                                                                                               

        var q = Gallery.model.find()                                                                                                              
           .populate('heroImage images')                                                                                                          
           .sort('sortOrder');                                                                                                                    

           q.exec(function(err, results) {                                                                                                        
               console.log(results);                                                                                                              
               locals.galleries = results;                                                                                                        
               next(err);                                                                                                                         
           });                                                                                                                                    
    });                                                                                                                                           


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

查看模板:index.jade

//Portfolio section                                                                                                                               
section.grid#portfolio                                                                                                                            
        if galleries.length                                                                                                                       
                each gallery in galleries                                                                                                         
                               if gallery.exists                                                                                                  
                                  figure.effect-portfolio.wow.fadeInDown(data-wow-duration="1500ms")                                              
                                         img(src=gallery._.heroImage.limit(680,680))                                                              

                                         each image in gallery.images                                                                             
                                          figcaption                                                                                              
                                           a(href=image.limit(1024,768), title=gallery.name, data-lightbox-gallery="gallery1", data-lightbox-hidpi=image.limit(300,300))                                                                                                                               
                                else                                                                                                              
                                  h4.text-muted There are no images to display                                                                    

        else                                                                                                                                      
                h4.text-muted There are no image galleries yet.

非常感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

尝试不同的选项后,我找到了一个有效的解决方案。它可能不是最好的,所以如果有人作为任何额外的评论,我会感激。

工作解决方案: 我只修改了jade模板来更改图像源URL。

//Portfolio section                                                                                                                               
section.grid#portfolio                                                                                                                            
        if galleries.length                                                                                                                       
                each gallery in galleries                                                                                                         

                                  figure.effect-portfolio.wow.fadeInDown(data-wow-duration="1500ms")                                              
                                         img(src="#{gallery.heroImage.image.secure_url}")                                                         

                                         each image in gallery.images                                                                             
                                          figcaption                                                                                              
                                           a(href="#{image.image.url}", title=gallery.name, data-lightbox-gallery=gallery.name, data-lightbox-hidpi="#{image.image.url}")                                                                                                                              

        else                                                                                                                                      
                h4.text-muted There are no image galleries yet.

请注意,保留“if gallery.exists”语句不起作用。我无法弄清楚为什么......

答案 1 :(得分:0)

您可以将cloudinary添加到您的项目中: var cloudinary = require('cloudinary');

然后获得安全的URL:

cloudinary.image("sample", {width: 150, height: 100, crop: "scale", secure: true})

结果将如下所示:

'<img src=\'https://res.cloudinary.com/<Your CLOUD NAME>/image/upload/c_scale,h_100,w_150/sample\' height=\'100\' width=\'150\'/>'

希望有帮助

相关问题