From 0f6c312ac4479107a32974d615df2c16ceff86ec Mon Sep 17 00:00:00 2001 From: James Dixon Date: Thu, 29 Dec 2022 17:30:21 +0000 Subject: [PATCH] Move docs about image optimizations --- .../docs/advanced-customisation/index.md | 22 ++++++++++++++++--- exampleSite/content/docs/partials/index.md | 18 --------------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/exampleSite/content/docs/advanced-customisation/index.md b/exampleSite/content/docs/advanced-customisation/index.md index 3e778c55..4f21d86a 100644 --- a/exampleSite/content/docs/advanced-customisation/index.md +++ b/exampleSite/content/docs/advanced-customisation/index.md @@ -31,6 +31,24 @@ For example, if you wanted to override the main article template in Blowfish, yo As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes. +## Change image optimization settings + +Hugo has various builtin methods to resize, crop and optimize images. + +As an example - in `layouts/partials/article-link-card.html`, you have the following code: + +```go +{{ with .Fill "600x600" }} +
+{{ end }} +``` + +The default behavior of Hugo here is to use Smartcrop to dynamically set the anchor point (crop placement) on the image and resize it to fill 600x600px. + +It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself. + +See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info. + ## Colour schemes Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes. @@ -59,7 +77,7 @@ The `custom.css` file will be minified by Hugo and loaded automatically after al ### Using additional fonts -Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder withing the `static` root folder. +Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder withing the `static` root folder. ```shell . @@ -86,8 +104,6 @@ html { } ``` - - ### Adjusting the font size Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to `12pt`, but it can be changed to whatever value you prefer. diff --git a/exampleSite/content/docs/partials/index.md b/exampleSite/content/docs/partials/index.md index 7f9b0593..f129028a 100644 --- a/exampleSite/content/docs/partials/index.md +++ b/exampleSite/content/docs/partials/index.md @@ -87,24 +87,6 @@ Custom icons can be added by providing your own icon assets in the `assets/icons Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}). -## Image Optimization - -Hugo has various builtin methods to resize, crop and optimize images. - -For example - in `layouts/partials/article-link-card.html`, you have the following code: - -```go -{{ with .Fill "600x600" }} -
-{{ end }} -``` - -The default behaviour of Hugo here is to use Smartcrop to dynamically set the anchor point on the image in reference and resize it to fill 600x600px. - -It is worth noting here that image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well. - -See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info. - ## Extensions Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.