mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
theme: optimize page load for images #304
This commit is contained in:
Sören Weber
parent
54df05b91d
commit
08fb5c4b22
6 changed files with 58 additions and 77 deletions
|
|
@ -43,6 +43,7 @@ title = "Hugo Relearn Documentation"
|
|||
showVisitedLinks = true
|
||||
collapsibleMenu = true
|
||||
disableBreadcrumb = false
|
||||
disableInlineCopyToClipBoard = true
|
||||
disableNextPrev = false
|
||||
disableLandingPageButton = true
|
||||
titleSeparator = "::"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,20 @@ This document shows you what's new in the latest release. For a detailed list of
|
|||
|
||||
---
|
||||
|
||||
## 5.5.0
|
||||
|
||||
- **Change**: The way images are processed has changed. Now images are lazy loaded by default which speeds up page load on slow networks and/or big pages and also the print preview.
|
||||
|
||||
For that the JavaScript code to handle the [lightbox and image effects]({{% relref "cont/markdown#further-image-formatting" %}}) on the client side was removed in favour for static generation of those effects on the server.
|
||||
|
||||
If you have used HTML directly in your Markdown files, this now has the downside that it doesn't respect the effect query parameter anymore. In this case you have to migrate all your HTML `img` URLs manually to the respective HTML attributes.
|
||||
|
||||
| Old | New |
|
||||
| ------------------------------------------------------ | --------------------------------------------------------------- |
|
||||
| `<img src="pic.png?width=20vw&classes=shadow,border">` | `<img src="pic.png" style="width:20vw;" class="shadow border">` |
|
||||
|
||||
---
|
||||
|
||||
## 5.4.0
|
||||
|
||||
- **Change**: [With the proper settings]({{% relref "basics/configuration#serving-your-page-from-the-filesystem" %}}) in your `config.toml` your page is now servable from the local file system using `file://` URLs.
|
||||
|
|
|
|||
|
|
@ -712,6 +712,14 @@ Add a HTTP `classes` parameter to the link image to add CSS classes. Add some of
|
|||
|
||||
|
||||
|
||||
##### Combination
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Lightbox
|
||||
|
||||
Add a HTTP `featherlight` parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining `featherlight` to `false`.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Some testing for different styles of image links.
|
|||
|
||||
### Relative to page
|
||||
|
||||
|
||||
|
||||
|
||||
### Relative to page up level
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ Some testing for different styles of image links.
|
|||
|
||||
### Relative to page
|
||||
|
||||
<p><img src="magic.gif?classes=shadow&height=50px"></p>
|
||||
<p><img src="magic.gif?classes=shadow"></p>
|
||||
|
||||
### Relative to page up level
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,45 @@
|
|||
{{- $url := .url }}
|
||||
{{- $title := .title }}
|
||||
{{- $alt := .alt }}
|
||||
{{- $classes := "" }}
|
||||
{{- $featherlight := true }}
|
||||
{{- $height := "auto" }}
|
||||
{{- $width := "auto" }}
|
||||
{{- $dest_url := urls.Parse $url }}
|
||||
{{- $dest_path := $dest_url.Path }}
|
||||
{{- $image := $context.Resources.GetMatch $dest_path }}
|
||||
{{- $url = $url | relURL }}
|
||||
{{- if not $image }}
|
||||
{{- $image = .Resources.GetMatch $dest_path }}
|
||||
{{- end }}
|
||||
{{- if not $image }}
|
||||
{{- $image = .Resources.GetRemote $url }}
|
||||
{{- end }}
|
||||
{{- if $image }}
|
||||
{{- $url = $image.RelPermalink }}
|
||||
{{- if $dest_url.RawQuery }}
|
||||
{{- $url = printf "%s?%s" $url $dest_url.RawQuery }}
|
||||
{{- end }}
|
||||
{{- $height = printf "%dpx" $image.Height }}
|
||||
{{- $width = printf "%dpx" $image.Width }}
|
||||
{{- end }}
|
||||
{{- if $dest_url.RawQuery }}
|
||||
{{- $classes = (replaceRE "\\s+" " " (replaceRE "," " " ($dest_url.Query.Get "classes") ) ) }}
|
||||
{{- $featherlight = (ne ($dest_url.Query.Get "featherlight") "false") }}
|
||||
{{- if or ($dest_url.Query.Get "height") ($dest_url.Query.Get "width") }}
|
||||
{{- $height = "auto" }}
|
||||
{{- $width = "auto" }}
|
||||
{{- end }}
|
||||
{{- with $dest_url.Query.Get "height" }}
|
||||
{{ $height = . }}
|
||||
{{- end }}
|
||||
{{- with $dest_url.Query.Get "width" }}
|
||||
{{ $width = . }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- if $featherlight }}
|
||||
<a href="{{ $url | safeURL }}" data-featherlight="image">
|
||||
{{- end }}
|
||||
<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }}{{ with $classes }} class="{{ . }}"{{ end }} style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
|
||||
{{- if $featherlight }}
|
||||
</a>
|
||||
{{- end }}
|
||||
<img src="{{ $url }}" alt="{{ $alt }}"{{ with $title}} title="{{ . }}"{{ end }}>
|
||||
|
|
|
|||
|
|
@ -450,61 +450,6 @@ function initMenuScrollbar(){
|
|||
adjustContentWidth();
|
||||
}
|
||||
|
||||
function initLightbox(){
|
||||
// wrap image inside a lightbox (to get a full size view in a popup)
|
||||
var images = $("main#body-inner img").not(".inline");
|
||||
images.wrap(function(){
|
||||
var image =$(this);
|
||||
var o = getUrlParameter(image[0].src);
|
||||
var f = o['featherlight'];
|
||||
// IF featherlight is false, do not use feather light
|
||||
if (f != 'false') {
|
||||
if (!image.parent("a").length) {
|
||||
var html = $( "<a>" ).attr("href", image[0].src).attr("data-featherlight", "image").get(0).outerHTML;
|
||||
return html;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('a[rel="lightbox"]').featherlight({
|
||||
root: 'div#body'
|
||||
});
|
||||
}
|
||||
|
||||
function initImageStyles(){
|
||||
// change image styles, depending on parameters set to the image
|
||||
var images = $("main#body-inner img").not(".inline");
|
||||
images.each(function(index){
|
||||
var image = $(this)
|
||||
var o = getUrlParameter(image[0].src);
|
||||
if (typeof o !== "undefined") {
|
||||
var h = o["height"];
|
||||
var w = o["width"];
|
||||
var c = o["classes"];
|
||||
image.css("width", function() {
|
||||
if (typeof w !== "undefined") {
|
||||
return w;
|
||||
} else {
|
||||
return "auto";
|
||||
}
|
||||
});
|
||||
image.css("height", function() {
|
||||
if (typeof h !== "undefined") {
|
||||
return h;
|
||||
} else {
|
||||
return "auto";
|
||||
}
|
||||
});
|
||||
if (typeof c !== "undefined") {
|
||||
var classes = c.split(',');
|
||||
for (i = 0; i < classes.length; i++) {
|
||||
image.addClass(classes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sidebarEscapeHandler( event ){
|
||||
if( event.key == "Escape" ){
|
||||
var b = document.querySelector( 'body' );
|
||||
|
|
@ -813,22 +758,6 @@ function initSearch() {
|
|||
$('#body-inner a:not(:has(img)):not(.btn):not(a[rel="footnote"])').addClass('highlight');
|
||||
}
|
||||
|
||||
// Get Parameters from some url
|
||||
function getUrlParameter(sPageURL) {
|
||||
var url = sPageURL.split('?');
|
||||
var obj = {};
|
||||
if (url.length == 2) {
|
||||
var sURLVariables = url[1].split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
obj[sParameterName[0]] = sParameterName[1];
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
// debouncing function from John Hann
|
||||
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
|
||||
(function($, sr) {
|
||||
|
|
@ -865,8 +794,6 @@ jQuery(function() {
|
|||
initMenuScrollbar();
|
||||
scrollToActiveMenu();
|
||||
scrollToFragment();
|
||||
initLightbox();
|
||||
initImageStyles();
|
||||
initToc();
|
||||
initAnchorClipboard();
|
||||
initCodeClipboard();
|
||||
|
|
|
|||
Loading…
Reference in a new issue