diff --git a/config.toml b/config.toml index a983dd46d..723fe3d22 100644 --- a/config.toml +++ b/config.toml @@ -98,7 +98,8 @@ twitter = "GoHugoIO" ## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday [blackfriday] plainIDAnchors = true - hrefTargetBlank = true + # See https://github.com/gohugoio/hugo/issues/2424 + hrefTargetBlank = false angledQuotes = false latexDashes = true diff --git a/content/content-management/image-processing.md b/content/content-management/image-processing/index.md similarity index 65% rename from content/content-management/image-processing.md rename to content/content-management/image-processing/index.md index 0270ee8e1..0bb32e6ec 100644 --- a/content/content-management/image-processing.md +++ b/content/content-management/image-processing/index.md @@ -1,11 +1,11 @@ --- title: "Image Processing" -description: "For images part of a page resources or bundle, Hugo allow image processing" +description: "Image Page resources can be resized and cropped." date: 2018-01-24T13:10:00-05:00 lastmod: 2018-01-26T15:59:07-05:00 linktitle: "Image Processing" categories: ["content management"] -keywords: [bundle,content,resources] +keywords: [bundle,content,resources,images] weight: 4004 draft: false toc: true @@ -15,9 +15,24 @@ menu: weight: 32 --- -## Methods +## The Image Page Resource -The `image` resource implements the methods `Resize`, `Fit` and `Fill`, each returning the transformed image using the specified dimensions and processing options. They take one parameter. +The `image` is a [Page Resource]({{< relref "content-management/page-resources" >}}), and the processing methods listed below does not work on images inside your `/static` folder. + + +To get all images in a [Page Bundle]({{< relref "content-management/organization#page-bundles" >}}): + + +```html +{{ with .Resources.ByType "image" }} +{{ end }} + +``` + +## Image Processing Methods + + +The `image` resource implements the methods `Resize`, `Fit` and `Fill`, each returning the transformed image using the specified dimensions and processing options. Resize : Resizes the image to the specified width and height. @@ -53,7 +68,7 @@ Image operations in Hugo currently **do not preserve EXIF data** as this is not {{% /note %}} -## Options +## Image Processing Options In addition to the dimensions (e.g. `600x400`), Hugo supports a set of additional image options. @@ -82,9 +97,41 @@ Valid are `Center`, `TopLeft`, `Top`, `TopRight`, `Left`, `Right`, `BottomLeft`, Resample Filter : Filter used in resizing. Default is `Box`, a simple and fast resampling filter appropriate for downscaling. -Among them: `Box`, `NearestNeighbor`, `Linear`, `Gaussian`. + +Examples are: `Box`, `NearestNeighbor`, `Linear`, `Gaussian`. + See https://github.com/disintegration/imaging for more. If you want to trade quality for faster processing, this may be a option to test. ```go {{ $image.Resize "600x400 Gaussian" }} -``` \ No newline at end of file +``` + +### Image Processing Examples + +_The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pedersen](https://commons.wikimedia.org/wiki/User:Bep) (Creative Commons Attribution-Share Alike 4.0 International license)_ + + +{{< imgproc sunset Resize "300x" >}} + +{{< imgproc sunset Fill "90x120 left" >}} + +{{< imgproc sunset Fill "90x120 right" >}} + +{{< imgproc sunset Fit "90x90" >}} + +{{< imgproc sunset Resize "300x q10" >}} + + +This is the shortcode used in the examples above: + + +{{< code file="layouts/shortcodes/imgproc.html" >}} +{{< readfile file="layouts/shortcodes/imgproc.html" >}} +{{< /code >}} + +And it is used like this: + +```html +{{}} +``` + diff --git a/content/content-management/image-processing/sunset.jpg b/content/content-management/image-processing/sunset.jpg new file mode 100644 index 000000000..7d7307bed Binary files /dev/null and b/content/content-management/image-processing/sunset.jpg differ diff --git a/content/content-management/organization.md b/content/content-management/organization.md index 7e4e429e2..a5ec10abb 100644 --- a/content/content-management/organization.md +++ b/content/content-management/organization.md @@ -19,7 +19,7 @@ toc: true {{< youtube 0GZxidrlaRM >}} -## Content Bundles and Image Processing +## Page Bundles See [This Page](/about/new-in-032/). We will get the relevant parts of the rest of the Hugo docs updated. Eventually. diff --git a/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg new file mode 100644 index 000000000..8736f0376 Binary files /dev/null and b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q10_box_center.jpg differ diff --git a/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg new file mode 100644 index 000000000..47d62fce7 Binary files /dev/null and b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_300x0_resize_q75_box_center.jpg differ diff --git a/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x120_fill_q75_box_left.jpg b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x120_fill_q75_box_left.jpg new file mode 100644 index 000000000..f9e218242 Binary files /dev/null and b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x120_fill_q75_box_left.jpg differ diff --git a/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x120_fill_q75_box_right.jpg b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x120_fill_q75_box_right.jpg new file mode 100644 index 000000000..fb96b61b6 Binary files /dev/null and b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x120_fill_q75_box_right.jpg differ diff --git a/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg new file mode 100644 index 000000000..b8ad2659f Binary files /dev/null and b/resources/_gen/images/content-management/image-processing/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_90x90_fit_q75_box_center.jpg differ