wp: handle images in .wp-caption div

packages/mg-wp-api/lib/processor.js

@@ -11,6 +11,7 @@ import {htmlToText} from 'html-to-text';
 import {_base as debugFactory} from '@tryghost/debug';
 import SimpleDom from 'simple-dom';
 import galleryCard from '@tryghost/kg-default-cards/lib/cards/gallery.js';
+import imageCard from '@tryghost/kg-default-cards/lib/cards/image.js';
 
 const serializer = new SimpleDom.HTMLSerializer(SimpleDom.voidMap);
 
@@ -407,6 +408,35 @@ const processContent = async ({html, excerptSelector, featureImageSrc = false, f
         }
     });
 
+    $html('div.wp-caption').each((i, el) => {
+        const hasImage = $(el).find('img').length > 0;
+
+        if (!hasImage) {
+            return;
+        }
+
+        const imgSrc = $(el).find('img').attr('src');
+        const imgAlt = $(el).find('img').attr('alt');
+
+        const hasCaption = $(el).find('.wp-caption-text').length > 0;
+        const imgCaption = hasCaption ? $(el).find('.wp-caption-text').text() : '';
+
+        let cardOpts = {
+            env: {dom: new SimpleDom.Document()},
+            payload: {
+                src: imgSrc,
+                alt: imgAlt,
+                caption: imgCaption
+            }
+        };
+
+        if (hasCaption) {
+            cardOpts.payload.caption = imgCaption;
+        }
+
+        $(el).replaceWith(serializer.serialize(imageCard.render(cardOpts)));
+    });
+
     $html('img').each((i, img) => {
         $(img).removeAttr('decoding');
         $(img).removeAttr('data-id');

packages/mg-wp-api/test/process.test.js

@@ -59,7 +59,7 @@ describe('Process WordPress REST API JSON', function () {
         expect(data.profile_image).toEqual('https://secure.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=500&d=blank&r=g');
         expect(data.website).toEqual('https://example.com');
     });
-    
+
     test('Will not add invalid user website URL', function () {
         const user = processor.processAuthor({
             id: 29,
@@ -72,7 +72,7 @@ describe('Process WordPress REST API JSON', function () {
         expect(user.data).toHaveProperty('name');
         expect(user.data).not.toHaveProperty('website');
     });
-    
+
     test('Will scale user avatars', function () {
         const user = processor.processAuthor({
             id: 29,
@@ -403,6 +403,14 @@ describe('Process WordPress HTML', function () {
         expect(processed).toEqual('<img src="https://mysite.com/wp-content/uploads/2020/06/image.png"><img src="https://mysite.com/wp-content/uploads/2020/06/another-image.png">');
     });
 
+    test('Can handle images in .wp-caption div', async function () {
+        const html = `<div id="attachment_437" style="width: 510px" class="wp-caption aligncenter"><a href="http:/example.com/wp-content/uploads/2015/04/photo.jpg"><img aria-describedby="caption-attachment-437" class="wp-image-437" src="http:/example.com/wp-content/uploads/2015/04/photo.jpg" alt="My photo alt" width="500" height="355" data-wp-pid="437" /></a><p id="caption-attachment-437" class="wp-caption-text">My photo caption</p></div>`;
+
+        const processed = await processor.processContent({html});
+
+        expect(processed).toEqual('<figure class="kg-card kg-image-card kg-card-hascaption"><img src="http:/example.com/wp-content/uploads/2015/04/photo.jpg" class="kg-image" alt="My photo alt" loading="lazy"><figcaption>My photo caption</figcaption></figure>');
+    });
+
     test('Can find & remove links around images that link to the same image', async function () {
         const html = `<a href="https://mysite.com/wp-content/uploads/2020/06/image.png"><img src="https://mysite.com/wp-content/uploads/2020/06/image-300x200.png" /></a><a href="https://mysite.com"><img src="https://mysite.com/wp-content/uploads/2020/06/image-300x200.png" /></a><a href="https://mysite.com/wp-content/uploads/2020/06/another-image.png"><img src="https://mysite.com/wp-content/uploads/2020/06/image-300x200.png" /></a>`;