在keystonejs上使用CloudinaryImage的带有标题的图片库 [英] Image gallery with caption using CloudinaryImage on keystonejs

查看:78
本文介绍了在keystonejs上使用CloudinaryImage的带有标题的图片库的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用keystonejs和CloudinaryImages创建图像库。

I'm using keystonejs and CloudinaryImages to create an Image Gallery.

{ type: Types.CloudinaryImages }

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

I need the ability to add a caption to the images.

我也在阅读:
https://github.com/keystonejs/keystone/pull/604

,但我不知道该选项是否已经到位。

but I could not figure out if this option is already in place or not.

有什么想法吗?
谢谢。

Any idea? Thanks.

推荐答案

我遇到了类似的问题,我希望能够为Images提供自己的描述和其他信息属性,同时也包含在带有库说明的库中。

I had a similar problem, I wanted to be able to give Images there own descriptions and other attributes, while also being included in a Gallery with a Gallery description.

这可能比您想要的要多,但这是一个图像模型:

This may be more than you are looking for but here is a Image model:

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();

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

And the Galleries that contain these images looks like this:

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();

您将需要创建模板视图和路径来处理此问题,但这并不需要太多工作-这些只是模型-让我知道您是否要发布我为此使用的路线,我正在使用车把作为视图,所以可能没有帮助。

You will need to create Template Views and Routes to Handle this, but it isn't too much more work - these are just the Models - let me know if you would like me to post the routes I am using for this, I am using Handlebars for my views so that may not be as helpful.

这篇关于在keystonejs上使用CloudinaryImage的带有标题的图片库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