diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9736267e36..66495102d2 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -43,6 +43,7 @@ title = "Hugo Relearn Documentation"
showVisitedLinks = true
collapsibleMenu = true
disableBreadcrumb = false
+ disableInlineCopyToClipBoard = true
disableNextPrev = false
disableLandingPageButton = true
titleSeparator = "::"
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 10afa037f2..554eae374c 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -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 |
+ | ------------------------------------------------------ | --------------------------------------------------------------- |
+ | `
` | `
` |
+
+---
+
## 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.
diff --git a/exampleSite/content/cont/markdown.en.md b/exampleSite/content/cont/markdown.en.md
index 480d575b13..5f79aaaa05 100644
--- a/exampleSite/content/cont/markdown.en.md
+++ b/exampleSite/content/cont/markdown.en.md
@@ -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`.
diff --git a/exampleSite/content/tests/images/_index.en.md b/exampleSite/content/tests/images/_index.en.md
index 4d54179c68..de0d3ee1e2 100644
--- a/exampleSite/content/tests/images/_index.en.md
+++ b/exampleSite/content/tests/images/_index.en.md
@@ -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
-
+
### Relative to page up level
diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html
index bc7e1a8b38..bfefc0bd7f 100644
--- a/layouts/partials/shortcodes/image.html
+++ b/layouts/partials/shortcodes/image.html
@@ -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 }}
+
+{{- end }}
+
+{{- if $featherlight }}
+
+{{- end }}
\ No newline at end of file
diff --git a/static/js/theme.js b/static/js/theme.js
index af86befaef..e4fac24ec5 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -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 = $( "" ).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();