Wordpress image import - not responsive

Images imported via Ghost WP plugin do not appear to be responsive.

I’m running a local copy of Ghost (5.75.2) and the Dawn theme while preparing to migrate my Wordpress site. It’s a large site so I separately exported the JSON file (using Ghost plugin) and the images. I have modified the JSON file to now correctly display several thousand footnotes (thanks @Cathy_Sarisky for .littlenote suggestion which works well) and made some necessary tag changes.

I’ve now tried importing a subset of the 1 Gb of images. They are not responsive, overlap the theme margin on a desktop and are ridiculously large on a phone (at least when previewed on the local installation).

The issue appears to be the style in the <div> HTML tag at the start of the image.

<div id="attachment_15711" style="width: 810px" class="wp-caption aligncenter"><a href="LINK"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-15711" class="size-full wp-image-15711" src="LINK" srcset="LINKS" sizes="(max-width: 800px) 100vw, 800px" /></a><p id="caption-attachment-15711" class="wp-caption-text">In when I&#8217;m out &#8230;</p>

All the LINK(S) stuff works as expected … I removed them for brevity.

If I remove style="width: 810px" the Ghost preview looks correct on desktop, phones and in emails.

I have three questions:

  1. Is this a known issue with WP Ghost plugin imports or perhaps related to the theme/plugin (Simple Lightbox I think) used to display the images on WP?
  2. Assuming one or other of above and I write a regex to correct the HTML code in the JSON file before import, I presume I can also strip out the id=attachment and the aria-describedby whatever that is (screen reader info??) … and probably the class="size-full wp-image-15711"?
  3. The hyperlinked image redirects the browser to a page just showing the image. The only ‘escape’ is the back button on the browser, clicking elsewhere on the screen does not work. Is there a more elegant (and simple!) way to get a more Ghost-like display?

With thanks

1 Like

Whatever the cause, stripping out the style="width: 810px" and making a few other tweaks to the code fixed the non-responsive issue.