vaakash / git-it-write

A WordPress plugin to publish markdown files present in a Github repository as posts to WordPress automatically.
https://www.aakashweb.com/wordpress-plugins/git-it-write/
GNU General Public License v3.0
45 stars 22 forks source link

Image caption not handled correctly on Import? #46

Closed SienciLabs closed 1 month ago

SienciLabs commented 2 months ago

Hi @vaakash,

Another thing I found recently going through to start posting using your plugin is that it looks to me like the Image captions aren't inheriting the right class for WordPress to process them properly.

You can see on the left is a page that's made locally in WordPress with the caption being used correctly, and on the right is what it looks like after GIW imports the caption from Markdown of ![](/_images/_mill-one/_the-basics/mo_tools_p3_BallvsEnd.jpg "Ballnose mill vs End mill vs V-bit"){.aligncenter .size-medium}

image

To me it looks like it might just be the wrong class of wp-element-caption instead of wp-caption-text but maybe I'm incorrect. In the page editor of the left you can see the caption is there properly, but on the right it isn't

image

SienciLabs commented 1 month ago

I tried replacing wp-element-caption with wp-caption-text here: https://github.com/vaakash/git-it-write/blob/df491fa484055b3a78637efad14ee71580b947a4/includes/parsedown.php#L188 image

and it sort of helped since the caption at least inherited the styling class to center the text underneath the pictures. It didn't help fully though since it seems like ideally you'd have the text within a separate <p> with an ID that matches the upload ID of the picture so that it links up correctly instead of using the figcaption HTML. I'm not sure if this is correct across other WordPress installs, but I think for now I'll just change my install of GIW locally on line 188 to get close enough.

If you're able to sort this out the rest of the way I'd still really appreciate it though

vaakash commented 1 month ago

Hi @SienciLabs,

While implementing this, I was following the standards of the default WordPress theme since those themes set the ideal standards. I verified the same in twenty-twenty and above themes.

image

It looks like the theme you are using is parsing the block differently. Using <figcaption> tag is the semantic way to represent an image's caption. Using p tag is specific to your theme.

There could be multiple variations of this and I would suggest making changes to the theme to mimic the standards or make change to GIW as like you did above.

Thanks, Aakash

SienciLabs commented 1 month ago

Sounds good, I'll close the issue then. Thanks