Image Captions Importing above image, instead of below

[bdolor]

Importing with the OpenStax plugins - image captions appear as paragraph text above the picture rather as caption text below the picture. This seems to be related to CSS from the original OpenStax text. When imported from OpenStax the caption code looks like this

When a caption is created directly within https://opentextbc.ca/ the HTML Caption tag looks like [caption id="attachment_2385" align="aligncenter" width="689"]

[bdolor]

The order of the image caption is a result of it being structured that way in the HTML of the import file:

We can see this reflected once it's been imported into PB:

The HTML structure in the web version of their book is different than that in the zip file:
https://cnx.org/contents/Ax2o07Ul@9.95:_H3EiPTs@4/Displacement

We can treat this as garbage in/garbage out or take a dive into DOM manipulation.

[lucwrite]

I think we should treat all of these style elements including bold as garbage in garbage out. For a couple reasons:

1. The new CSS feature in PB
2. The different style sheets applied to different OpenStax books. I have noticed differences between Chemistry and Physics for example.

[bdolor]

sure, but this is not specifically a CSS issue. It's the HTML structure.

[lucwrite]

In that case, we should have image captions imported to the captions caption id="attachment

[bdolor]

The HTML markup in the zip file is ordered like this (which is how it presents in PB):

<figure>
<figcaption>
<img>

The HTML markup on the cnx.org site:

<figure>
<img>
<figcaption>

so, adding caption id="attachment won't achieve the desired effect of captions below the image. The order is different for some reason. Something you may want to bring up with OpenStax? Or if we're going to take responsibility for their markup, then we would need to dive into DOM manipulation.

[lucwrite]

So it looks like this markup is new to HTML 5. Therefore it would not make sense to use DOM to change their markup on import. https://www.w3schools.com/tags/tag_figcaption.asp. What is your and PB roadmap re HTML5?

[bdolor]

html 5 doesn't have a role to play in the placement of the caption in this particular instance.

[lucwrite]

OK confused are we talking about changing the tag from

to caption id="attachment.. The problem from my perspective is not so much about placement but rather about the caption not acting as a caption - smaller font.

[lucwrite]

Ok I think it would NOT be a good use of your time to make this change. It does seem to be different based on books, Chemistry not as impacted as much as Physics and as the caption is centred this should be enough considering the work involved. TL;DR Low priority we will reach our to OpenStax.

[josieg]

Commenting because I'd like to revisit this issue during sprint planning next week, even if just to confirm why we will not be fixing this issue.

Also, I'd like to add that Figure labels/numbers (e.g., Figure 1) are removed from the "captions" during import, as you can see in previous screenshots. My guess is CNX has some sort of automatic numbering which means the figure labels are not part of the html?

[greatislander]

👋 Just FYI, we are switching image markup to HTML5 in Pressbooks 5.6.0 (due end of this month):

• Use HTML5 figure and figcaption elements (fixes #193, fixes pressbooks/pressbooks#342) pressbooks/pressbooks-book#243

This is a core WordPress feature we needed to enable; just needed to make sure it didn't cause issues with existing theme CSS. The output of the [caption] shortcode becomes:

<figure>
  <img />
  <figcaption></figcaption>
</figure>

This won't necessarily impact your approach but thought I'd let you know in case you hadn't spotted that PR come through.

[bdolor]

will reopen as a feature request