| title | linkTitle | description | nav_weight | nav_icon | date | categories | tags | authors | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Image Types |
Image Types |
List of supported image types. |
3 |
|
2023-03-24 06:27:36 +0800 |
|
|
|
The images located in the assets directory.
{ .lead }
To use the site image resources, you'll need to put a leading slash (/) into the URL's path.
{{< page-resource-content "data/site-resources-examples" >}}
The images located in the page's directory. { .lead }
You'll need to organize pages as page bundles, for example.
{{< page-resource-content "data/page-bundle-structure" >}}
The content structure above includes one page (blog/hello) that contains two image resources: foo.png and bar.png.
Then you can render the images in the page content file (blog/hello/index.md).
{{< page-resource-content "data/page-resources-examples" >}}
The images located in the static folder.
{ .lead }
{{< page-resource-content "data/public-images-examples" >}}
{{< page-resource-content "data/external-images-examples" >}}
Most of the processing methods work only on site image resources and page image resources, except of alignment and resizing. Moreover, the resizing is implemented by inline styles for public images and external images.
The good news is that Hugo allows mounting the static/* folder, to make them to be site resources, then you can process those images via any methods.
{{< page-resource-content "data/mounts" >}}
The configuration example above mounts the static/uploads on assets/uploads, then you're able to use the images as we did for the site images resources.
