Html2React breaks images within <figure>

🙋Get Help
#1

I am not sure if something I have done wrong but after an update last week, something broke with my images that are coming from page content and are inside a <figure>

Html2React adds a span around the image:

<figure class="aligncenter size-large">
  <span height="62" width="60" class="css-nd8buu-Container e16qyzlb0">
  <noscript></noscript>
  <img alt="" class="frontity-lazy-image wp-image-8477" loading="lazy" src="/wp-content/uploads/2020/06/phone-icon.svg" height="62">
  </span>
</figure>

The culprit here is the span and more specific, the class css-nd8buu-Container. That basically makes the image to not be visible. See image below. There should be an icon right above the title.
Screenshot 2020-08-18 at 11.42.56

If I use a it like this <div dangerouslySetInnerHTML={{ __html: page.content.rendered }} /> I don’t have the issue.

Is there something I can do to solve this? I am not sure what the core of the issue is.

<img> is wrapped in a <span>
#2

Hi @ni.bonev

Do you have a repo of this project that we can take a look at? Thanks.

#3

Hey @mburridge,

unfortunately it is some client work so the repo is private. If you let me know exactly what to look at, I will provide all the info needed.

#4

Hi @ni.bonev

I’m not sure exactly what to look at. That’s why I would have liked the repo, so I can poke around a bit and see what’s going on.

If it’s not absolutely confidential you can create a private repository on GitHub, which is visible just to people you designate as collaborators.

#5

Hey @mburridge,

it is not super confidential, just private. If you share with me your bitbucket account email, I can add you to the repo.

#6

Doh, I’m not on bitbucket - I’m on github. :man_shrugging: I’ll look at setting up a bitbucket account. :+1:

#10

This issue still persist for me, even with the newest version. Is there any solution to this?

#11

Hey @ni.bonev I’m sorry to hear that you are still stuck with this.

As your repository is private, Could you please replicate the issue you are facing in a codesandbox or isolate it in a different public repo? This way the community will be able to take a look at it and help you :slight_smile:

#12

Hey Pablo,

thanks for your reply. At this point I have spent some extra time and figured out what exactly is the issue so I can outline it below.

Issue is cause when loading html content from a wordpress page. The content is generated using Gutenberg and it is a figure with an image inside it. This is how the html looks in the client, after being processed by Html2React

<div class="wp-block-image is-style-default">
  <figure class="aligncenter size-large is-resized">
    <span height="62" width="60"class="css-nd8buu-Container e16qyzlb0">
      <noscript>
        <img alt="" class="frontity-lazy-image wp-image-8476"
          loading="lazy" height="62"
          src="/wp-content/uploads/2020/06/lightbulb-icon.svg" />
      </noscript>
      <img alt="" class="frontity-lazy-image wp-image-8476" loading="lazy" style="" height="62" src="/wp-content/uploads/2020/06/lightbulb-icon.svg">
    </span>
  </figure>
</div>

The culprit of the issue is the span that gets generated on by image.tsx located in Html2React/processors/image.tsx.

As we can see there on line 20, the container(span) gets added if there is specific width/height specified. However when rendered on the front-end the image doesn’t get displayed. I have seen this technique before of using the padding-bottom and positioning the image absolute, but for some reason I cant figure out it breaks, in this case.

My current solution is to just override some css locally, which is of course not ideal at all.

.wp-block-image {
  margin: 0;

  figure > span {
    padding-bottom: 0;
    img {
      position: relative;
    }
  }
}

That is all I could find so far. Hopefully it helps.

2 Likes
#13

I ran into this same issue trying to integrate my own theme’s block styles. It looks like gutenberg has changed the markup structure for image blocks at some point, and whatever Frontity is doing doesn’t seem to work anymore. I looked at the demo for Frontity Twenty Twenty to try and figure out what I was doing wrong, but it is still using the old markup format.

As an aside, what is the purpose of the height and width attributes on the span?

#15

Hi @cielosky42,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

The frontity.org site is created with Frontity and the content is created with Gutenberg. Here you have the repository in case you want to have a look at it and get some ideas

@luisherranz can you answer this?

#18

The height and width attributes of which span?

#21

Oh, the one added by the image processor: https://github.com/frontity/frontity/blob/e62de0c5681a87c0a510024e93e91687e571ccb4/packages/html2react/processors/image.tsx#L22

I think it was @david the one who add it and I think it had something to do with the padding-bottom hack used to “reserve” the height of the image and avoid a content layout shift when it loads.

@david can we git rid of that? I think we shouldn’t add extra nodes to blocks or we can break it.

@cielosky42 any suggestion about how to solve this?

#22

By the way, we should probably keep the conversation in this FD: Image component: avoid jumps on image load

Also, it seems like the Gutenberg team has not solved this yet on their side, but I haven’t reviewed it lately to be honest: https://github.com/WordPress/gutenberg/issues/20650. It looks like there’s been some progress though.

#23

Thanks for the replies.

I don’t have anything public that I could share. However, I can reproduce locally with the Frontity Twenty Twenty theme right out of the box. Adding images in the block editor results in the images being hidden on the front end due to the styles added by either Frontity or html2react. I was only able to fix by overriding things as suggested by ni.bonev above.

Note that this doesn’t happen on the demo for the Frontity Twenty Twenty theme, because the content there was generated before the change that broke things. You need to create new content in the block editor with a recent WP version to reproduce the issue.

Also, alignwide and alignfull styles can affect the result here. The issue appears with default width and floated images, but not with images that have the “alignwide” and “alignfull” classes.

#24

I don’t know, honestly. That logic was added in a very old PR by @orballo some time ago, for the 1.0 version of Frontity. I would have to look into it.

But, yeah, we should try not to add or remove nodes from Gutenberg blocks.

Image component: Avoid layout shift on image load
#25

If I remember correctly, that logic is needed for the padding hack to work, as in some contents, the image might not arrive inside a <figure>, and <img> needs to have position relative to parent.

Maybe the processor can be improved covering the case where the content has a <figure><img /></figure>, adding the <span> only when <img> is alone, and using <figure> as an absolute parent in the first case.

Image component: Avoid layout shift on image load
#26

I’ve answered you guys here: Image component: avoid jumps on image load