kova/hugo-profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move dynamic-img example to rich content page

Browse Source
This commit is contained in:
Artis3n
2022-12-09 16:26:22 -05:00
parent c68ff46e73
commit 6da06e4755
3 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -16,4 +16,4 @@ hugo.darwin
hugo.linux
# Temporary lock file while building
/.hugo_build.lock
.hugo_build.lock
exampleSite/content/blogs/rich-content.md
+22
View File
@@ -51,3 +51,25 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
<br>
{{< youtube w7Ft2ymGmfc >}}
<br>
## Theme Custom Shortcodes
These shortcodes are not Hugo built-ins, but are provided by the theme.
### Responsive Images with Cloudinary
You can learn more about this [here](https://cloudinary.com/documentation/responsive_images).
Set the `cloudinary_cloud_name` parameter in your site config to use this shortcode.
```
{{</* dynamic-img src="/my/image/on/cloudinary" title="A title for the image" */>}}
```
Note that you do not include the file extension (e.g. `.png`) in the `src` parameter, as the shortcode will automatically determine the best quality and format for the user's device.
Optionally, you can customize the general CSS styles for the image:
```
{{</* dynamic-img src="/my/image/on/cloudinary.webp" title="A title for the image" style="max-width:60%" */>}}
```
layouts/shortcodes/dynamic-img.html
+1 -8
View File
@@ -1,12 +1,5 @@
<!--
Use as follows:
{{< dynamic-img src="/my/image/on/cloudinary.webp" title="A title for the image" >}}
Optionally, you can customize the width or other general styles for the image:
{{< dynamic-img src="/my/image/on/cloudinary.webp" title="A title for the image" width="w_auto" style="max-width:90%" >}}
-->
{{ $image := .Get "src" }}
{{ $alt := .Get "title" }}
{{ $width := .Get "width" | default "w_auto" }}
{{ $style := .Get "style" | default "max-width:80%" }}
<img alt="{{ $alt }}" title="{{ $alt }}" data-src="https://res.cloudinary.com/{{ $.Site.Params.cloudinary_cloud_name }}/{{ $width }},c_scale,f_auto,q_auto,dpr_auto{{ $image}}" class="cld-responsive" style="padding-bottom: 16px; {{ $style }}">
<img alt="{{ $alt }}" title="{{ $alt }}" data-src="https://res.cloudinary.com/{{ $.Site.Params.cloudinary_cloud_name }}/{{ $width }},c_scale,f_auto,q_auto,dpr_auto{{ $image}}" class="cld-responsive" style="padding-bottom: 16px; display: block; margin: auto; {{ $style }}">