From adc500f191b7d963120772e72c89a3e019499a73 Mon Sep 17 00:00:00 2001
From: azett <githubregistrierung@azett.com>
Date: Sun, 18 Oct 2020 11:49:34 +0200
Subject: [PATCH] New image attribute "loading" added. Default is "lazy", which
 results in better loading performance of the page.

---
 fp-plugins/bbcode/plugin.bbcode.php | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/fp-plugins/bbcode/plugin.bbcode.php b/fp-plugins/bbcode/plugin.bbcode.php
index 86d7502..2b6a2d3 100644
--- a/fp-plugins/bbcode/plugin.bbcode.php
+++ b/fp-plugins/bbcode/plugin.bbcode.php
@@ -244,6 +244,17 @@ function do_bbcode_img($action, $attributes, $content, $params, $node_object) {
 		));
 	}
 
+	// Calculating the "loading" attribute of the image.
+	// For details, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+	// -> "lazy" is default (see https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)
+	$loadingValue = 'lazy';
+	// Use img attribute value if explicitly set
+	if (isset($attributes ['loading'])) {
+		$loadingValue = $attributes ['loading'];
+	}
+	$loading = ' loading="' . $loadingValue . '"';
+
+	// JS for popup
 	if (isset($attributes ['popup']) && ($attributes ['popup'])) {
 		$pop_width = $orig_w ? $orig_w : 800;
 		$pop_height = $orig_h ? $orig_h : 600;
@@ -251,8 +262,7 @@ function do_bbcode_img($action, $attributes, $content, $params, $node_object) {
 
 		// Plugin hook, here lightbox attachs
 		$popup = apply_filters('bbcode_img_popup', $popup, $absolutepath);
-		$popup_start = $attributes ['popup'] == 'true' ? '<a title="' . $title . '" href="'. /* BLOG_BASEURL . $actualpath.*/
-				$absolutepath . '"' . $popup . '>' : '';
+		$popup_start = $attributes ['popup'] == 'true' ? '<a title="' . $title . '" href="' . $absolutepath . '"' . $popup . '>' : '';
 		$popup_end = $attributes ['popup'] == 'true' ? '</a>' : '';
 	}
 	$img_width = $width ? ' width="' . $width . '"' : '';
@@ -260,9 +270,11 @@ function do_bbcode_img($action, $attributes, $content, $params, $node_object) {
 	if (isset($attributes ['float'])) {
 		$float = ($attributes ['float'] == 'left' || $attributes ['float'] == 'right') ? ' class="float' . $attributes ['float'] . '"' : ' class="center"';
 	}
-	$src = $thumbpath ? (BLOG_BASEURL . $thumbpath) : $absolutepath; // $attributes['default'])
+	$src = $thumbpath ? (BLOG_BASEURL . $thumbpath) : $absolutepath;
 	$pop = $popup_start ? '' : ' title="' . $title . '" ';
-	return $popup_start . '<img src="' . $src . '" alt="' . $alt . '" ' . $pop . $float . $img_width . $img_height . ' />' . $popup_end;
+
+	// Finally: Put together the whole img tag with all its attributes and return it
+	return $popup_start . '<img src="' . $src . '" alt="' . $alt . '" ' . $pop . $float . $img_width . $img_height . $loading . ' />' . $popup_end;
 }
 
 /**