self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-09-16 09:16:27 +02:00
Code Issues Releases Activity

Letting lightbox load the original image if there is not available thumbnail #951

Browse Source
This commit is contained in:
Patrik J. Braun
2025-09-13 12:45:37 +02:00
parent 0806cbd2d8
commit 875457003c
2 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/config/public/ClientConfig.ts
View File

@@ -968,6 +968,14 @@ export class ClientLightboxConfig {
})
loadFullImageOnZoom: boolean = true;
@ConfigProperty({
tags: {
name: $localize`Load full image if previews are too small`,
priority: ConfigPriority.advanced
},
description: $localize`When enabled, the lightbox will load the full resolution image if all available preview thumbnails are too small for the current view.`,
})
loadFullImageIfPreviewTooSmall: boolean = true;
@ConfigProperty({
tags: {

28
src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts
View File

@@ -223,6 +223,23 @@ export class GalleryLightboxMediaComponent implements OnChanges {
}
}
/**
* Checks if the available preview size is adequate for lightbox display.
* Returns false if the preview would be significantly smaller than the lightbox area.
*/
private isPreviewAdequateForLightbox(): boolean {
if (!Config.Gallery.Lightbox.loadFullImageIfPreviewTooSmall) {
return true;
}
const selectedSize = this.gridMedia.getMediaSize(window.innerWidth, window.innerHeight);
const minDisplaySize = Math.min(window.innerWidth, window.innerHeight);
// If the selected preview size is less than 50% of the minimum display dimension,
// consider it inadequate for lightbox display (e.g., 240px on a 1080p screen)
return selectedSize >= minDisplaySize * 0.5;
}
private loadPhoto(): void {
if (!this.gridMedia || !this.loadMedia || !this.gridMedia.isPhoto()) {
return;
@@ -233,8 +250,15 @@ export class GalleryLightboxMediaComponent implements OnChanges {
Config.Gallery.Lightbox.loadFullImageOnZoom === false
) {
if (this.photo.src == null) {
this.photo.src = this.gridMedia.getBestSizedMediaPath(window.innerWidth, window.innerHeight);
this.photo.isBestFit = true;
// Check if the preview size is adequate for lightbox display
// If not, load the original instead of a tiny preview
if (this.isPreviewAdequateForLightbox()) {
this.photo.src = this.gridMedia.getBestSizedMediaPath(window.innerWidth, window.innerHeight);
this.photo.isBestFit = true;
} else {
this.photo.src = this.gridMedia.getOriginalMediaPath();
this.photo.isBestFit = false;
}
}
// on zoom load high res photo
} else if (this.photo.isBestFit === true || this.photo.src == null) {