在 Keystone.js 中显示带有描述的图库图片时出现问题
Issue displaying gallery images with description in Keystone.js
我是 Keystone.js 和 Mongodb/nodejs 开发的新手，但我已经喜欢上了它。
我正在尝试更改 Keystone 中的默认画廊行为，以便为画廊中的每个图像添加名称和描述，因为 "Types.CloudinaryImages" 似乎不允许这样做。
正如在 Image gallery with caption using CloudinaryImage on keystonejs 上发现的那样，我添加了一个新的 "Image" 模型并修改了主页的路径（画廊应该显示的位置）。
检查控制台日志时，查询确实检索了图库并将 link 填充到图像，但我的代码显示它们时出现了问题。
图库模型
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.
非常感谢您的帮助！
在尝试了不同的选项后，我找到了一个可行的解决方案。它可能不是最好的，所以如果有人能提出任何补充意见，我将不胜感激。
工作解决方案：
我只修改了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" 语句无效。我不明白为什么...
您可以将 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\'/>'
希望对您有所帮助
我是 Keystone.js 和 Mongodb/nodejs 开发的新手，但我已经喜欢上了它。
我正在尝试更改 Keystone 中的默认画廊行为，以便为画廊中的每个图像添加名称和描述，因为 "Types.CloudinaryImages" 似乎不允许这样做。 正如在 Image gallery with caption using CloudinaryImage on keystonejs 上发现的那样，我添加了一个新的 "Image" 模型并修改了主页的路径（画廊应该显示的位置）。
检查控制台日志时，查询确实检索了图库并将 link 填充到图像，但我的代码显示它们时出现了问题。
图库模型
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.
非常感谢您的帮助！
在尝试了不同的选项后，我找到了一个可行的解决方案。它可能不是最好的，所以如果有人能提出任何补充意见，我将不胜感激。
工作解决方案： 我只修改了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" 语句无效。我不明白为什么...
您可以将 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\'/>'
希望对您有所帮助