Image gallery with caption using CloudinaryImage on keystonejs

Question

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.

I was also reading this: 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.

I'm studying the problem right now. Adding a description to the whole gallery is quite easy: all you have to do is to modify the gallery model in `models/Gallery.js` to add a field of type `Types.Textarea`, then change the gallery template to display the description and you're set. But adding a caption to *each* image is a much more complex task, as it would involve some kind of interface to add the description, then save the data to the database. — MaxArt, Dec 13 '14 at 11:03
what do you mean by 'caption'? some text on the webpage near the image that describes it? some alt text? some title text? a combination of these? — Harry Moreno, Dec 17 '14 at 21:38
I mean text related every single image. At the moment you can add a general field that describe the gallery but it is not possible to associate a description to the uploaded image. — Katie, Dec 18 '14 at 12:32

score 3 · Answer 1 · answered Dec 19 '14 at 20:22

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.

Hi, thanks for your reply. I have already used a similar solution, using Image and Gallery models for now. In the future it would be very nice to use Types.CloudinaryImages and can add directly a description for each images — Katie, Dec 22 '14 at 07:51
can you also teach us on where to build the views and routes to handle these @Codermonk — Chris Yeung, Feb 19 '15 at 17:06

Image gallery with caption using CloudinaryImage on keystonejs

1 Answers1

Linked