在 keystonejs 上使用 CloudinaryImage 带有标题的图片库答案

【问题标题】：Image gallery with caption using CloudinaryImage on keystonejs在 keystonejs 上使用 CloudinaryImage 带有标题的图片库
【发布时间】：2015-01-04 07:41:46
【问题描述】：

我正在使用 keystonejs 和 CloudinaryImages 创建一个图片库。

{ type: Types.CloudinaryImages }

我需要能够为图像添加标题。

我也在读这个： https://github.com/keystonejs/keystone/pull/604

但我不知道这个选项是否已经到位。

有什么想法吗？谢谢。

【问题讨论】：

我现在正在研究这个问题。为整个图库添加描述非常简单：您只需修改models/Gallery.js 中的图库模型以添加Types.Textarea 类型的字段，然后更改图库模板以显示描述即可.但是为每个图像添加标题是一项复杂得多的任务，因为它需要某种接口来添加描述，然后将数据保存到数据库中。
“标题”是什么意思？网页上描述它的图像附近的一些文字？一些替代文字？一些标题文字？这些的组合？
我的意思是与每张图片相关的文字。目前，您可以添加描述图库的常规字段，但无法将描述与上传的图像相关联。

标签： node.js cloudinary keystonejs

【解决方案1】：

我遇到了类似的问题，我希望能够为图像提供自己的描述和其他属性，同时还可以包含在带有图库描述的图库中。

这可能比你想要的更多，但这里是一个图像模型：

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

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

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

Image.add({
    name: { type: String, required: true },
    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();

包含这些图像的画廊看起来像这样：

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

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

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

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

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

您需要创建模板视图和路由来处理这个问题，但这并没有太多的工作 - 这些只是模型 - 如果您希望我发布我正在使用的路由，请告诉我，我将 Handlebars 用于我的视图，因此可能没有那么有用。

【讨论】：

您好，感谢您的回复。我已经使用过类似的解决方案，现在使用图像和图库模型。将来使用 Types.CloudinaryImages 会非常好，可以直接为每张图片添加描述
你能教我们在哪里构建视图和路由来处理这些@Codermonk
我应该如何处理路线？ @凯蒂