2016-08-18 64 views
1

我是新来Keystone.js和MongoDB /开发的NodeJS,但我已经爱上它。问题与描述显示画廊图像Keystone.js

我试图改变梯形默认库行为添加名称,自“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. 

非常感谢提前对你的帮助!

回答

1

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

工作解决方案: 我只修改了玉石模板来改变图像源的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”语句不起作用。我不明白为什么...