Problem/Motivation

After creating a node with a body field using the "FBIA transformer" field formatter all non-[h1|h2] header elements do not appear in the Facebook Instant Articles formatted document.

Proposed resolution

Update the default transformer rules to include coverage for h3-h6 if allowable by Facebook Instant Articles specification.

Remaining tasks

Implement.

User interface changes

None.

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#9 Drupal Instant Articles development 2017-07-07 13-28-15.png378.63 KBm4olivei

Comments

Mytko Enko created an issue. See original summary.

Mytko Enko’s picture

Mytko Enko commented
Title: FIBA transformer eliminates non-h1,h2 headers » FBIA transformer eliminates non-h1,h2 headers
Mytko Enko’s picture

Mytko Enko commented
Issue summary: View changes
m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented

Can you post an example chunk of markup that you are putting into your Body field?

Mytko Enko’s picture

Mytko Enko commented

In CKeditor it looks this way:

<p>Some text.&nbsp;
</p>
<h3>Some header
</h3>
<p class="text-align-justify">Another text.
</p>

In html output:

<div property="schema:text" data-quickedit-field-id="node/85/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Some text. </p>

<h3>Some header</h3>

<p class="text-align-justify">Another text.</p>

If it is H2, than it is appears in instant article, but H3, H4 and else are missing.

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented
Assigned: Unassigned » m4olivei
Issue summary: View changes

Thanks! I was able to reproduce it. I've updated the description as it's not specific to RSS (RSS and API use the same code to generate the Instant Articles markup).

Will work out a solution shortly. Part of the complication is that the FBIA PHP SDK does ship with an H3 element, but it does not ship with an H3Rule. Furthurmore, it's not clear from the documentation how many levels of header the Instant Articles format will support.

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented

Filed upstream issue in the FBIA PHP SDK: https://github.com/facebook/facebook-instant-articles-sdk-php/issues/234

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented

So far as I can tell we'll need to wait on the FBIA SDK upstream issue to be resolved. Unless I'm missing something, which is entirely possible. The Facebook folks are usually quick to respond.

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented
Issue summary: View changes
StatusFileSize
new Drupal Instant Articles development 2017-07-07 13-28-15.png378.63 KB

Hum, it appears that h3-h6 are not allowed and should be h2. This is what I get when trying to add h3-h6 using the Facebook Instant Article editor:

So perhaps the solution here is to transform h2-h6 inclusive into h2.

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented
Assigned: m4olivei » Unassigned
Status: Active » Needs review

PR: https://github.com/BurdaMagazinOrg/module-fb_instant_articles/pull/107

@Mytko Enko could you review the above fix? This will transform h3-h6 into h2. Unless Facebook responds with some way to make h3-h6 work, it appears they don't support it.

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented

Confirmed in the upstream issue, only h1-h2 are supported. This is the best we can do, transform h3-h6 into h2.

Mytko Enko’s picture

Mytko Enko commented

Transforming to h2 would perfectly solve the problem. But as for now headers are still missing, there is empty

at the place where headers supposed to appear.

m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented

Did you checkout the branch linked to in the above pull request?

Mytko Enko’s picture

Mytko Enko commented

@m4olivei thanks a lot, #10 solved the problem. H3-h6 headers changed into h2 and now appearing in the instant articles.

sunset_bill’s picture

sunset_bill commented
Status: Needs review » Reviewed & tested by the community
m4olivei’s picture

m4olivei
he/him
Primary language English
Location Grimsby, ON
commented
Status: Reviewed & tested by the community » Fixed

Merged to 8.x-2.x. Thanks!

  • m4olivei authored 2d2b239 on 8.x-2.x 
    Issue #2892435 by m4olivei, Mytko Enko, sunset_bill: FBIA transformer...
  • m4olivei committed 879d4e0 on 8.x-2.x
    Issue #2892435 transform h2-h6 into H2 element in Instant Article....

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.