Unverified Commit 9e1f7b96 authored by Henk Verlinde's avatar Henk Verlinde Committed by GitHub
Browse files

Merge pull request #809 from h-enk/images 

Better image support
parents 58d77b24 6c44ba0d

assets/scss/components/_images.scss

+15 −1
Original line number Diff line number Diff line 
figure {

  margin: 2rem 0;

  margin: 0 0 1rem;

  display: inline-block;

}



figure img {

  margin-bottom: 0.5rem;

  line-height: 1;

  max-width: 100%;

  height: auto;

}



figure figcaption {

  margin: 0.25rem 0 0.75rem;

  font-size: 0.875em;

  color: #6c757d;

}



.figure-caption {

config/_default/config.toml

+6 −0
Original line number Diff line number Diff line
@@ -78,6 +78,9 @@ rel = "sitemap" 
  [[module.mounts]]

    source = "static"

    target = "static"

  [[module.mounts]]

    source = "layouts"

    target = "layouts"

  [[module.mounts]]

    source = "node_modules/flexsearch"

    target = "assets/js/vendor/flexsearch"
@@ -87,3 +90,6 @@ rel = "sitemap" 
  [[module.mounts]]

    source = "node_modules/mermaid"

    target = "assets/js/vendor/mermaid"

  [[module.mounts]]

    source = "node_modules/@hyas/images/layouts"

    target = "layouts"

config/_default/params.toml

+13 −6
Original line number Diff line number Diff line
@@ -46,12 +46,19 @@ siteLinksSearchBox = false 
themeColor = "#fff"



# Images

quality = 85

bgColor = "#fff"

landscapePhotoWidths = [900, 800, 700, 600, 500]

portraitPhotoWidths = [800, 700, 600, 500]

lqipWidth = "20x"

smallLimit = "300"

# quality = 85

# bgColor = "#fff"

# landscapePhotoWidths = [900, 800, 700, 600, 500]

# portraitPhotoWidths = [800, 700, 600, 500]

# lqipWidth = "20x"

# smallLimit = "300"



# Images

imageResponsive = true

imageConvertTo = "webp"

imageImageSizes = ["480","720","1080","1280","1600","2048"]

singleSize = false

imageAddClass = "img-fluid lazyload blur-up"



# Footer

footer = "Powered by <a class=\"text-muted\" href=\"https://www.netlify.com/\">Netlify</a>, <a class=\"text-muted\" href=\"https://gohugo.io/\">Hugo</a>, and <a class=\"text-muted\" href=\"https://getdoks.org/\">Doks</a>"

config/postcss.config.js

+4 −0
Original line number Diff line number Diff line
@@ -23,6 +23,10 @@ module.exports = { 
        'container-xxl',

        'container-fluid',

        'offcanvas-backdrop',

        'img-fluid',

        'lazyload',

        'blur-up',

        'figcaption',

        ...whitelister([

          './assets/scss/components/_alerts.scss',

          './assets/scss/components/_buttons.scss',

layouts/_default/_markup/render-image.html

deleted100644 → 0
+0 −36
Original line number Diff line number Diff line 
{{ $image := "" -}}

{{ if (urls.Parse .Destination).IsAbs }}

  {{ $image = resources.GetRemote .Destination -}}

{{ else -}}

  {{ $image = .Page.Resources.GetMatch .Destination -}}

{{ end -}}

{{ with $image -}}

  {{ $lqip := $image.Resize site.Params.lqipWidth -}}



  {{ $imgSrc := "" -}}

  {{ $imgSrcSet := slice -}}



  {{ $widths := site.Params.landscapePhotoWidths -}}

  {{ if gt $image.Height $image.Width -}}

    {{ $widths = site.Params.portraitPhotoWidths -}}

  {{ end -}}



  {{ range $widths -}}

    {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}

    {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}

    {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}

  {{ end -}}

  {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}



  {{ if gt $image.Width site.Params.smallLimit -}}

    <figure class="figure">

      <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">

      <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>

      {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}

    </figure>

  {{ else -}}

    <img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">

  {{ end -}}

{{ else -}}

  {{ erroridf "image-not-found" "Image not found" -}}

{{ end -}}
 
 No newline at end of file