Skip to content

Commit 11ba8be

Browse files
akashmdiuclaude
akashmdiu
and
claude
committed
Fix PDF Gallery thumbnail cropping and responsive column support
- Change object-fit from cover to contain so PDF thumbnails display fully without cropping in both grid and bookshelf layouts - Add render_type template to Elementor columns control for instant preview updates on column change - Make bookshelf layout responsive by detecting breakpoints and rebuilding shelf rows on resize using tablet/mobile column values Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8a38712 commit 11ba8be

7 files changed

Lines changed: 125 additions & 44 deletions

File tree

‎EmbedPress/Elementor/Widgets/Embedpress_Pdf_Gallery.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,7 @@ protected function register_controls()
422422
'selectors' => [
423423
'{{WRAPPER}} .ep-pdf-gallery' => '--ep-gallery-columns: {{VALUE}};',
424424
],
425+
'render_type' => 'template',
425426
'condition' => [
426427
'layout!' => 'carousel',
427428
],

‎assets/css/pdf-gallery.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
.ep-pdf-gallery__thumbnail-wrap img {
105105
width: 100%;
106106
height: 100%;
107-
object-fit: cover;
107+
object-fit: contain;
108108
display: block;
109109
}
110110

@@ -772,7 +772,7 @@
772772
border-radius: 2px 6px 6px 2px;
773773
width: 100%;
774774
height: 100%;
775-
object-fit: cover;
775+
object-fit: contain;
776776
display: block;
777777
position: relative;
778778
z-index: 2;
@@ -783,7 +783,7 @@
783783
display: block;
784784
width: 100%;
785785
height: 100%;
786-
object-fit: cover;
786+
object-fit: contain;
787787
position: relative;
788788
z-index: 2;
789789
}

‎assets/js/blocks.build.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/pdf-gallery.js‎

