michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Move docs about image optimizations

Browse source
This commit is contained in:
James Dixon 2022-12-29 17:30:21 +00:00
parent b7d3363850
commit 0f6c312ac4
2 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
exampleSite/content/docs/advanced-customisation/index.md
View file

@ -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" }}
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ 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.

18
exampleSite/content/docs/partials/index.md
View file

@ -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" }}
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ 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.