canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix image gallery deduplication for short suffixes 

- Handle _l, _m, _s size suffixes in addition to _large, _medium, _small
- Prevents carousel from showing duplicate images in different sizes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-01-21 20:45:03 +00:00
parent 61654601ff
commit cc3baf8c29
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Map/markerManager.js
View File

@ -789,9 +789,10 @@ function collectGalleryImages(post) {
const seen = new Set(); const seen = new Set();
const seenBase = new Set(); const seenBase = new Set();
// Get base filename without size suffix to detect same image in different sizes // Get base filename without size suffix to detect same image in different sizes
// Handles both long (_large, _medium, _small) and short (_l, _m, _s) variants
const getBase = (url) => { const getBase = (url) => {
if (!url) return ''; if (!url) return '';
return url.replace(/[-_](large|medium|small|thumb|thumbnail)(\.[^.]+)?$/i, '$2') return url.replace(/[-_](large|medium|small|thumb|thumbnail|l|m|s)(\.[^.]+)?$/i, '$2')
.replace(/\?.*$/, ''); // Remove query params .replace(/\?.*$/, ''); // Remove query params
}; };
const add = (value) => { const add = (value) => {

5
src/components/Posts/PostDetailModal.jsx
View File

@ -585,14 +585,15 @@ export default function PostDetailModal({ post, onClose, onPostUpdated, onPostDe
const config = getCategoryConfig(post?.category); const config = getCategoryConfig(post?.category);
const author = post?.author || post?.username || post?.source_name || t("common.anon"); const author = post?.author || post?.username || post?.source_name || t("common.anon");
// Media gallery - dedupe by base filename (ignore size variants like _large, _medium, _small) // Media gallery - dedupe by base filename (ignore size variants like _large, _medium, _small, _l, _m, _s)
const gallery = useMemo(() => { const gallery = useMemo(() => {
const seen = new Set(); const seen = new Set();
const seenBase = new Set(); const seenBase = new Set();
const images = []; const images = [];
const getBase = (url) => { const getBase = (url) => {
// Remove size suffixes to detect same image in different sizes // Remove size suffixes to detect same image in different sizes
return url.replace(/[-_](large|medium|small|thumb|thumbnail)(\.[^.]+)?$/i, '$2') // Handles both long (_large, _medium, _small) and short (_l, _m, _s) variants
return url.replace(/[-_](large|medium|small|thumb|thumbnail|l|m|s)(\.[^.]+)?$/i, '$2')
.replace(/\?.*$/, ''); // Remove query params .replace(/\?.*$/, ''); // Remove query params
}; };
const add = (url) => { const add = (url) => {