Resize an image with markdown

support
8

Have now switched to the GitHub - kakawait/hugo-tranquilpeak-theme: A gorgeous responsive theme for Hugo blog framework , and there is no provision for resizing images.

Have been reading up at Image Processing | Hugo , and I assume that is all by the use of shortcodes , rather than by directly in the MD file - Markdown Render Hooks | Hugo , which seems a lot easier.

In regards to that example at layouts/_default/_markup/render-image.html

<p class="md__image">
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>

I don’t understand how the MD code uses the template to then create the static HTML ? Can someone enlighten me please. :slight_smile:

Also, whilst there is a file called …/hugo-tranquilpeak-theme-master/layouts/shortcodes/image.html

{{ $.Scratch.Set "i-classes" (split (.Get "classes") " ") }}
{{ if in ($.Scratch.Get "i-classes") "clear" }} 
  {{ $.Scratch.Set "i-clear" 1 }}
  {{ $classes := $.Scratch.Get "i-classes" }}
  {{ $.Scratch.Set "i-classes" (slice) }}
  {{ range $classes }}
    {{ if ne . "clear" }}
      {{ $.Scratch.Add "i-classes" . }}
    {{ end }}
  {{ end }}
{{ end }}
{{ if in ($.Scratch.Get "i-classes") "fancybox" }} 
  {{ $.Scratch.Set "i-fancybox" 1 }}
  {{ $classes := $.Scratch.Get "i-classes" }}
  {{ $.Scratch.Set "i-classes" (slice) }}
  {{ range $classes }}
    {{ if ne . "fancybox" }}
      {{ $.Scratch.Add "i-classes" . }}
    {{ end }}
  {{ end }}
{{ end }}
<div class="figure {{ delimit ($.Scratch.Get "i-classes") " " }}" {{ with (.Get "thumbnailWidth") }}style="width:{{ . }};"{{ end }}>
  {{ if eq ($.Scratch.Get "i-fancybox") 1 }}
    <a class="fancybox" href="{{ .Get "src" }}"{{ with (.Get "title") }} title="{{ . }}"{{ end }} data-fancybox="{{ with (.Get "group") }}{{ . }}{{ end }}">
  {{ end }}
    <img class="fig-img" src="{{ with (.Get "thumbnail") }}{{ . }}{{ else }}{{ .Get "src" }}{{ end }}" {{ if or (.Get "thumbnail-width") (.Get "thumbnail-height") }}style="{{ with (.Get "thumbnail-width") }}width: {{ . }};{{ end }}{{ with (.Get "thumbnail-height") }}height: {{ . }};{{ end }}"{{ end }}{{ with (.Get "title") }} alt="{{ . }}"{{ end }}>
  {{ if eq ($.Scratch.Get "i-fancybox") 1 }}
    </a>
  {{ end }}
  {{ if and (.Get "title") (not (in ($.Scratch.Get "i-classes") "nocaption")) }} 
    <span class="caption">{{ .Get "title" }}</span>
  {{ end }}
</div>
{{ if eq ($.Scratch.Get "i-clear") 1 }}
  <div style="clear:both;"></div>
{{ end }}

it only refernces the image thumbnail height and width, which is all working just fine. It is when a post is accessed, the fully blown image is shown. I need to resize it somehow.