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.
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.
## Table of contents

9
plugin.php
View File

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

7
readme.txt
View File

@ -5,7 +5,7 @@ Tags: mastodon, status, feed
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Stable tag: 1.9.11
Stable tag: 1.10
License: MIT
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 ==
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.
== Installation ==
@ -152,6 +154,9 @@ Use the following URL to get your ID:
== 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 =
* fixed typo (thank you @hjek)
* cleaned up code after 1.9.10 release