Add new image template & temp fix for OneDeploy Overview image

Signed-off-by: Pedro Ielpi <pielpi@opennebula.io>

Author: pedroielpi3

content/docs/quick_start/automatic_deployment_of_opennebula_with_one_deploy/one_deploy_overview.md

@@ -32,8 +32,12 @@ The basic procedure is as follows:
 
 Ansible is an agentless platform, and uses SSH as the default transport for deployment. The control node must be able to communicate with the managed nodes via SSH.
 
-![image](/images/one_deploy_basic_arch.png)
-<br/>
+<!-- ![image](/images/one_deploy_basic_arch.png&width=1612&height=718) -->
+
+{{< image path=/images/one_deploy_basic_arch.png width=720 height=446 >}}
+
+<!-- ![image](/images/one_deploy_basic_arch.png)
+<br/> -->
 
 It is worth noting that you can use the control node itself as a managed node. In the tutorials included in this documentation, the OpenNebula Front-end is installed on the Ansible control node, and the Hypervisors on the managed nodes.
 

layouts/shortcodes/image.html

@@ -0,0 +1,5 @@
+{{- with resources.Get (.Get "path") }}
+  {{- with .Process (printf "resize %dx wepb" ($.Get "width")) -}}
+    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $.Get "alt" }}">
+  {{- end }}
+{{- end -}}

layouts/shortcodes/imgproc.html

@@ -0,0 +1,27 @@
+{{ $original := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) -}}
+{{ $command := .Get 1 -}}
+{{ $options := .Get 2 -}}
+{{ if eq $command "Fit" -}}
+    {{ .Scratch.Set "image" ($original.Fit $options) -}}
+{{ else if eq $command "Resize" -}}
+    {{ .Scratch.Set "image" ($original.Resize $options) -}}
+{{ else if eq $command "Fill" -}}
+    {{ .Scratch.Set "image" ($original.Fill $options) -}}
+{{ else if eq $command "Crop" -}}
+    {{ .Scratch.Set "image" ($original.Crop $options) -}}
+{{ else -}}
+    {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Crop or Resize." -}}
+{{ end -}}
+{{ $image := .Scratch.Get "image" -}}
+
+<figure class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: {{ add $image.Width 10 -}}px">
+<img class="card-img-top" src="{{- $image.RelPermalink -}}" width="{{- $image.Width -}}" height="{{- $image.Height -}}">
+{{ with .Inner -}}
+<figcaption class="card-body px-0 pt-2 pb-0">
+<p class="card-text">
+{{/* Do **not** remove this comment! It ends above html block! See https://spec.commonmark.org/0.30/#html-blocks, 7. */}}
+{{ . }}{{ with $image.Params.byline }}<small class="text-body-secondary"><br/>{{ . }}</small>{{ end }}
+</p>
+</figcaption>
+{{ end -}}
+</figure>