mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-30 17:14:50 +00:00
Remove low quality image placeholder for lazyload
The original implementation is not robust and make assumptions about a wiki configuration
This commit is contained in:
alistair3149
parent
ac343ce893
commit
0b87fa8641
|
|
@ -71,26 +71,22 @@ class CitizenHooks {
|
|||
* Modified from the Lazyload extension
|
||||
* Looks for thumbnail and swap src to data-src
|
||||
*
|
||||
* @param ThumbnailImage $thumb
|
||||
* @param ThumbnailImage $thumbnail
|
||||
* @param array &$attribs
|
||||
* @param array &$linkAttribs
|
||||
* @return bool
|
||||
*/
|
||||
public static function onThumbnailBeforeProduceHTML( $thumb, &$attribs, &$linkAttribs ) {
|
||||
public static function onThumbnailBeforeProduceHTML( $thumbnail, &$attribs, &$linkAttribs ) {
|
||||
try {
|
||||
$config = MediaWikiServices::getInstance()->getConfigFactory()->makeConfig( 'Citizen' );
|
||||
$lazyloadEnabled = $config->get( 'CitizenEnableLazyload' );
|
||||
$thumbSize = $config->get( 'CitizenThumbnailSize' );
|
||||
} catch ( ConfigException $e ) {
|
||||
wfLogWarning( sprintf( 'Could not get config for "$wgThumbnailSize". Defaulting to "10". %s',
|
||||
$e->getMessage() ) );
|
||||
$lazyloadEnabled = false;
|
||||
$thumbSize = 10;
|
||||
}
|
||||
|
||||
// Replace thumbnail if lazyload is enabled
|
||||
if ( $lazyloadEnabled === true ) {
|
||||
$file = $thumb->getFile();
|
||||
$file = $thumbnail->getFile();
|
||||
|
||||
if ( $file !== null ) {
|
||||
$request = RequestContext::getMain()->getRequest();
|
||||
|
|
@ -110,23 +106,11 @@ class CitizenHooks {
|
|||
$attribs['loading'] = 'lazy';
|
||||
|
||||
$attribs['data-src'] = $attribs['src'];
|
||||
$attribs['data-width'] = $attribs['width'];
|
||||
$attribs['data-height'] = $attribs['height'];
|
||||
|
||||
// Replace src with small size image
|
||||
$attribs['src'] =
|
||||
preg_replace( '#/\d+px-#', sprintf( '/%upx-', $thumbSize ), $attribs['src'] );
|
||||
|
||||
// So that the 10px thumbnail is enlarged to the right size
|
||||
$attribs['width'] = $attribs['data-width'];
|
||||
$attribs['height'] = $attribs['data-height'];
|
||||
|
||||
// Clean up
|
||||
unset( $attribs['data-width'], $attribs['data-height'] );
|
||||
$attribs['src'] = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
|
||||
|
||||
if ( isset( $attribs['srcset'] ) ) {
|
||||
$attribs['data-srcset'] = $attribs['srcset'];
|
||||
unset( $attribs['srcset'] );
|
||||
$attribs['srcset'] = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@ function main() {
|
|||
if ( 'loading' in HTMLImageElement.prototype ) {
|
||||
document.querySelectorAll( 'img.lazy' ).forEach( function ( img ) {
|
||||
img.setAttribute( 'src', img.getAttribute( 'data-src' ) );
|
||||
img.removeAttribute( 'data-src' );
|
||||
|
||||
if ( img.hasAttribute( 'data-srcset' ) ) {
|
||||
img.setAttribute( 'srcset', img.getAttribute( 'data-srcset' ) );
|
||||
img.removeAttribute( 'data-srcset' );
|
||||
}
|
||||
|
||||
img.classList.remove( 'lazy' );
|
||||
|
|
@ -30,9 +32,11 @@ function main() {
|
|||
changes.forEach( function ( change ) {
|
||||
if ( change.isIntersecting ) {
|
||||
change.target.setAttribute( 'src', change.target.getAttribute( 'data-src' ) );
|
||||
change.target.removeAttribute( 'data-src' );
|
||||
|
||||
if ( change.target.hasAttribute( 'data-srcset' ) ) {
|
||||
change.target.setAttribute( 'srcset', change.target.getAttribute( 'data-srcset' ) );
|
||||
change.target.removeAttribute( 'data-srcset' );
|
||||
}
|
||||
|
||||
change.target.classList.remove( 'lazy' );
|
||||
|
|
|
|||
|
|
@ -7,17 +7,15 @@
|
|||
|
||||
.mw-body-content {
|
||||
a.image {
|
||||
img {
|
||||
filter: none;
|
||||
transition: @transition-filter, @transition-transform-quick;
|
||||
}
|
||||
background-color: @base-90;
|
||||
|
||||
.lazy {
|
||||
display: block;
|
||||
background-color: @base-90;
|
||||
filter: blur( 8px ); // Blur the image
|
||||
transform: scale( 1.1 ); // Prevent white edges
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
transition: @transition-opacity-quick;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,9 +23,7 @@
|
|||
@media ( prefers-color-scheme: dark ) {
|
||||
.mw-body-content {
|
||||
a.image {
|
||||
.lazy {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,10 +210,9 @@ figcaption,
|
|||
|
||||
> .thumbinner {
|
||||
> a {
|
||||
transition: @transition-box-shadow-quick !important;
|
||||
transition: @transition-box-shadow-quick;
|
||||
|
||||
&:hover:not( .lazy ):not( .new ) {
|
||||
background: 0 !important;
|
||||
.boxshadow(2);
|
||||
|
||||
img {
|
||||
|
|
@ -229,7 +228,7 @@ figcaption,
|
|||
padding: @margin-side / 2;
|
||||
display: block;
|
||||
background-color: @base-80;
|
||||
transition: @transition-background-quick, @transition-color-quick !important;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@
|
|||
a.image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: fit-content; // Get rid of extra pixels from thumbinner
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -541,12 +541,6 @@
|
|||
"description": "Enable or disable image lazyloading",
|
||||
"descriptionmsg": "citizen-config-enablelazyload",
|
||||
"public": true
|
||||
},
|
||||
"ThumbnailSize": {
|
||||
"value": 10,
|
||||
"description": "Thumbnail size to use for lazy-loading",
|
||||
"descriptionmsg": "citizen-config-thumbnailsize",
|
||||
"public": true
|
||||
}
|
||||
},
|
||||
"manifest_version": 2
|
||||
|
|
|
|||
Loading…
Reference in a new issue