blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add srcset to the showcase screenshots

Browse Source
This commit is contained in:
Bjørn Erik Pedersen
2018-02-07 16:24:26 +01:00
parent 49d875904a
commit c809789b1b
7 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_1024x512_fill_catmullrom_top.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_512x256_fill_catmullrom_top.png → resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_34aaa1bbe5cc1b4798bfff8f28e1033e.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_600x300_fill_catmullrom_top.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_940x0_resize_catmullrom.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
+8 -2
View File
@@ -7,8 +7,14 @@
{{ range $p := first 10 (where .Site.RegularPages "Section" "showcase") }}
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $img }}
{{ $img := .Fill "512x256 top" }}
<a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $img.Width }}px;height: {{ $img.Height }}" data-bg="{{ $img.RelPermalink }}">{{/* data-bg uses a lazyload script to load the actual background image. It is located here: themes/gohugoioTheme/src/js/lazysizes.js */}}
{{ $big := .Fill "1024x512 top" }}
{{ $small := $big.Resize "512x" }}
<a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;"
data-bg="{{ $img.RelPermalink }}"
data-sizes="auto"
data-srcset="{{ $small.RelPermalink }} 1x,
{{ $big.RelPermalink }} 2x" data-src="small"
>
{{with $p.Title}}
<div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
<div class="absolute bottom-0 pa2 tc white">
themes/gohugoioTheme/layouts/showcase/list.html
+7 -3
View File
@@ -22,12 +22,16 @@
{{define "showcase_items"}}
<a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white db flex-auto-ns hover-bg-near-white mb3 mr3 w-100 w-30-l">
<a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white db flex-auto-ns hover-bg-near-white mb3 mr3 w-100 w-30-l" style="max-width: 1024px;">
<div class="flex flex-column black h-100 mb2 pa3 pa4-l">
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $img }}
{{ $img := .Fill "600x300 top" }}
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+" data-src="{{ .RelPermalink }}" class="grow img lazyload" />
{{ $big := .Fill "1024x512 top" }}
{{ $small := $big.Resize "512x" }}
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+"
data-sizes="auto"
data-srcset="{{ $small.RelPermalink }} 1x,
{{ $big.RelPermalink }} 2x" data-bg="{{ $small.RelPermalink }}" class="grow img lazyload" style="display: block; width: 100%; height: auto;" />
{{end}}
<div style="margin-top:auto;">{{/* the margin aligns to the bottom */}}
<h2 class="dib f3 mt4">
themes/gohugoioTheme/layouts/showcase/single.html
+3 -2
View File
@@ -35,8 +35,9 @@ Showcase: {{ .Title }}
{{define "main-column"}}
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $img }}
{{ $img := .Resize "940x" }}
<img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}" class="mw-100 b--light-gray ba">
{{ $big := .Fill "1024x512 top" }}
{{ $small := $big.Resize "512x" }}
<img srcset="{{ $small.RelPermalink }} 1x, {{ $big.RelPermalink }} 2x" alt="{{ $img.Title }}" width="{{ $big.Width }}" class="mw-100 b--light-gray ba">
{{ end }}
<div class="mid-gray nested-copy-line-height nested-img nested-links">
{{with .Params.byline }}