You can see some additional Chart.js examples on the charts samples page.
Blowfish includes a figure shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
The figure shortcode accepts six parameters:
| Parameter | Description |
|---|---|
src | Required. The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a page resource bundled with the page; then an asset in the assets/ directory; then finally, a static image in the static/ directory. |
alt | Alternative text description for the image. |
caption | Markdown for the image caption, which will be displayed below the image. |
class | Additional CSS classes to apply to the image. |
href | URL that the image should be linked to. |
default | Special parameter to revert to default Hugo figure behaviour. Simply provide default=true and then use normal Hugo shortcode syntax. |
Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+You can see some additional Chart.js examples on the charts samples page.
Blowfish includes a figure shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
The figure shortcode accepts six parameters:
| Parameter | Description |
|---|---|
src | Required. The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a page resource bundled with the page; then an asset in the assets/ directory; then finally, a static image in the static/ directory. |
alt | Alternative text description for the image. |
caption | Markdown for the image caption, which will be displayed below the image. |
class | Additional CSS classes to apply to the image. |
href | URL that the image should be linked to. |
default | Special parameter to revert to default Hugo figure behaviour. Simply provide default=true and then use normal Hugo shortcode syntax. |
Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
Example:
{{< figure
src="abstract.jpg"
alt="Abstract purple artwork"
diff --git a/docs/samples/charts/index.html b/docs/samples/charts/index.html
index 58b14af4..038b6155 100644
--- a/docs/samples/charts/index.html
+++ b/docs/samples/charts/index.html
@@ -22,10 +22,10 @@
0 likes
·
Blowfish includes support for Chart.js using the chart shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured colorScheme parameter, however the colours can be customised using normal Chart.js syntax.
Refer to the chart shortcode docs for more details.
The examples below are a small selection taken from the official Chart.js docs. You can also view the page source on GitHub to see the markup.