Html2React breaks images within <figure>

🤗 Dev Talk & Questions
#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.

#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.