Browse Source

fix(feature/post-images): prevent content from jumping as image loads

fix #162
Josh Habdas 2 months ago
parent
commit
452ce64b22
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
2 changed files with 17 additions and 10 deletions
  1. 13
    7
      assets/css/theme.css
  2. 4
    3
      layouts/partials/image/header.html

+ 13
- 7
assets/css/theme.css View File

@@ -24,25 +24,31 @@
24 24
 @keyframes intro {
25 25
   0% { opacity: 0 } 100% { opacity: 1 }
26 26
 }
27
-.blur-up {
28
-  -webkit-filter: blur(5px);
27
+.blur-up.lazyloading {
29 28
   filter: blur(5px);
30
-  transition: filter 400ms, -webkit-filter 400ms;
29
+  opacity: 1;
30
+  transition: opacity 1s, filter 1.5s;
31
+}
32
+.blur-up.lazyload {
33
+  opacity: 0;
34
+  filter: blur(10px);
31 35
 }
32 36
 .blur-up.lazyloaded {
33
-  -webkit-filter: blur(0);
34 37
   filter: blur(0);
38
+  transition: filter 1s;
35 39
 }
36 40
 .hack .readmore {
37 41
   margin-bottom: 2.2em;
38 42
 }
39
-.responsive-iframe {
43
+.responsive-iframe,
44
+.ratio-container {
40 45
   position: relative;
41
-  padding-bottom: 56.25%; /* 16:9 */
46
+  padding-bottom: 56.25%; /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
42 47
   padding-top: 25px;
43 48
   height: 0;
44 49
 }
45
-.responsive-iframe iframe {
50
+.responsive-iframe iframe,
51
+.ratio-container > *:not([itemprop="caption"]) {
46 52
   position: absolute;
47 53
   top: 0;
48 54
   left: 0;

+ 4
- 3
layouts/partials/image/header.html View File

@@ -24,11 +24,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
24 24
   {{ $meta_description := .Params.meta.description }}
25 25
   {{ $meta_keywords := .Params.meta.keywords }}
26 26
   {{ $meta_contentlocation := .Params.meta.contentlocation }}
27
+  {{ $image300 := .Fill "300x169 q20 Center" }}
27 28
   {{ $image600 := .Fill "600x338 q60 Center" }}
28 29
   {{ $image900 := .Fill "900x506 q70 Center" }}
29 30
   {{ $image1200 := .Fill "1200x675 q80 Center" }}
30 31
   {{ $image1600 := .Fill "1600x900 q90 Center" }}
31
-  <figure aria-hidden="true" itemscope itemtype="https://schema.org/ImageObject">
32
+  <figure class="ratio-container" aria-hidden="true" itemscope itemtype="https://schema.org/ImageObject">
32 33
     <link itemprop="contentUrl" href="{{ .RelPermalink }}">
33 34
     <meta itemprop="encodingFormat" content="{{ .MediaType }}">
34 35
     <meta itemprop="name" content="{{ .Name | plainify }}">
@@ -52,9 +53,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
52 53
       alt="{{ with $meta_description }}{{ . }}{{ else }}{{ .Name | plainify }}{{ end }}"
53 54
       class="lazyload blur-up"
54 55
       src="{{ $image600.RelPermalink }}"
56
+      srcset="{{ $image300.RelPermalink }}"
57
+      data-srcset="{{ $image300.RelPermalink }} 300w, {{ $image600.RelPermalink }} 600w, {{ $image900.RelPermalink }} 900w, {{ $image1200.RelPermalink }} 1200w, {{ $image1600.RelPermalink }} 1600w"
55 58
       data-sizes="auto"
56
-      data-src="{{ $image1200.RelPermalink }}"
57
-      data-srcset="{{ $image600.RelPermalink }} 600w, {{ $image900.RelPermalink }} 900w, {{ $image1200.RelPermalink }} 1200w, {{ $image1600.RelPermalink }} 1600w"
58 59
     >
59 60
     {{ if or (not (path.Ext .Title)) (or $meta_creator $meta_sameas) }}
60 61
       <figcaption itemprop="caption">

Loading…
Cancel
Save