Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0] Pluginless lazyloading for the core #30748

Merged
merged 20 commits into from
Sep 27, 2020
Merged

[4.0] Pluginless lazyloading for the core #30748

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
18d1aff
remove the plugin code
zero-24 Sep 23, 2020
d1fd362
make sure there is no error message on attributs passed as string
zero-24 Sep 23, 2020
7bc7a9c
implement width & height into the media field
zero-24 Sep 23, 2020
8615a64
add width & hight to com_media
zero-24 Sep 23, 2020
f932aa9
add width & height to the file list
zero-24 Sep 23, 2020
c7274b8
fix file path
zero-24 Sep 23, 2020
f4ff3bb
add width & heigth to the media field
zero-24 Sep 23, 2020
621171f
there is no alt text comming from com_media yet
zero-24 Sep 23, 2020
0cfc309
patch JS thanks @dgrammatiko
zero-24 Sep 23, 2020
6dda713
Update installation/sql/postgresql/base.sql
zero-24 Sep 23, 2020
bb5e057
Update installation/sql/mysql/base.sql
zero-24 Sep 23, 2020
46424f2
fix issues mention vy @dgrammatiko and implement width and heigth in …
zero-24 Sep 23, 2020
12e0445
Merge branch 'pluginless_lazyloading' of github.com:zero-24/joomla-cm…
zero-24 Sep 23, 2020
8bc5005
When we have no image nothing is going to be displayed
zero-24 Sep 23, 2020
50ce77d
move json_decode & change back to the original image url
zero-24 Sep 23, 2020
720ae43
take off px for width and height
zero-24 Sep 23, 2020
0b82996
reset other changes that has been moved to #30784
zero-24 Sep 27, 2020
8de2081
also reset the image list layout
zero-24 Sep 27, 2020
f1caaeb
Update libraries/src/HTML/HTMLHelper.php
zero-24 Sep 27, 2020
e735059
Add update SQL scripts 4.0.0-2020-09-27.sql (#47)
richard67 Sep 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions administrator/components/com_admin/sql/updates/mysql/4.0.0-2020-04-18.sql
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions administrator/components/com_admin/sql/updates/postgresql/4.0.0-2020-04-18.sql
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions administrator/components/com_media/resources/scripts/components/browser/items/item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ export default {
thumb: this.item.thumb,
fileType: this.item.mime_type ? this.item.mime_type : false,
extension: this.item.extension ? this.item.extension : false,
width: this.item.width ? this.item.width : undefined,
height: this.item.height ? this.item.height : undefined,
},
}
)
Expand Down
7 changes: 0 additions & 7 deletions administrator/language/en-GB/plg_content_imagelazyload.sys.ini
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion build/media_source/plg_editors_tinymce/js/plugins/dragdrop/plugin.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ tinymce.PluginManager.add('jdragndrop', (editor) => {
urlPath = response.data.thumb_path;
}

tinyMCE.activeEditor.execCommand('mceInsertContent', false, `<img loading="lazy" src="${urlPath}" alt=""/>`);
tinyMCE.activeEditor.execCommand('mceInsertContent', false, `<img loading="lazy" src="${urlPath}" width="${response.data.width}" height="${response.data.height}" alt=""/>`);
}
},
onError: (xhr) => {
Expand Down
8 changes: 4 additions & 4 deletions build/media_source/system/js/fields/joomla-field-media.w-c.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@

if (Joomla.selectedFile.url) {
if (!isElement(editor) && (typeof editor !== 'object')) {
Joomla.editors.instances[editor].replaceSelection(`<img loading="lazy" src="${Joomla.selectedFile.url}" alt=""/>`);
Joomla.editors.instances[editor].replaceSelection(`<img loading="lazy" src="${Joomla.selectedFile.url}" width="${Joomla.selectedFile.width}px" height="${Joomla.selectedFile.height}px" alt="" />`);
} else if (!isElement(editor) && (typeof editor === 'object' && editor.id)) {
window.parent.Joomla.editors.instances[editor.id].replaceSelection(`<img loading="lazy" src="${Joomla.selectedFile.url}" alt=""/>`);
window.parent.Joomla.editors.instances[editor.id].replaceSelection(`<img loading="lazy" src="${Joomla.selectedFile.url}" width="${Joomla.selectedFile.width}px" height="${Joomla.selectedFile.height}px" alt="" />`);
} else {
editor.value = Joomla.selectedFile.url;
editor.value = `${Joomla.selectedFile.url}?width=${Joomla.selectedFile.width}&height=${Joomla.selectedFile.height}`;
fieldClass.updatePreview();
}
}
Expand Down Expand Up @@ -68,7 +68,7 @@
const apiBaseUrl = `${Joomla.getOptions('system.paths').baseFull}index.php?option=com_media&format=json`;

Joomla.request({
url: `${apiBaseUrl}&task=api.files&url=true&path=${data.path}&${Joomla.getOptions('csrf.token')}=1&format=json`,
url: `${apiBaseUrl}&task=api.files&url=true&path=${data.path}&${Joomla.getOptions('csrf.token')}=1`,
zero-24 marked this conversation as resolved.
Show resolved Hide resolved
method: 'GET',
perform: true,
headers: { 'Content-Type': 'application/json' },
Expand Down
3 changes: 1 addition & 2 deletions installation/sql/mysql/base.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,8 +362,7 @@ INSERT INTO `#__extensions` (`package_id`, `name`, `type`, `element`, `folder`,
(0, 'plg_system_webauthn', 'plugin', 'webauthn', 'system', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_workflow_publishing', 'plugin', 'publishing', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_workflow_featuring', 'plugin', 'featuring', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_workflow_notification', 'plugin', 'notification', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_content_imagelazyload', 'plugin', 'imagelazyload', 'content', 0, 0, 1, 0, 1, '', '{}', '', 0, 0);
(0, 'plg_workflow_notification', 'plugin', 'notification', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0);

-- Templates
INSERT INTO `#__extensions` (`package_id`, `name`, `type`, `element`, `folder`, `client_id`, `enabled`, `access`, `protected`, `locked`, `manifest_cache`, `params`, `custom_data`, `ordering`, `state`) VALUES
Expand Down
3 changes: 1 addition & 2 deletions installation/sql/postgresql/base.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,8 +368,7 @@ INSERT INTO "#__extensions" ("package_id", "name", "type", "element", "folder",
(0, 'plg_system_webauthn', 'plugin', 'webauthn', 'system', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_workflow_publishing', 'plugin', 'publishing', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_workflow_featuring', 'plugin', 'featuring', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_workflow_notification', 'plugin', 'notification', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0),
(0, 'plg_content_imagelazyload', 'plugin', 'imagelazyload', 'content', 0, 0, 1, 0, 1, '', '{}', '', 0, 0);
(0, 'plg_workflow_notification', 'plugin', 'notification', 'workflow', 0, 1, 1, 0, 1, '', '{}', '', 0, 0);

-- Templates
INSERT INTO "#__extensions" ("package_id", "name", "type", "element", "folder", "client_id", "enabled", "access", "protected", "locked", "manifest_cache", "params", "custom_data", "ordering", "state") VALUES
Expand Down
56 changes: 43 additions & 13 deletions layouts/joomla/content/full_image.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,47 @@

defined('_JEXEC') or die;

$params = $displayData->params;
$images = json_decode($displayData->images);
use Joomla\Utilities\ArrayHelper;

// When we have no image nothing is going to be displayed.
if (empty($images->image_fulltext))
{
return;
}

$params = $displayData->params;
$images = json_decode($displayData->images);
$imgfloat = empty($images->float_fulltext) ? $params->get('float_fulltext') : $images->float_fulltext;
$image = parse_url($images->image_fulltext);
zero-24 marked this conversation as resolved.
Show resolved Hide resolved
$src = $image['path'];
$attr = [];

parse_str($image['query'], $imageParams);
zero-24 marked this conversation as resolved.
Show resolved Hide resolved

if (count($imageParams))
{
if ($imageParams['width'] !== 'undefined')
{
$attr['width'] = $imageParams['width'] . 'px';
zero-24 marked this conversation as resolved.
Show resolved Hide resolved
}

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($images->image_fulltext, ENT_COMPAT, 'UTF-8'); ?>"
alt="<?php echo htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>"
itemprop="image"/>
<?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; ?>
<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) && !empty($images->image_fulltext_caption)) : ?>
<figcaption class="caption">
<?php echo htmlspecialchars($images->image_fulltext_caption, ENT_COMPAT, 'UTF-8'); ?>
</figcaption>
<?php endif; ?>
</figure>
77 changes: 54 additions & 23 deletions layouts/joomla/content/intro_image.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,59 @@

use Joomla\CMS\Router\Route;
use Joomla\Component\Content\Site\Helper\RouteHelper;
use Joomla\Utilities\ArrayHelper;

$params = $displayData->params;
$images = json_decode($displayData->images);
// When we have no image nothing is going to be displayed.
if (empty($images->image_intro))
{
return;
}

$params = $displayData->params;
$images = json_decode($displayData->images);
$imgfloat = empty($images->float_intro) ? $params->get('float_intro') : $images->float_intro;
$image = parse_url($images->image_intro);
$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_intro)) : ?>
<?php $imgfloat = empty($images->float_intro) ? $params->get('float_intro') : $images->float_intro; ?>
<figure class="float-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?> item-image">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo Route::_(RouteHelper::getArticleRoute($displayData->slug, $displayData->catid, $displayData->language)); ?>">
<img loading="lazy" src="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
itemprop="thumbnailUrl"
/>
</a>
<?php else : ?>
<img loading="lazy" src="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
itemprop="thumbnailUrl"
>
<?php endif; ?>
<?php if (isset($images->image_intro_caption) && $images->image_intro_caption !== '') : ?>
<figcaption class="caption"><?php echo htmlspecialchars($images->image_intro_caption, ENT_COMPAT, 'UTF-8'); ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
<figure class="float-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?> item-image">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo Route::_(RouteHelper::getArticleRoute($displayData->slug, $displayData->catid, $displayData->language)); ?>">
<img
loading="lazy"
src="<?php echo htmlspecialchars($src, ENT_COMPAT, 'UTF-8'); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
itemprop="thumbnailUrl"
<?php echo ArrayHelper::toString($attr); ?>
/>
</a>
<?php else : ?>
<img
loading="lazy"
src="<?php echo htmlspecialchars($src, ENT_COMPAT, 'UTF-8'); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
itemprop="thumbnailUrl"
<?php echo ArrayHelper::toString($attr); ?>
/>
<?php endif; ?>
<?php if (isset($images->image_intro_caption) && !empty($images->image_intro_caption)) : ?>
<figcaption class="caption">
<?php echo htmlspecialchars($images->image_intro_caption, ENT_COMPAT, 'UTF-8'); ?>
</figcaption>
<?php endif; ?>
</figure>
1 change: 0 additions & 1 deletion libraries/src/Extension/ExtensionHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,6 @@ class ExtensionHelper
array('plugin', 'emailcloak', 'content', 0),
array('plugin', 'fields', 'content', 0),
array('plugin', 'finder', 'content', 0),
array('plugin', 'imagelazyload', 'content', 0),
array('plugin', 'joomla', 'content', 0),
array('plugin', 'loadmodule', 'content', 0),
array('plugin', 'pagebreak', 'content', 0),
Expand Down
2 changes: 1 addition & 1 deletion libraries/src/HTML/HTMLHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -688,7 +688,7 @@ public static function image($file, $alt, $attribs = null, $relative = false, $r
}

// Default to lazy you can disable lazyloading by passing $attribs['loading'] = 'eager';
if (!isset($attribs['loading']))
if (is_array($attribs) && !isset($attribs['loading']))
zero-24 marked this conversation as resolved.
Show resolved Hide resolved
{
$attribs['loading'] = 'lazy';
}
Expand Down
56 changes: 0 additions & 56 deletions plugins/content/imagelazyload/imagelazyload.php
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions plugins/content/imagelazyload/imagelazyload.xml
View file
Open in desktop

This file was deleted.

20 changes: 16 additions & 4 deletions plugins/fields/imagelist/tmpl/imagelist.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
*/
defined('_JEXEC') or die;

use Joomla\CMS\Image\Image;

if ($field->value == '')
{
return;
Expand All @@ -31,18 +33,28 @@
continue;
}

$imageFilePath = htmlentities($path, ENT_COMPAT, 'UTF-8', true);

if ($fieldParams->get('directory', '/') !== '/')
{
$buffer .= sprintf('<img loading="lazy" src="images/%s/%s"%s>',
$imageInfo = Image::getImageFileProperties('images/' . $fieldParams->get('directory') . '/' . $imageFilePath);

$buffer .= sprintf('<img loading="lazy" width="%s" height="%s" src="images/%s/%s"%s>',
$imageInfo->width,
$imageInfo->height,
$fieldParams->get('directory'),
htmlentities($path, ENT_COMPAT, 'UTF-8', true),
$imageFilePath,
$class
);
}
else
{
$buffer .= sprintf('<img loading="lazy" src="images/%s"%s>',
htmlentities($path, ENT_COMPAT, 'UTF-8', true),
$imageInfo = Image::getImageFileProperties('images/' . $imageFilePath);

$buffer .= sprintf('<img loading="lazy" width="%s" height="%s" src="images/%s"%s>',
$imageInfo->width,
$imageInfo->height,
$imageFilePath,
$class
);
}
Expand Down
16 changes: 11 additions & 5 deletions plugins/fields/media/tmpl/media.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
*/
defined('_JEXEC') or die;

use Joomla\CMS\Image\Image;

if ($field->value == '')
{
return;
Expand All @@ -26,13 +28,17 @@

if ($value)
{
$path = $value['imagefile'];
$alt = ' alt="' . htmlentities($value['alt_text'], ENT_COMPAT, 'UTF-8', true) . '"';
$alt = ' alt="' . htmlentities($value['alt_text'], ENT_COMPAT, 'UTF-8', true) . '"';
$imagePath = htmlentities($value['imagefile'], ENT_COMPAT, 'UTF-8', true);

if (file_exists($path))
if (file_exists($imagePath))
{
$buffer .= sprintf('<img loading="lazy" src="%s"%s%s>',
htmlentities($path, ENT_COMPAT, 'UTF-8', true),
$imageInfo = Image::getImageFileProperties($imagePath);

$buffer .= sprintf('<img loading="lazy" width="%s" height="%s" src="%s"%s%s>',
$imageInfo->width,
$imageInfo->height,
$imagePath,
$class,
$alt
);
Expand Down