[4.0] Pluginless lazyloading for the core

[zero-24]

Pull Request for Issue #30218

Summary of Changes

This is an replacement of #30218 by dropping the core lazyloading plugin as well as implementing higth & width adttributes to the core fields.

Based on @dgrammatiko 's JS code I hope i did not broke anything in that area?

Stoke through parts implemented with PR #30784 .

Testing Instructions

clean install test

• Install the installation package from here: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30748/downloads/35816/
• make sure that there is no lazyload plugin any more

upgrade test

1. On a clean 4.0-dev or 4.0 Beta 4 or latest 4.0 nightly installation, update to the update package built by Drone for this PR. You can find an update package and a custom update URL here: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30748/downloads/35816/.
2. Verify that the update suceeds without SQL errors.
3. Check in the list of plugins in backend that the plugin can't be found anymore.

Actual result BEFORE applying this Pull Request

We set the loading attribute without the width and heigth attribute.

Expected result AFTER applying this Pull Request

There is no lazyloading plugin any more but still we set the loading attribute for new images alongside the width and heigth attributes.

Documentation Changes Required

None

Question

Should there be a option to opt-out of automatic lazyloading new images?
I'm not sure whether we might want to document the SQL scripts to remove the lazyloading plugin from the database? @richard67 @wilsonge ?

[dgrammatiko]

@zero-24 the images rendered through the media field still have no width and height but easily fixable:
change

joomla-cms/build/media_source/system/js/fields/joomla-field-media.w-c.es6.js

Line 43 in 621171f

editor.value = Joomla.selectedFile.url;

to

editor.value = `${Joomla.selectedFile.url}?width=${Joomla.selectedFile.width}&height=${Joomla.selectedFile.height}`;

Explainer: The value that is stored in the db for each form field media is a url. Urls can have params. We're passing the required data as params, and pick them up in the layout [php: parse_url($url)] and append them to the respected image attributes. FWIW this technic was proposed to solve also the editing of an image (by having a ?version=xxx param) but was never implemented in the new media manager due to the lack of db integration (I think that was planned for the next iteration).

[zero-24]

Patched thanks @dgrammatiko

[Quy]

Close #30615?

[zero-24]

Close #30615?

Done

[dgrammatiko]

@zero-24 it seems that I broke something in the media manager at some point. Please add

                                width: this.item.width ? this.item.width : undefined,
                                height: this.item.height? this.item.height : undefined,

after

joomla-cms/administrator/components/com_media/resources/scripts/components/browser/items/item.js

Line 95 in 319edca

extension: this.item.extension ? this.item.extension : false,

Also here's a quick implementation of fulltext image layout:

defined('_JEXEC') or die;

use Joomla\Utilities\ArrayHelper;

$params  = $displayData->params;
$images  = json_decode($displayData->images);
$image   = parse_url($images->image_fulltext);
$src     = $image['path'];
$attr    = [];

parse_str($image['query'], $imageParams);

if (count($imageParams))
{
	if ($imageParams['width'] !== 'undefined')
	{
		$attr['width'] = $imageParams['width'] . 'px';
	}

	if ($imageParams['height'] !== 'undefined')
	{
		$attr['height'] = $imageParams['height'] . 'px';
	}
}
?>
<?php if (!empty($images->image_fulltext)) : ?>
	<?php $imgfloat = empty($images->float_fulltext) ? $params->get('float_fulltext') : $images->float_fulltext; ?>
	<figure class="float-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?> item-image">
		<img loading="lazy" src="<?php echo htmlspecialchars($src, ENT_COMPAT, 'UTF-8'); ?>"
			 alt="<?php echo htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>"
			 itemprop="image"
				<?php echo ArrayHelper::toString($attr); ?>/>
		<?php if (isset($images->image_fulltext_caption) && $images->image_fulltext_caption !== '') : ?>
			<figcaption class="caption"><?php echo htmlspecialchars($images->image_fulltext_caption, ENT_COMPAT, 'UTF-8'); ?></figcaption>
		<?php endif; ?>
	</figure>
<?php endif;

and a screenshot of the expected result

[zero-24]

Thanks @dgrammatiko i have just implemended the suggested changes for the full and intro image layout as well as the mention JS changes in the media manager. Thanks!

[SharkyKZ]

🤦‍♂️

[zero-24]

What is wrong @SharkyKZ ?

[SharkyKZ]

Everything. Revert previous commits and don't screw around with image URLs please.

[zero-24]

Fine for me will do that hopefully tomorrow Thabks for your PR!

[zero-24]

This PR has now been reset to only remove the plugin and add the is_array check for the HTML Helper. Thanks @dgrammatiko 👍

[dgrammatiko]

I have tested this item ✅ successfully on 8de2081

@zero-24 Thank you for this one!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30748.}

[Quy]

I have tested this item ✅ successfully on 8de2081

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30748.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30748.}

[richard67]

@dgrammatiko @Quy We (Tobias and me) had to add an additional test, see section "upgrade test" in the testing instructions. Could you test that, too? The other test and related code has not been changed, so no need to repeat your previous, valid test for the "clean install test" section. Thanks in advance.

[dgrammatiko]

I have tested this item ✅ successfully on e735059

Update of a clean J4 was fine, plugin was removed successfully

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30748.}

[richard67]

Update test on MySQLi and PostgreSQL is ok. Now am doing new installation tests for both database types.

[richard67]

I have tested this item ✅ successfully on e735059

• New installation MySQLi: ✅
• New installation PostgreSQL (PDO): ✅
• Update MySQLi: ✅
• Update PostgreSQL (PDO): ✅

  ---

  _{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30748.}

[HLeithner]

Thanks for doing it the proper way.

[zero-24]

Thanks