55 lines
1.5 KiB
HTML
55 lines
1.5 KiB
HTML
<!doctype html>
|
|
<!-- The 'no-js' class will be removed on lazyimg-setup: -->
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>hugo-mods: lazyimg</title>
|
|
<style>
|
|
/* TODO(kdevo): create a nice flexbox image gallery example
|
|
/* .grid {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item {
|
|
width: 50%;
|
|
flex-grow: 1;
|
|
height: auto;
|
|
max-width: 1024px;
|
|
} */
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
width: 100%;
|
|
max-width: 1920px;
|
|
|
|
border-radius: 5px;
|
|
border: 1px solid #aaa;
|
|
}
|
|
</style>
|
|
<!-- lazyimg.css ensures that the image is not displayed twice when the user has no-js: -->
|
|
<style>{{ (resources.Get "lazyimg.css" | minify).Content | safeCSS }}</style>
|
|
|
|
<!-- This script basically loads laszysizes asynchronously: -->
|
|
{{ partial "lazyimg-setup-nojs" . }}
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Most basic usage with single parameter that can either be a filename or resource: -->
|
|
{{ partial "lazyimg" "alps.jpg" }}
|
|
|
|
<!-- Here we call the partial by passing a param dict that overrides the site's params: -->
|
|
{{ partial "lazyimg" (dict "img" "alps.jpg" "class" "my-fancy-class" "alt" "This image shows the alps" "resizer" "simple") }}
|
|
|
|
{{ $images := (partial "images" .) }}
|
|
{{ range $images -}}
|
|
<!-- Here we call the partial with a resource: -->
|
|
{{ partial "lazyimg" . }}
|
|
{{- end }}
|
|
</body>
|
|
</html> |