mirror of
https://github.com/gohugoio/hugo.git
synced 2026-09-02 11:42:37 +00:00
Rodolfo Carvalho
de7ab636bc
The image processing examples are rendered within containers with a 'nested-img' parent CSS class, which by default makes images responsive by resizing them to the size of their containers. That doesn't work well for the examples as the small images end up stretched. Since there can be other images in the same 'nested-img' context, we keep that class in the parent and set the example images width to auto, such that they will render with their actual size. On small screens, larger images will still be sized down via the max-width property. Fixes #812
25 lines
877 B
HTML
25 lines
877 B
HTML
{{ $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 }}
|
|
{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
|
|
{{ end }}
|
|
{{ $image := .Scratch.Get "image" }}
|
|
<figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">
|
|
<img style="max-width: 100%; width: auto; height: auto;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
|
|
<figcaption>
|
|
<small>
|
|
{{ with .Inner }}
|
|
{{ . }}
|
|
{{ else }}
|
|
.{{ $command }} "{{ $options }}"
|
|
{{ end }}
|
|
</small>
|
|
</figcaption>
|
|
</figure> |