Image markup differences between post preview and site preview/generation

[bjohn465]

Summary

When previewing a post from the post editor, images are contained within a <p> and the image class (e.g. post__image--full) is applied directly to the <img>. When previewing the entire site and when publishing the site, images within posts are contained within a <figure> and the image class (e.g. post__image--full) are applied to the <figure> and not the <img>.

Steps to Reproduce

1. Create a post
2. Add a title
3. Add an image, leaving the image description blank and adding the "Full Image" class
4. Click the "Preview" button in the post editor
5. Inspect the image that was added to the post. The image should be within a <p> and have the post__image--full class applied directly to it
6. Back in Publii, save the post
7. Click the "Preview your changes" button
8. View the post saved in step 6
9. Inspect the image that was added to the post. The image should be within a <figure> and the post__image--full class applied to the <figure>.

Additional Information

I'm currently using a theme that does not generate responsive images. I don't know if this issue is affected by that.

I've tried this in version 0.33.4 and version 0.28.1 and both versions (with the same theme) exhibit the same issue.

[dziudek]

Hi,

I have checked this issue more deeply - it is causing any issue on your side? I am asking, because some elements generated inside the editor are changing its syntax a little bit, but it is caused by fact that the final syntax is hard to achieve or maintenance inside the editor with its UI. That's why we are improving the syntax directly before code output into the theme.

[bjohn465]

It causes a problem while developing a custom theme, since there's a difference between what the preview generates and what the actual render generates. It should be possible to work around it (perhaps by checking @renderer.previewMode and including a special stylesheet just for previews), but with the workaround comes the potential for styling to get out of sync between the post preview and what's actually generated in a render.

[dziudek]

Ok, I understand your point of view. We will try to solve this issue, but it must wait for the TinyMCE editor update as it is not critical at this moment and I want to avoid redundant work as TinyMCE 5 will require a lot of refactor work.

[dziudek]

Now depends from #429

[bjohn465]

Thanks! I agree, this is not a critical issue.

Also, thanks for your work on Publii!