mg-wp-xml: Add support for [gallery] shortcodes

PaulAdamDavis · PaulAdamDavis · commit 7043097e06b7 · 2025-02-24T19:45:59.000Z
diff --git a/packages/mg-wp-api/lib/processor.js b/packages/mg-wp-api/lib/processor.js
@@ -173,8 +173,9 @@ const processExcerpt = (html, excerptSelector = false) => {
     }
 };
 
-const processShortcodes = async ({html}) => {
+const processShortcodes = async ({html, options}) => {
     const shortcodes = new Shortcodes();
+    const attachments = options?.attachments ?? null;
 
     shortcodes.add('vc_btn', ({attrs}) => {
         let buttonHref = attrs?.link ?? false;
@@ -252,6 +253,47 @@ const processShortcodes = async ({html}) => {
         return `<iframe src="${attrs.src}" height="${attrs.height}" style="border:0; width: 100%;" loading="lazy"></iframe>`;
     });
 
+    if (attachments && attachments.length) {
+        shortcodes.add('gallery', ({attrs}) => {
+            // Convert `ids` param to array of images
+            const images = attrs?.ids.split(',').map((i) => {
+                let idInt = parseInt(i.trim());
+                let foundAttachment = _.find(attachments, (item) => {
+                    return parseInt(item.id) === idInt;
+                });
+                return foundAttachment;
+            });
+
+            let items = [];
+
+            images.forEach((item) => {
+                items.push({
+                    fileName: basename(item.url),
+                    src: item.url,
+                    alt: item.alt,
+                    width: item.width,
+                    height: item.height
+                });
+            });
+
+            items = items.map((item, index) => {
+                return {
+                    ...item,
+                    row: Math.floor(index / 3)
+                };
+            });
+
+            let cardOpts = {
+                env: {dom: new SimpleDom.Document()},
+                payload: {
+                    images: items
+                }
+            };
+
+            return serializer.serialize(galleryCard.render(cardOpts));
+        });
+    }
+
     shortcodes.add('sourcecode', ({attrs, content}) => {
         let captionString = (attrs?.title) ? `<figcaption>${attrs.title}</figcaption>` : '';
         let classString = (attrs?.language) ? `language-${attrs.language}` : '';
@@ -325,7 +367,7 @@ const processContent = async ({html, excerptSelector, featureImageSrc = false, f
         allowRemoteScraping = true;
     }
 
-    html = await processShortcodes({html});
+    html = await processShortcodes({html, options});
 
     // Drafts can have empty post bodies
     if (!html) {
diff --git a/packages/mg-wp-api/test/process.test.js b/packages/mg-wp-api/test/process.test.js
@@ -766,6 +766,63 @@ const hello () => {
 
         expect(convertedHtml).toEqual('<!--kg-card-begin: html--><audio controls src="/path/to/file.mp3" preload="metadata"></audio><!--kg-card-end: html--> <!--kg-card-begin: html--><audio controls src="/path/to/file.ogg" preload="metadata"></audio><!--kg-card-end: html-->');
     });
+
+    test('Can handle gallery shortcodes', async function () {
+        let html = `[gallery ids="123,234,345,456" columns="4" size="full"]`;
+
+        let options = {
+            attachments: [
+                {
+                    id: '123',
+                    url: 'https://example.com.com/wp-content/uploads/2025/02/24/123.jpg',
+                    description: null,
+                    alt: 'Image 123 alt text',
+                    width: 1200,
+                    height: 800
+                },
+                {
+                    id: '234',
+                    url: 'https://example.com.com/wp-content/uploads/2025/02/24/234.jpg',
+                    description: null,
+                    alt: '',
+                    width: 1200,
+                    height: 800
+                },
+                {
+                    id: '345',
+                    url: 'https://example.com.com/wp-content/uploads/2025/02/24/345.jpg',
+                    description: null,
+                    alt: '',
+                    width: 1200,
+                    height: 800
+                },
+                {
+                    id: '456',
+                    url: 'https://example.com.com/wp-content/uploads/2025/02/24/456.jpg',
+                    description: null,
+                    alt: '',
+                    width: 1200,
+                    height: 800
+                }
+            ]
+        };
+
+        let convertedHtml = await processor.processShortcodes({html, options});
+
+        expect(convertedHtml).toEqual('<figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://example.com.com/wp-content/uploads/2025/02/24/123.jpg" width="1200" height="800" loading="lazy" alt="Image 123 alt text"></div><div class="kg-gallery-image"><img src="https://example.com.com/wp-content/uploads/2025/02/24/234.jpg" width="1200" height="800" loading="lazy" alt></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://example.com.com/wp-content/uploads/2025/02/24/345.jpg" width="1200" height="800" loading="lazy" alt></div><div class="kg-gallery-image"><img src="https://example.com.com/wp-content/uploads/2025/02/24/456.jpg" width="1200" height="800" loading="lazy" alt></div></div></div></figure>');
+    });
+
+    test('Will skip gallery shortcodes if no attachments avaliable', async function () {
+        let html = `[gallery ids="123,234,345,456" columns="4" size="full"]`;
+
+        let options = {
+            attachments: []
+        };
+
+        let convertedHtml = await processor.processShortcodes({html, options});
+
+        expect(convertedHtml).toEqual('[gallery ids="123,234,345,456" columns="4" size="full"]');
+    });
 });
 
 describe('wpCDNToLocal', function () {
diff --git a/packages/mg-wp-xml/lib/process.js b/packages/mg-wp-xml/lib/process.js
@@ -103,7 +103,7 @@ const processTags = ($wpTerms) => {
     return categories.concat(tags);
 };
 
-const preProcessContent = async ({html}) => { // eslint-disable-line no-shadow
+const preProcessContent = async ({html, options}) => { // eslint-disable-line no-shadow
     // Drafts can have empty post bodies
     if (!html) {
         return html;
@@ -126,7 +126,7 @@ const preProcessContent = async ({html}) => { // eslint-disable-line no-shadow
     html = $html.html();
 
     // Convert shortcodes here to that they don't accidently get wrapped in <p> tags by MarkdownIt
-    html = await MgWpAPI.process.processShortcodes({html});
+    html = await MgWpAPI.process.processShortcodes({html, options});
 
     return html;
 };
@@ -187,7 +187,8 @@ const processPost = async ($post, users, options) => {
     };
 
     post.data.html = await preProcessContent({
-        html: $($post).children('content\\:encoded').text()
+        html: $($post).children('content\\:encoded').text(),
+        options
     });
 
     const mdParser = new MarkdownIt({
@@ -291,6 +292,8 @@ const processAttachment = async ($post) => {
     let attachmentDesc = $($post).find('content\\:encoded').text() || null;
     let attachmentAlt = null;
 
+    let meta = await processWPMeta($post);
+
     $($post).find('wp\\:postmeta').each((i, row) => {
         let metaKey = $(row).find('wp\\:meta_key').text();
         let metaVal = $(row).find('wp\\:meta_value').text();
@@ -304,7 +307,9 @@ const processAttachment = async ($post) => {
         id: attachmentKey,
         url: attachmentUrl,
         description: attachmentDesc,
-        alt: attachmentAlt
+        alt: attachmentAlt,
+        width: meta?._wp_attachment_metadata?.width,
+        height: meta?._wp_attachment_metadata?.height
     };
 };
 
