1berry/include-mastodon-feed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added image lazy loading

Browse Source
This commit is contained in:
wolfgang101 2025-05-07 16:19:53 +02:00
parent a9212407f5
commit bcf85ad7a9
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -2,6 +2,8 @@
Plugin that provides an `[include-mastodon-feed]` shortcode to easily integrate mastodon feeds into wordpress pages. Supports personal and tag feeds. Plugin that provides an `[include-mastodon-feed]` shortcode to easily integrate mastodon feeds into wordpress pages. Supports personal and tag feeds.
Account and post images are automatically lazy loaded - post image lazy loading only works with preserveImageAspectRatio set to true.
The plugin is written in PHP and generates native JavaScript to fetch and render the mastodon feed. No special libraries needed. The plugin is written in PHP and generates native JavaScript to fetch and render the mastodon feed. No special libraries needed.
## Table of contents ## Table of contents

9
plugin.php
View File

@ -3,7 +3,7 @@
Plugin Name: Include Mastodon Feed Plugin Name: Include Mastodon Feed
Plugin URI: https://wolfgang.lol/code/include-mastodon-feed-wordpress-plugin Plugin URI: https://wolfgang.lol/code/include-mastodon-feed-wordpress-plugin
Description: Plugin providing [include-mastodon-feed] shortcode Description: Plugin providing [include-mastodon-feed] shortcode
Version: 1.9.11 Version: 1.10
Author: wolfgang.lol Author: wolfgang.lol
Author URI: https://wolfgang.lol Author URI: https://wolfgang.lol
License: MIT License: MIT
@ -333,6 +333,7 @@ function init_scripts() {
let accountImageElem = mastodonFeedCreateElement('img', 'avatar'); let accountImageElem = mastodonFeedCreateElement('img', 'avatar');
accountImageElem.src = account.avatar_static; accountImageElem.src = account.avatar_static;
accountImageElem.loading = 'lazy';
accountLinkElem.addEventListener('mouseover', (event) => { accountLinkElem.addEventListener('mouseover', (event) => {
accountLinkElem.querySelector('.avatar').src = account.avatar; accountLinkElem.querySelector('.avatar').src = account.avatar;
@ -379,15 +380,18 @@ function init_scripts() {
if('image' === options.images.link) { if('image' === options.images.link) {
mediaElemImgLink.href = media.remote_url ?? media.url; mediaElemImgLink.href = media.remote_url ?? media.url;
} }
mediaElemImgLink.style.backgroundImage = 'url("' + imageUrl + '")';
if(null !== media.description) { if(null !== media.description) {
mediaElem.title = media.description; mediaElem.title = media.description;
} }
if(options.images.preserveImageAspectRatio) { if(options.images.preserveImageAspectRatio) {
let mediaElemImgImage = mastodonFeedCreateElement('img'); let mediaElemImgImage = mastodonFeedCreateElement('img');
mediaElemImgImage.src = imageUrl; mediaElemImgImage.src = imageUrl;
mediaElemImgImage.loading = 'lazy';
mediaElemImgLink.appendChild(mediaElemImgImage); mediaElemImgLink.appendChild(mediaElemImgImage);
} }
else {
mediaElemImgLink.style.backgroundImage = 'url("' + imageUrl + '")';
}
mediaElem.appendChild(mediaElemImgLink); mediaElem.appendChild(mediaElemImgLink);
} }
else if('gifv' == media.type) { else if('gifv' == media.type) {
@ -439,6 +443,7 @@ function init_scripts() {
let cardElemImageWrapper = mastodonFeedCreateElement('div', 'image'); let cardElemImageWrapper = mastodonFeedCreateElement('div', 'image');
let cardElemImage = mastodonFeedCreateElement('img'); let cardElemImage = mastodonFeedCreateElement('img');
cardElemImage.src = card.image; cardElemImage.src = card.image;
cardElemImage.loading = 'lazy';
cardElemImageWrapper.appendChild(cardElemImage); cardElemImageWrapper.appendChild(cardElemImage);
cardElemMeta.appendChild(cardElemImageWrapper); cardElemMeta.appendChild(cardElemImageWrapper);
} }

7
readme.txt
View File

@ -5,7 +5,7 @@ Tags: mastodon, status, feed
Requires at least: 6.0 Requires at least: 6.0
Tested up to: 6.8 Tested up to: 6.8
Requires PHP: 7.4 Requires PHP: 7.4
Stable tag: 1.9.11 Stable tag: 1.10
License: MIT License: MIT
License URI: https://directory.fsf.org/wiki/License:Expat License URI: https://directory.fsf.org/wiki/License:Expat
@ -14,6 +14,8 @@ Plugin that provides a shortcode to easily integrate mastodon feeds into wordpre
== Description == == Description ==
Plugin that provides an `[include-mastodon-feed]` shortcode to easily integrate mastodon feeds into wordpress pages. Supports personal and tag feeds. Plugin that provides an `[include-mastodon-feed]` shortcode to easily integrate mastodon feeds into wordpress pages. Supports personal and tag feeds.
Account and post images are automatically lazy loaded - post image lazy loading only works with preserveImageAspectRatio set to true.
The plugin is written in PHP and generates native JavaScript to fetch and render the mastodon feed. No special libraries needed. The plugin is written in PHP and generates native JavaScript to fetch and render the mastodon feed. No special libraries needed.
== Installation == == Installation ==
@ -152,6 +154,9 @@ Use the following URL to get your ID:
== Changelog == == Changelog ==
= 1.10 =
* added image lazy loading for account and post images (post image lazy loading only works with preserveImageAspectRatio set to true)
= 1.9.11 = = 1.9.11 =
* fixed typo (thank you @hjek) * fixed typo (thank you @hjek)
* cleaned up code after 1.9.10 release * cleaned up code after 1.9.10 release