Enhancement: Resize images to reasonable size when uploaded

[madmaze]

It would be great if images would automatically be resized to a reasonable size.

This would also greatly increase page load time with lots of large images.

[madmaze]

I've started implementing server-side down-sizing of images, at the moment I am just saving a duplicate image of a max size of 1024px wide. Ultimately it might be nice to do this client side, but that is not supported by all browsers

[ErisDS]

Apologies, I missed your original issue when you opened it. This is a pretty big area / feature and is going to require significant discussion and consideration. We do have guidelines on how to raise a feature request - I can't help but feel that what's here so far doesn't even start to cover it!

It's great that you're willing to work on the issue, but I think it would make more sense to define what's actually needed before doing a load of work?

[madmaze]

Agreed, I think there are a lot of things that would fall into the "image tools" category. Resizing, rotating, cropping and much more.

I started working on this issue because I ran into performance issues with many large images in a single post so I figured I may as well tackle that while I teach myself about node js and ghost.

I would be very interested in discussion around this topic.

[sebgie]

I would like to add a link to keep in mind when opening a new issue around image resizing. http://adaptive-images.com/ is a PHP library that serves different file sizes for different screen resolutions. If Ghost is going to resize images it should be done in the bestest way possible!

[ErisDS]

Having the ability to configure and provide different sized images is definitely something that we need to think about, along with properly handling orientation (see: https://github.com/TryGhost/Ghost/issues/1688).

These will be part of our overall offering for outputting images (see: https://github.com/TryGhost/Ghost/issues/128)

Offering a tool for editing images, i.e. allowing a user to resize, rotate or crop etc, is far beyond the remit of Ghost core and very much something which belongs in an app.

[ThisIsMissEm]

One thing that could be looked at is a plugin for a different upload backend.

For instance it could be one that stores images to S3, then generates a URL with sizing params. You could use something like globocom/thumbor to do the image resizing. You could also generate CDN urls instead of direct S3 ones, for improved network performance. Resizing could then be done client side, simply by changing URL parameters via javascript when you scale up the browser window.

Update You could also do server-side device detection to pre-load images of the correct size, but that'd be a little bit more complex to setup.

[ErisDS]

@miksago that is exactly the plan - we will encourage our users to use a 3rd party service for all of their media content, especially if they want advanced features.

[nwgat]

there is need for atleast a option to resize the image on the fly, atm i have to edit them in a desktop editor and then put them in blog..

would been nicer to have a option to choose from 3 different sizes and a custom one when done uploading, this is possible in other cms/blogs

something like this

[chasingmaxwell]

What about using imagemagick or graphicsmagick to handle image manipulation? There's a node wrapper here: https://github.com/aheckmann/gm

[ErisDS]

@chasingmaxwell That adds the requirement that everyone install one of those packages before running Ghost, which is unmanageable. Ghost runs everywhere. Imagemagick is not easy to install everywhere. We need a solution that either uses JavaScript, or if it uses native it would need to manage installing the binary cross-platform.

[Aaronm14]

Is it possible to change the file size on the client side when uploading the photo? A fellow in this Stack Overflow thread mentioned that you can leverage the HTML5 File API to maybe do something along those lines: http://stackoverflow.com/questions/24026320/node-js-image-resizing-without-imagemagick

[ErisDS]

The node module mentioned there also looks promising.

Unfortunately this is one of those areas which is genuinely hard / not-yet-solved in node. This is why this issue, and others like it are sitting in the 'Future' milestone.

There are so many features that are still missing from Ghost, that at present, it makes sense for us to let these difficult ones lie whilst we focus on the ones we can implement (like multi-user, the dashboard, and apps). Whilst we're working on those things, new projects like Iwip pop up, the File API becomes more widely supported, and the hope is that by the time we are able to turn our attentions to this, the problem will have become easier to solve.

That's obviously not a great long term strategy, but we need people to come along and make suggestions and have a go at implementing these solutions. Hell, we need more people working on the codebase full stop.

We are currently 100% focused on shipping Multi-User. Once that is done, we're going to relaunch our roadmap and review our priorities. If anyone feels like taking this and seeing where they can get, then I recommend also reading #1688 and #128.

[dts]

I'm just getting started with Ghost, but I'd like to share my thoughts:

• Not all blogs require heavy-handed image manipulation. This tells me that this functionality belongs in an app.
• However, details of the image display is the theme's job, so wherever the code is defined (app or core), themes need to be able to reference it in a reasonable way. (can themes have an app requirement? if not, then this probably belongs in the core)

Ideally, the theme can hear "display content X" (embedded video, image, etc), and then decide what size/etc to use. This is pretty easy with embedded things, and in principle is easy with photos because you can just set the width/height, but it would be ideal to pass as much metadata as possible to the underlying implementation so that GhostJS/ForthcomingImageResizerApp can intercept the request, and serve up a perfectly-sized image. Then themes can be as clever as they want with displaying images tailored for whatever device they are intended for.

It sounds like https://github.com/TryGhost/Ghost/issues/2852 may be related to me. For some of my rails projects I created https://github.com/dts/robotic_editor which takes input text, and reprocesses it to serve up reformatted images depending on the target platform. I'd love to be able to create such an app/template for my Ghost blogs.

[ErisDS]

I'm going to close this issue against #4453, which has been raised as the 'one true place' to have a big discussion about all our image processing needs in Ghost. Once we've got a clear idea of a potential solution we'll come back to these individual problems and resolve them.

[qiaoyan]

try https://zip30.com temporary