{"action":"created","issue":{"url":"https://api.github.com/repos/spf13/hugo/issues/1014","labels_url":"https://api.github.com/repos/spf13/hugo/issues/1014/labels{/name}","comments_url":"https://api.github.com/repos/spf13/hugo/issues/1014/comments","events_url":"https://api.github.com/repos/spf13/hugo/issues/1014/events","html_url":"https://github.com/spf13/hugo/issues/1014","id":65254220,"number":1014,"title":"Image Resizing and Cropping","user":{"login":"marcojakob","id":2089493,"avatar_url":"https://avatars.githubusercontent.com/u/2089493?v=3","gravatar_id":"","url":"https://api.github.com/users/marcojakob","html_url":"https://github.com/marcojakob","followers_url":"https://api.github.com/users/marcojakob/followers","following_url":"https://api.github.com/users/marcojakob/following{/other_user}","gists_url":"https://api.github.com/users/marcojakob/gists{/gist_id}","starred_url":"https://api.github.com/users/marcojakob/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marcojakob/subscriptions","organizations_url":"https://api.github.com/users/marcojakob/orgs","repos_url":"https://api.github.com/users/marcojakob/repos","events_url":"https://api.github.com/users/marcojakob/events{/privacy}","received_events_url":"https://api.github.com/users/marcojakob/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/spf13/hugo/labels/kind/enhancement","name":"kind/enhancement","color":"fbca04"},{"url":"https://api.github.com/repos/spf13/hugo/labels/status/please%20contribute","name":"status/please contribute","color":"B3E235"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-03-30T16:54:57Z","updated_at":"2015-12-03T21:08:15Z","closed_at":null,"body":"Dynamic image resizing is already on [Hugo's Roadmap](http://gohugo.io/meta/roadmap/) but I couldn't find an issue for it.\r\n\r\nThere is a [discussion in the Hugo forum](http://discuss.gohugo.io/t/dynamic-image-resizing-via-shortcodes-roadmap/857). Here are some aspects:\r\n\r\n\r\n#### How it could/should work\r\n\r\n1. An image file is put into either the `static` folder or in the `content` directory next to a page (needs issue #147 to be fixed).\r\n2. The final size of the image can be specified either in the content file (front-matter/markdown content) or in the template.\r\n3. Hugo automatically resizes and crops the image based on the specified size.\r\n\r\nWe would need to figure out a good place to put the resized images.\r\n\r\n\r\n### Possible Syntax\r\n\r\nSome ideas about the syntax:\r\n\r\n#### Syntax 1\r\n\r\n* Size: `image.s200.jpg` (200 is longest dimension)\r\n* Width: `image.w200.jpg`\r\n* Height: `image.h300.jpg`\r\n* Width and Height: `image.w200-h300.jpg`\r\n* Size with Cropping: `image.s200-c.jpg`\r\n* Width and Height with Cropping: `image.w200-h300-c.jpg`\r\n\r\n(this is somewhat similar to what Google App Engine implemented but did not document. I stumbled upon it by accident and added it in [this issue comment](https://code.google.com/p/googleappengine/issues/detail?id=4200#c18). You can play around with the example link to bananas...)\r\n\r\n\r\n#### Syntax 2\r\n\r\nSimilar as above but with query parameters: \r\n\r\n* `image.jpg?w=200&h=300&c=true`\r\n\r\n\r\n#### Syntax 3\r\n\r\nYet another option:\r\n\r\n* `image.jpg?w200-h300-c`\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/spf13/hugo/issues/comments/161784983","html_url":"https://github.com/spf13/hugo/issues/1014#issuecomment-161784983","issue_url":"https://api.github.com/repos/spf13/hugo/issues/1014","id":161784983,"user":{"login":"anthonyfok","id":1274764,"avatar_url":"https://avatars.githubusercontent.com/u/1274764?v=3","gravatar_id":"","url":"https://api.github.com/users/anthonyfok","html_url":"https://github.com/anthonyfok","followers_url":"https://api.github.com/users/anthonyfok/followers","following_url":"https://api.github.com/users/anthonyfok/following{/other_user}","gists_url":"https://api.github.com/users/anthonyfok/gists{/gist_id}","starred_url":"https://api.github.com/users/anthonyfok/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/anthonyfok/subscriptions","organizations_url":"https://api.github.com/users/anthonyfok/orgs","repos_url":"https://api.github.com/users/anthonyfok/repos","events_url":"https://api.github.com/users/anthonyfok/events{/privacy}","received_events_url":"https://api.github.com/users/anthonyfok/received_events","type":"User","site_admin":false},"created_at":"2015-12-03T21:08:14Z","updated_at":"2015-12-03T21:08:14Z","body":"Some possible solutions and related links for image resizing, in random order:\r\n\r\n* https://github.com/nfnt/resize\r\n* https://github.com/bamiaux/rez\r\n* https://github.com/DAddYE/vips\r\n    * http://www.vips.ecs.soton.ac.uk/index.php?title=VIPS\r\n    * On Debian/Ubuntu: `sudo apt-get install libvips-dev`\r\n* Calling vipsthumbnail directly (`sudo apt-get install libvips-tools`)\r\n* https://github.com/gographics/imagick\r\n* https://github.com/oysterbooks/halfshell\r\n* Speed test: https://github.com/fawick/speedtest-resize"}}