Lines changed: 58 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -553,25 +553,25 @@
553553
var Bookshelf = {
554554
DEFAULT_BOOKS_PER_SHELF: 5,
555555

556-
init: function (gallery) {
557-
var carousel = gallery.querySelector('.ep-pdf-gallery__carousel');
558-
if (!carousel) return;
559-
560-
var track = carousel.querySelector('.ep-pdf-gallery__carousel-track');
561-
if (!track) return;
562-
563-
var items = Array.prototype.slice.call(track.querySelectorAll('.ep-pdf-gallery__item'));
564-
if (!items.length) return;
556+
_getPerShelf: function (gallery) {
557+
var w = window.innerWidth;
558+
if (w <= 767) {
559+
return parseInt(gallery.dataset.columnsMobile, 10) || 1;
560+
} else if (w <= 1024) {
561+
return parseInt(gallery.dataset.columnsTablet, 10) || 2;
562+
}
563+
return parseInt(gallery.dataset.columns, 10) || this.DEFAULT_BOOKS_PER_SHELF;
564+
},
565565

566-
// Get shelf style from gallery data attribute
567-
var shelfStyle = gallery.dataset.shelfStyle || 'dark-wood';
566+
_buildRows: function (gallery, container, items) {
567+
var perShelf = this._getPerShelf(gallery);
568568

569-
// Get books per shelf from columns setting
570-
var perShelf = parseInt(gallery.dataset.columns, 10) || this.DEFAULT_BOOKS_PER_SHELF;
569+
// Store current perShelf to avoid unnecessary rebuilds
570+
if (container._lastPerShelf === perShelf) return;
571+
container._lastPerShelf = perShelf;
571572

572-
// Create bookshelf container replacing carousel
573-
var container = document.createElement('div');
574-
container.className = 'ep-pdf-gallery__bookshelf-container';
573+
// Clear existing rows
574+
container.innerHTML = '';
575575

576576
// Chunk items into rows
577577
for (var i = 0; i < items.length; i += perShelf) {
@@ -585,9 +585,49 @@
585585

586586
container.appendChild(row);
587587
}
588+
},
588589

589-
// Replace carousel with bookshelf container
590-
carousel.parentNode.replaceChild(container, carousel);
590+
init: function (gallery) {
591+
var carousel = gallery.querySelector('.ep-pdf-gallery__carousel');
592+
var container = gallery.querySelector('.ep-pdf-gallery__bookshelf-container');
593+
var items;
594+
595+
if (carousel) {
596+
var track = carousel.querySelector('.ep-pdf-gallery__carousel-track');
597+
if (!track) return;
598+
599+
items = Array.prototype.slice.call(track.querySelectorAll('.ep-pdf-gallery__item'));
600+
if (!items.length) return;
601+
602+
// Create bookshelf container replacing carousel
603+
container = document.createElement('div');
604+
container.className = 'ep-pdf-gallery__bookshelf-container';
605+
carousel.parentNode.replaceChild(container, carousel);
606+
} else if (container) {
607+
items = Array.prototype.slice.call(container.querySelectorAll('.ep-pdf-gallery__item'));
608+
if (!items.length) return;
609+
} else {
610+
return;
611+
}
612+
613+
// Store items reference for resize rebuilds
614+
gallery._bookshelfItems = items;
615+
gallery._bookshelfContainer = container;
616+
617+
var self = this;
618+
self._buildRows(gallery, container, items);
619+
620+
// Rebuild rows on resize for responsive columns
621+
if (!gallery._bookshelfResizeListener) {
622+
var resizeTimer;
623+
gallery._bookshelfResizeListener = function () {
624+
clearTimeout(resizeTimer);
625+
resizeTimer = setTimeout(function () {
626+
self._buildRows(gallery, gallery._bookshelfContainer, gallery._bookshelfItems);
627+
}, 150);
628+
};
629+
window.addEventListener('resize', gallery._bookshelfResizeListener);
630+
}
591631
}
592632
};
593633

‎src/Blocks/pdf-gallery/src/components/edit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ function Edit(props) {
408408
) : (
409409
<canvas
410410
ref={function (el) { canvasRefs.current[index] = el; }}
411-
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
411+
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
412412
/>
413413
)}
414414
{showPlayButton !== false && (

‎static/css/pdf-gallery.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
.ep-pdf-gallery__thumbnail-wrap img {
105105
width: 100%;
106106
height: 100%;
107-
object-fit: cover;
107+
object-fit: contain;
108108
display: block;
109109
}
110110

@@ -772,7 +772,7 @@
772772
border-radius: 2px 6px 6px 2px;
773773
width: 100%;
774774
height: 100%;
775-
object-fit: cover;
775+
object-fit: contain;
776776
display: block;
777777
position: relative;
778778
z-index: 2;
@@ -783,7 +783,7 @@
783783
display: block;
784784
width: 100%;
785785
height: 100%;
786-
object-fit: cover;
786+
object-fit: contain;
787787
position: relative;
788788
z-index: 2;
789789
}

‎static/js/pdf-gallery.js‎

Lines changed: 58 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -553,25 +553,25 @@
553553
var Bookshelf = {
554554
DEFAULT_BOOKS_PER_SHELF: 5,
555555

556-
init: function (gallery) {
557-
var carousel = gallery.querySelector('.ep-pdf-gallery__carousel');
558-
if (!carousel) return;
559-
560-
var track = carousel.querySelector('.ep-pdf-gallery__carousel-track');
561-
if (!track) return;
562-
563-
var items = Array.prototype.slice.call(track.querySelectorAll('.ep-pdf-gallery__item'));
564-
if (!items.length) return;
556+
_getPerShelf: function (gallery) {
557+
var w = window.innerWidth;
558+
if (w <= 767) {
559+
return parseInt(gallery.dataset.columnsMobile, 10) || 1;
560+
} else if (w <= 1024) {
561+
return parseInt(gallery.dataset.columnsTablet, 10) || 2;
562+
}
563+
return parseInt(gallery.dataset.columns, 10) || this.DEFAULT_BOOKS_PER_SHELF;
564+
},
565565

566-
// Get shelf style from gallery data attribute
567-
var shelfStyle = gallery.dataset.shelfStyle || 'dark-wood';
566+
_buildRows: function (gallery, container, items) {
567+
var perShelf = this._getPerShelf(gallery);
568568

569-
// Get books per shelf from columns setting
570-
var perShelf = parseInt(gallery.dataset.columns, 10) || this.DEFAULT_BOOKS_PER_SHELF;
569+
// Store current perShelf to avoid unnecessary rebuilds
570+
if (container._lastPerShelf === perShelf) return;
571+
container._lastPerShelf = perShelf;
571572

572-
// Create bookshelf container replacing carousel
573-
var container = document.createElement('div');
574-
container.className = 'ep-pdf-gallery__bookshelf-container';
573+
// Clear existing rows
574+
container.innerHTML = '';
575575

576576
// Chunk items into rows
577577
for (var i = 0; i < items.length; i += perShelf) {
@@ -585,9 +585,49 @@
585585

586586
container.appendChild(row);
587587
}
588+
},
588589

589-
// Replace carousel with bookshelf container
590-
carousel.parentNode.replaceChild(container, carousel);
590+
init: function (gallery) {
591+
var carousel = gallery.querySelector('.ep-pdf-gallery__carousel');
592+
var container = gallery.querySelector('.ep-pdf-gallery__bookshelf-container');
593+
var items;
594+
595+
if (carousel) {
596+
var track = carousel.querySelector('.ep-pdf-gallery__carousel-track');
597+
if (!track) return;
598+
599+
items = Array.prototype.slice.call(track.querySelectorAll('.ep-pdf-gallery__item'));
600+
if (!items.length) return;
601+
602+
// Create bookshelf container replacing carousel
603+
container = document.createElement('div');
604+
container.className = 'ep-pdf-gallery__bookshelf-container';
605+
carousel.parentNode.replaceChild(container, carousel);
606+
} else if (container) {
607+
items = Array.prototype.slice.call(container.querySelectorAll('.ep-pdf-gallery__item'));
608+
if (!items.length) return;
609+
} else {
610+
return;
611+
}
612+
613+
// Store items reference for resize rebuilds
614+
gallery._bookshelfItems = items;
615+
gallery._bookshelfContainer = container;
616+
617+
var self = this;
618+
self._buildRows(gallery, container, items);
619+
620+
// Rebuild rows on resize for responsive columns
621+
if (!gallery._bookshelfResizeListener) {
622+
var resizeTimer;
623+
gallery._bookshelfResizeListener = function () {
624+
clearTimeout(resizeTimer);
625+
resizeTimer = setTimeout(function () {
626+
self._buildRows(gallery, gallery._bookshelfContainer, gallery._bookshelfItems);
627+
}, 150);
628+
};
629+
window.addEventListener('resize', gallery._bookshelfResizeListener);
630+
}
591631
}
592632
};
593633

0 commit comments

Comments
 (0)