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’m out …</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:
- 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?
- 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=attachmentand thearia-describedbywhatever that is (screen reader info??) … and probably theclass="size-full wp-image-15711"? - 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
David