diff options
| author | Josh Habdas <jhabdas@gmail.com> | 2017-06-06 16:47:58 +0300 |
|---|---|---|
| committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2017-06-07 09:17:46 +0300 |
| commit | fe80d6d0792936bec745606f64b2329ad369fffb (patch) | |
| tree | a278f885839cefe3f88ef118977ec39683c30b0f | |
| parent | f9e563c713888049ebe8ec7f3e141fa6c0868dfb (diff) | |
feat($thumbnails): add thumnail image placeholders
improve ux with placeholder images while thumbs are downloaded
closes #34
| -rw-r--r-- | layouts/_default/thumbnail.html | 2 | ||||
| -rw-r--r-- | layouts/partials/head-additions.html | 11 |
2 files changed, 12 insertions, 1 deletions
diff --git a/layouts/_default/thumbnail.html b/layouts/_default/thumbnail.html index 56df085..d14816c 100644 --- a/layouts/_default/thumbnail.html +++ b/layouts/_default/thumbnail.html @@ -1,5 +1,5 @@ <a href="{{ .Permalink }}" class="link db shadow-hover gray mb4 w-100 w-30-ns"> - <img class="lazyload animated fadeIn fit db ba b--moon-gray" alt="{{ .Description }}" data-src="{{ .Params.thumbnail | absURL }}" /> + <img class="lazyload fit db ba b--moon-gray" alt="{{ .Description }}" src="data:image/svg+xml;charset=utf8,%3Csvg%20width='1800'%20height='1200'%20viewBox='0%200%201800%201200'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EThumbnail%3C/title%3E%3Cg%20fill='none'%20fill-rule='evenodd'%3E%3Cpath%20fill='%23FFF'%20d='M0%200h1800v1200H0z'/%3E%3Ctext%20opacity='0.5'%20font-family='Muli,%20avenir,helvetica%20neue,helvetica,ubuntu,roboto,noto,segoe%20ui,arial,sans-serif'%20font-size='288'%20fill='#0594CB'%3E%3Ctspan%20x='468'%20y='674'%3EHUGO%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E" data-src="{{ .Params.thumbnail | absURL }}" /> <noscript> <img class="fit db ba b--moon-gray" alt="{{ .Description }}" src="{{ .Params.thumbnail | absURL }}" /> </noscript> diff --git a/layouts/partials/head-additions.html b/layouts/partials/head-additions.html index 3272a62..8623866 100644 --- a/layouts/partials/head-additions.html +++ b/layouts/partials/head-additions.html @@ -11,3 +11,14 @@ display: none; } </style> +{{/* TODO: backport thumbnail animation to base theme, removing fadeIn if no longer used. */}} +<style media="screen"> + .lazyload, + .lazyloading { + opacity: 0.5; + } + .lazyloaded { + opacity: 1; + transition: opacity 300ms; + } +</style>
\ No newline at end of file |