Transition to Hugo Image Processing (#173)

* Update layout to use Hugo Image Processing.

Created shortcode rimg that uses the srcset attribute to display responsive images.

* Copy Static images to assets folder.

* Add image processing to missing components + Update examples

* Fix rendering in https://themes.gohugo.io/

Co-authored-by: Emruz Hossain <emruz@appscode.com>
This commit is contained in:
Patrick Magauran 2020-12-31 15:55:28 -05:00 committed by GitHub
parent ba1d6014d9
commit a2b3c7fda2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 352 additions and 75 deletions

View file

@ -1,6 +1,18 @@
<div
{{ $achievementImage := resources.Get .image }}
{{ $achievementImageLg := ""}}
{{ $achievementImageSm := ""}}
{{/* resize the images. don't resize svg image because its not supported */}}
{{ if $achievementImage }}
{{ $achievementImageSm = $achievementImage.Resize "x300" }}
{{ $achievementImageSm = $achievementImageSm.RelPermalink }}
{{ $achievementImageLg = $achievementImage.Resize "x1500" }}
{{ $achievementImageLg = $achievementImageLg.RelPermalink }}
{{ end }}
{{/* don't use "background-image: url('{{ $achievementImageSm }}');" Otherwise the images won't show in https://themes.gohugo.io/ */}}
<div
class="achievement-entry text-center"
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');"
>
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">{{ .title }}</h4>
@ -8,4 +20,6 @@
<h4>{{ .title }}</h4>
<p>{{ .summary | markdownify }}</p>
</div>
<span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
<span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
</div>