Fix floating images and add clearfix shortcode

exampleSite/content/docs/image-processing/index.md

@@ -97,19 +97,33 @@ For example: `![Center](/featured-sample.webp#center)`.
 
 ### Float Start
 
-![Float Start](/featured-sample.webp?height=120px#float-start)
+{{% clearfix %}}
+![Float Start](featured-sample.webp?height=120px#float-start) Adding the `#float-start` fragment for floating images to the start, we have to wrap it inside `clearfix` shortcode to avoid breaking the layout.
 
-Adding the `#float-start` fragment for floating images to the start.
+Please note that use `%%` instead of `<>` to render content as Markdown fully.
+{{% /clearfix %}}
 
-For example: `![Float Start](/featured-sample.webp#float-start)`.
+For example.
+
+````
+{{/% clearfix %/}}
+![Float Start](/featured-sample.webp#float-start) TEXTS AROUNDS THE IMAGE.
+{{/% /clearfix %/}}
+````
 
 ### Float End
 
-![Float End](/featured-sample.webp?height=120px#float-end)
+{{% clearfix %}}
+![Float End](/featured-sample.webp?height=120px#float-end) Similarly, we can also float images to the end by adding the `#float-end` fragment.
+{{% /clearfix %}}
 
-Similarly, we can also float images to the end by adding the `#float-end` fragment.
+For example.
 
-For example: `![Float End](/featured-sample.webp#float-end)`.
+````
+{{/% clearfix %/}}
+![Float End](/featured-sample.webp#float-end) TEXTS AROUNDS THE IMAGE.
+{{/% /clearfix %/}}
+````
 
 ## Caption
 

layouts/_default/_markup/render-image.html

@@ -1 +1,8 @@
-{{ partial "helpers/image" (dict "filename" .Destination "alt" .Text "title" .Title "class" "img-fluid" "resources" .Page.Resources "page" .Page) }}
+{{ partial "helpers/image" (dict
+  "filename" .Destination
+  "alt" .Text
+  "title" .Title
+  "class" "img-fluid"
+  "resources" .Page.Resources
+  "page" .Page)
+}}

layouts/partials/helpers/image.html

@@ -42,21 +42,18 @@
 {{- end -}}
 {{- $className := default "img-fluid" .class -}}
 {{- $posClassName := "" -}}
-{{- $clearfix := false -}}
 {{- if eq $url.Fragment "center" -}}
   {{- $posClassName = "mx-auto d-block" -}}
 {{- else if or (eq $url.Fragment "floatleft") (eq $url.Fragment "float-start") -}}
   {{- if eq $url.Fragment "floatleft" }}
     {{- warnf "The floatleft fragment is deprecated, will be removed in the future, please use float-start instead." }}
   {{- end }}
   {{- $posClassName = "float-start me-2" -}}
-  {{- $clearfix = true -}}
 {{- else if or (eq $url.Fragment "floatright") (eq $url.Fragment "float-end") -}}
   {{- if eq $url.Fragment "floatright" }}
     {{- warnf "The floatright fragment is deprecated, will be removed in the future, please use float-end instead." }}
   {{- end }}
   {{- $posClassName = "float-end ms-2" -}}
-  {{- $clearfix = true -}}
 {{- end -}}
 
 {{- if and $pageResource $resizable $img }}
@@ -125,9 +122,6 @@
 
 {{- $caption := and (default false .page.Site.Params.post.imageTitleAsCaption) .title }}
 
-{{- if $clearfix }}
-<div class="clearfix">
-{{- end }}
 {{- if $caption -}}
 {{- $className = printf "%s figure-img" $className -}}
 <figure class="figure{{ with $posClassName }} {{ . }}{{ end }}">
@@ -150,6 +144,3 @@
 <figcaption class="figure-caption">{{ .title }}</figcaption>
 </figure>
 {{- end }}
-{{- if $clearfix }}
-</div>
-{{- end -}}

layouts/shortcodes/clearfix.html

@@ -0,0 +1,3 @@
+<div class="clearfix mb-1">
+  {{ .Inner }}
+</div>