Keystone-classic: How to embed local file images to a blog post model

[jacargentina]

I've searched for an example, but every of those just have 1 image using _CloudinaryImage_

What i wanted is to have a Blog model with its Html field, but attach some "Local" images to it, and be able to embed those on the html body

Any advice is welcome!

[jeffreypriebe]

There isn't a great option, but there is a basic one. No upload, simply linking an existing image that is on the web somewhere.

The basic option is adding the TinyMCE images plugin . That will get you something like this:

In your keystone.js:

keystone.init({
...
  'wysiwyg additional plugins': 'images',
  'wysiwyg additional buttons': 'images',
...
});

(If you already have plugins or buttons, that should be a comma-delimited string, e.g. 'first-plugin, images'. See docs.)
_{(Dimensions won't truly resize the image for you, but just input those dimensions to the image tag that it inserts. However dimensions do get auto-populated by the size of the image.)}

[jeffreypriebe]

There are several efforts to provide more file upload options. None have been completely folded into Keystone yet. Most require various levels of core integration and need core code shuffled.

• Uploadcare Images PR
• StorageAPI
• Massive, Official File fields

[jacargentina]

Yeah, i think may be i should wait for those efforts to be merged. Or stick to a "own served image" somehow with the "images" plugin you first mentioned.

[jacargentina]

@jeffreypriebe I've thought of writing some plugin for tinymce to serve image ulrs from my own keystonejs server... but...

http://www.tinymce.com/wiki.php/Plugin:image

It seems it is already there? I mean, i can use the image_list option

http://www.tinymce.com/wiki.php/Configuration:image_list, under _Example of JSON url with images_
i read it would be easy to provide an endpoint from keystonejs itself, to return a list from a given directory for example?

[jeffreypriebe]

That image-list is interesting. I don't see anything in the source that would suggest that it would work but the idea of passing it a script/url that provides images to pick from is enticing.
Is there a demo of that behavior somewhere?

[jacargentina]

No demo. Just you have to configure keysonejs like this:

keystone.init({
 ...
  'wysiwyg additional plugins': 'image',
  'wysiwyg additional buttons': 'image',
  'wysiwyg additional options': {
    'image_list' : '/images',
  }
 ...
});

And then implement the /images endpoint like this (in routes/index.js)

// Bind Routes
exports = module.exports = function(app) {
  ....
 app.get('/images', function(req, res, next) {
     // Just an example. Ideally an array would be fetched from disk, database, etc
     res.json([
             {title: 'Dog', value: 'mydog.jpg'},
             {title: 'Cat', value: 'mycat.gif'}
        ]);
 });

  ....
}

[jacargentina]

Anyway, i've come to a simple implementation, by using available things like data uri for images https://en.wikipedia.org/wiki/Data_URI_scheme and TinyMCE support for drag/drop or paste images.

So i dont need to save the images on its own files; also, a blog post is somehow like a unit (text + embeded images), somebody can point me disavantages/cons of this model, but i prefer looking at advantages/pros; and also it's VERY easy to forget the problem, and start USING it!

I've simply done this:

Enable pasted images as data-uris on TinyMCE (disabled by default)

keystone.init({
 ...
  'wysiwyg additional plugins': 'paste',
  'wysiwyg additional options': {
    'paste_data_images': true
  }
 ...
});

[jeffreypriebe]

So the image selected gets inserted in the content directly as the data/base64. From the last keystone init code, seems like that behavior is a TinyMCE option.
It would be good to document this as it is another reasonable interim solution (beats the imageupload IMO, and only lacks the upload ability of cloudinary images).

I can't think of any good arguments against the insertion of image data directly.
One might argue image cache reuse (if pointing at an external image, a browser can cache across multiple pages) but that seems unlikely for most images that someone would put into content.

On the plus side, it has a strong performance point of saving another HTTP request (Yahoo! goes as far as _recommending_ inline images with data:URL use for exactly this reason.)

Feels like a clever judo solution. Nicely done.

[jacargentina]

Nice... Yahoo supporting... me! ;)
Hope this serves to somebody using keystone too.

[tobeatiger]

Hi @jacargentina
Just have the same issue and tried your solution, it works great for small images, but if you paste/drag a big image (say more than 1M), the whole content will broken after successfully saved. Not sure it's the limitation of mongoDB or the TinyMCE. Did you have the same issue?

[jacargentina]

@tobeatiger never. Maybe i've not used anything so big yet.