Verified Commit cd83cbf3 authored by Jake Howard's avatar Jake Howard
Browse files

Replace cusotm image loader with `object-fit` CSS

Because of this, images had to be changed to load async, else pages are crazy intensive to load
parent 6a6d81d1
Pipeline #69 passed with stages
in 3 minutes and 32 seconds
......@@ -8,7 +8,7 @@
<figure class="text-center">
<a href="{{ $destination | safeURL }}" target="_blank">
<img src="{{ $destination | safeURL }}" alt="{{ .Text | plainify }}" style='max-width: {{ default "90" .Title }}%;' referrerpolicy="no-referrer"/>
<img src="{{ $destination | safeURL }}" alt="{{ .Text | plainify }}" style='max-width: {{ default "90" .Title }}%;' referrerpolicy="no-referrer" loading="lazy" decoding="async" />
</a>
<figcaption class="text-center">
<small>{{ .Text | markdownify }}</small>
......
......@@ -32,7 +32,7 @@
<tr>
{{ with index .album.images 0 }}
<td>
<a href="{{ $spotify_url }}"><div class="image" data-image="{{ .url }}"></div></a>
<a href="{{ $spotify_url }}"><img src="{{ .url }}" decoding="async" loading="lazy" referrerpolicy="no-referrer"/></a>
</td>
{{ end }}
<td class="text-center">
......
{{ define "main" }}
{{ $header_image := (resources.Get "img/header.jpg" | fingerprint).Resize "1500x" }}
<header id="index-header" class="d-flex align-items-center image" data-image="{{ $header_image.RelPermalink }}">
<header id="index-header" class="d-flex align-items-center" style="background-image: url({{ $header_image.RelPermalink }})">
<div class="text-center m-auto text-light">
<h1 class="display-1">{{ .Site.Params.author_name }}</h1>
<h2 class="lead">{{ .Content }}</h2>
......
......@@ -10,7 +10,7 @@
{{ .Scratch.Set "image" $unsplash_data.urls.full }}
{{ end }}
<div class="mb-3 image header-image" data-image='{{ .Scratch.Get "image" }}'></div>
<img class="mb-3 header-image" src='{{ .Scratch.Get "image" }}' />
{{ end }}
{{ partial "breadcrumbs/index.html" . }}
......
......@@ -12,7 +12,7 @@
{{ $unsplash_data := (getJSON "https://api.unsplash.com/photos/" $unsplash_id "?" $query )}}
{{ .Scratch.Set "image" $unsplash_data.urls.thumb }}
{{ end }}
<div class="image" data-image='{{ .Scratch.Get "image" }}'></div>
<img src='{{ .Scratch.Get "image" }}' decoding="async" loading="lazy" referrerpolicy="no-referrer" />
</a>
</div>
{{ end }}
......
......@@ -36,16 +36,6 @@ $(document).ready(function() {
}
});
$('.image').each(function() {
// setup div-image hybrids
const ele = $(this);
if (ele.data('image')) {
ele.css('background-image', 'url(' + ele.data('image') + ')');
} else {
ele.removeClass('image');
}
});
new Elevator({
element: document.getElementById('scroll-elevator'),
mainAudio: '/audio/elevator.mp3',
......
......@@ -40,19 +40,8 @@ code {
padding: 0.25em;
}
.image {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&.featured {
margin-bottom: 2em !important;
height: 13em;
&.main {
height: 40vh;
}
}
img {
object-fit: cover;
}
#light-gallery {
......@@ -108,6 +97,9 @@ table td {
}
#index-header {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: calc(100vh - #{$footer-height} - #{$navbar-height});
......@@ -150,7 +142,7 @@ footer {
width: 20%;
}
.image {
img {
width: 100%;
height: 10vh;
}
......@@ -263,7 +255,7 @@ h1, h2, h3, h4, h5, h6 {
}
.playlist {
.image {
img {
width: 50px;
height: 50px;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment