From 694c0fd7630ebfb87f1afff712830e96266ed761 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?= Date: Mon, 5 Feb 2018 15:04:07 +0100 Subject: [PATCH] docs: Add documentation for smart cropping etc. --- .../image-processing/index.md | 56 +++++++++++++++++- ...03d34e039f_90587_300x0_resize_q10_box.jpg} | Bin ...03d34e039f_90587_300x0_resize_q75_box.jpg} | Bin ...b1403d34e039f_90587_90x90_fit_q75_box.jpg} | Bin ...039f_90587_200x200_fill_q75_box_smart1.jpg | Bin 0 -> 3583 bytes ...03d34e039f_90587_300x0_resize_q10_box.jpg} | Bin ...03d34e039f_90587_300x0_resize_q75_box.jpg} | Bin ...b1403d34e039f_90587_90x90_fit_q75_box.jpg} | Bin ...2acaa20f204198_63640_300x0_resize_box.png} | Bin ...5f4f5baccdcad4_70230_480x0_resize_box.png} | Bin ...3849a78eea35dd_78317_480x0_resize_box.png} | Bin ...e02851ebf2f82e_88519_480x0_resize_box.png} | Bin 12 files changed, 55 insertions(+), 1 deletion(-) rename docs/resources/_gen/images/about/new-in-032/{sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg => sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box.jpg} (100%) rename docs/resources/_gen/images/about/new-in-032/{sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg => sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box.jpg} (100%) rename docs/resources/_gen/images/about/new-in-032/{sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg => sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box.jpg} (100%) create mode 100644 docs/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_200x200_fill_q75_box_smart1.jpg rename docs/resources/_gen/images/content-management/image-processing/{sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg => sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box.jpg} (100%) rename docs/resources/_gen/images/content-management/image-processing/{sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg => sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box.jpg} (100%) rename docs/resources/_gen/images/content-management/image-processing/{sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg => sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box.jpg} (100%) rename docs/resources/_gen/images/content-management/organization/{1-featured-content-bundles_hu3e3ae7839b071119f32acaa20f204198_63640_300x0_resize_box_center.png => 1-featured-content-bundles_hu3e3ae7839b071119f32acaa20f204198_63640_300x0_resize_box.png} (100%) rename docs/resources/_gen/images/news/0.33-relnotes/{featured-hugo-33-poster_hu45ce9da1cdea6ca61c5f4f5baccdcad4_70230_480x0_resize_box_center.png => featured-hugo-33-poster_hu45ce9da1cdea6ca61c5f4f5baccdcad4_70230_480x0_resize_box.png} (100%) rename docs/resources/_gen/images/news/0.34-relnotes/{0.34-relnotes/featured-34-poster_hud8d73dc5df8d5a35383849a78eea35dd_78317_480x0_resize_box_center.png => featured-34-poster_hud8d73dc5df8d5a35383849a78eea35dd_78317_480x0_resize_box.png} (100%) rename docs/resources/_gen/images/news/0.35-relnotes/{featured-hugo-35-poster_hua42b1310dd72f60a34e02851ebf2f82e_88519_480x0_resize_box_center.png => featured-hugo-35-poster_hua42b1310dd72f60a34e02851ebf2f82e_88519_480x0_resize_box.png} (100%) diff --git a/docs/content/content-management/image-processing/index.md b/docs/content/content-management/image-processing/index.md index ba08b1d80..1f84ba04d 100644 --- a/docs/content/content-management/image-processing/index.md +++ b/docs/content/content-management/image-processing/index.md @@ -138,4 +138,58 @@ And it is used like this: {{% note %}} **Tip:** Note the self-closing shortcode syntax above. The `imgproc` shortcode can be called both with and without **inner content**. -{{% /note %}} \ No newline at end of file +{{% /note %}} + +## Image Processing Config + +You can configure an `imaging` section in `config.toml` with default image processing options: + +```toml +[imaging] +# Default resample filter used for resizing. Default is Box, +# a simple and fast averaging filter appropriate for downscaling. +# See https://github.com/disintegration/imaging +resampleFilter = "box" + +# Defatult JPEG quality setting. Default is 75. +quality = 75 + +# Anchor used when cropping pictures. +# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop +# Smart Cropping is content aware and tries to find the best crop for each image. +# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight +anchor = "smart" + +``` + +All of the above settings can also be set per image procecssing. + +## Smart Cropping of Images + +By default, Hugo will use the [Smartcrop](https://github.com/muesli/smartcrop), a library created by [muesli](https://github.com/muesli), when cropping images with `.Fill`. You can set the anchor point manually, but in most cases the smart option will make a good choice. And we will work with the libray author to improve this in the future. + +An example using the sunset image from above: + + +{{< imgproc sunset Fill "200x200 smart" />}} + + +## Image Processing Performance Consideration + +Processed images are stored below `/resources` (can be set with `resourceDir` config setting). This folder is deliberately placed in the project, as it is recommended to check these into source control as part of the project. These images are not "Hugo fast" to generate, but once generated they can be reused. + +If you change your image settings (e.g. size), remove or rename images etc., you will end up with unused images taking up space and cluttering your project. + +To clean up, run: + +```bash +hugo --gc +``` + + +{{% note %}} +**GC** is short for **Garbage Collection**. +{{% /note %}} + + + diff --git a/docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg b/docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box.jpg similarity index 100% rename from docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg rename to docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box.jpg diff --git a/docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg b/docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box.jpg similarity index 100% rename from docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg rename to docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box.jpg diff --git a/docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg b/docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box.jpg similarity index 100% rename from docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg rename to docs/resources/_gen/images/about/new-in-032/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box.jpg diff --git a/docs/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_200x200_fill_q75_box_smart1.jpg b/docs/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_200x200_fill_q75_box_smart1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1ef91ac528b5c6166a0229ca83392aca26c908f0 GIT binary patch literal 3583 zcmbV~c{r5q+sE(OFqRk%*~VI!Aq-RYPzgg5GlOW9HA^ac2^qUI1{sg#(Nwm{h{}@f zv1E^^29?NT2@%O!wD^su-|-yppYQvg$8lfB_qfmNy6*4id)_;5cSeDDfRBfVmj}kj z%gYOg^YIHJg#-lz1SLiH3L{ZcaPj*)s=8=(Ei4X)lT*<**3&l9 z(7|bg;BdI0fS`nskc75^jDq(6xprCs1Ru}?^guw002l#+AV51EpaK8@!9f2M@ZSP~ zAy60(FCUy=Km-7TAP_JV0)s)J+?`R}9sotaL=~`RJbUfjcohSY+A$gT_>_)5ekw+M z^<}?~dr&N#Uwog0q|^ar6;(6_cj&OLp1#4cQO1_bDE0dA+M|MtbUO{0|aS7{wDZ8?&y5>o3U427adq-zich9q4 z&fw7S>o;#l-c3$Tf0&t_`#8U_vbwguvHA7e);0)${Kny~zk&V-4}!}BhC(4w-d!FL z_zL%dAfPY>ERU#}9j{y9UPbK~KIGAidyk*Om2`+-#N2~k@r&=rO&(a;Mf!*6e+Lx% z|04Pq=wF_lcYq)S#2pv}0hj=5O^kb(07j!)u(l9aMKSKFf<+jOzlG30qEQvxl5IUR zoXX&;+H8w#hcLTJs#eerc3CCDO}3xkv8!>Uoh18icZca0O;s*;KWlVZtF(NEDaJiRViCfNkUODG8a z6cdQjvoICgBqlGk(({$>@{gh;8>(hF$sd1P_^ZLF0VtdKZa4GYzC|Ou@2mj~mP_U>U0TL%RYv4eu4SGheRI3w*H z_u#JcCDVORew*3NU?NM8&Nu)Z6=fVCD6zQT1sId4->P;ujtsdPJ#!oWHiLiQx5yx} zg+=y~LkGFp9*o}Nh7;VoS=hT-FhRs}!b7k07Oj?2y!LXPIMT?2`)UANEJ@HlveO0| zVGDzZX>~h3KRYaW^Bq++XTI6R1sg#Ozdl3}*p0%KF~O+N7GZqJ(!vMeH53utXh_NP zQwADPut5Nwg&6Dzq3}UNCQ+y11jMTV?r69YF&H00QFmCKk8G$^Dqj6qC$^he&CIJA zPF*kaT#ZVWqhJWrWuE|&7BYx(!IEsw4pG$YutOJ7=ddIxjE1I@B2QZcx6m>@gXDighOQTmqTx~ZiZ!c-?-trkv`1N7WV&z^9L$OHi zZ&c1GVH8Zd=hAat4Y#ATiq#TQPNI&#`ffjqPrXHVeQeo%a>OAQ-KaV%AP7H2Eo0XkmV2(HV3Y*Y~K;+#VvT+Q0M(aj`I8-|{fgzf2l^m^de=Kq=W@PtGNwVdeP|x?f`3gKcVqE4fO zr)tzjGWg~vF{bEN;%4EdryH89t0&MAuA9fX8a+Xx7B3|&CPGJ-BcINb{2Rv$0FbPDa}*j-FH_A#4=0Ut4ShiPlJp8SxqVfX;<(z)fRwS8_Q@Y)gd0c&Cudx9EQ`U@*a?9(|m3d*OGjvJ|wIH5mhAIbPQO_m#HMf(XmuT55r zghw>LIlTPY|3ft1cSY51x?^Rh3xQDk58j45 z!1l2EwWeI#=o%645-+()C!>mc?B|c(U%H|ezDzpsI^vCxa;>+2W6`jZtzj;2NfgHV zvdAa}s^w=_ADHDbA!;0O;)1?cXyVFS$6;oiU}JK*#EHPO7lm(32_+1buNsE;IZUj) ze-O0gO`_IT#hMtoKVmw$9Heg@U)wbx4PdwOo4QpEebs zrfawI7cA%YiTC02b&k-WMGNgWE|*#FFApWZx?ePw_qZ`AY_8msLV>B|&0YFok4TH~ zO9w4s*2siDtiw-$t#LVx{q{Y$*{$7*e}Cj?wD!is*u ziT-=V#jclgCV#cRFbdJxG4LF;WpUQRSw%?Z&+W|Cev202B)6EJWxQAsBnTAurZ{45 z077L;Zg0;Pn$`C~(lH$=mCBsAU++If0BkdrdgPv|t?L(5HDlhO7EYnKogR|9b6!grJp9&*mZN^q?8t#JQ5i`;=D?t$I7 z716J=d0!@jSZi!~TKy&AX{&_IAM^0mQ5x}ljCh8lPw?&T^`i4Z-xivyAIb|Pbom|7 zlRo_m2Rzi!Tl8%?d}P`AX#3rt<{Fzo$PXXT_uQ8X#=Q7ToHM*COtv4>B9-lS^y6($fzpo7}6CT4_m zjFuYhXRvu&JM?4I1|0zpW(&^9Tur&&x^LF+G$U$W8nRJf`I1() zcLOJwbZ=rXUFL(74dNY5Bq#_C>%RTGTO~y|-4yv?53dZ_KkB~pfwlUsao@-`gCQmA zNjYctx=N95#X{EJyo+FdV(@3*E?t!EFLIfHuK#r$Us|!|*^yFlWmEvn2#(Ey3O{sq zHLDvOUTc@VjX78KnDRtt(YM*sF7sPhvD=s%1}?wqqnVLnRC}r87xH}~6*c>0jC4iD zJvB+MQ-RoI4p@HYgXz?5AkianjZm`d#Cp+PcxT_2qM-=0{h24X2m8