"is-resized" not supported

🙋Get Help
1

Some images will not load. These images all have the class “is-resized” attached. I believe these are images that have been manually resized in the Gutenberg editor or have been resized manually.

It seems the source of the breaking change is a span class that gets inserted in order to resize the image.

Example piece of code here:

<div class="wp-block-image">
   <figure class="aligncenter is-resized">
      <span height="450" width="613" class="css-jvkklp">
         <noscript>
            <img alt="" sizes="(max-width: 613px) 100vw, 613px" class="frontity-lazy-image wp-image-3395" loading="lazy" height="450" src="https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-1226x900.jpeg" srcSet="https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-1226x900.jpeg 1226w, https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-500x367.jpeg 500w, https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-768x564.jpeg 768w, https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01.jpeg 1265w"/>
         </noscript>
         <img alt="" sizes="(max-width: 613px) 100vw, 613px" class="frontity-lazy-image wp-image-3395" loading="lazy" style="" height="450" src="https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-1226x900.jpeg" srcset="https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-1226x900.jpeg 1226w, https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-500x367.jpeg 500w, https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01-768x564.jpeg 768w, https://www.jackalope.tech/wp-content/uploads/blogs/cardhtml-01.jpeg 1265w">
      </span>
   </figure>
</div>

EDIT: actually looks like the image is coming through correctly but the span is throwing off my css somehow. weird…

EDIT2: I think what’s happening is that the image doesn’t have a height set in my CSS but if I set a height for it, it still breaks as the containing figure element is too tall. It’s size I think must be set by frontity right? I’m still investigating.

Edit3: Yes it def is something to do with frontity because the problem is this massive padding that’s set on the span:

.css-jvkklp {
                /* display:block; */
                position: relative;
               this is the problem >>> padding-bottom: 73.4094616639478%;
            }

            .css-jvkklp noscript > img,.css-jvkklp img {
               also this is part of the issue >>>  position: absolute;
                height: 100%;
                width: 100%;
                position: relative;
            }
        </style>
2

We’ll take a look! Thanks for reporting it.

4

Hey @thedonquixotic, sorry for late response!

Did you manage to fix the problem with the "is-resized" images?
If not, the problem could be in the image processor.

Processors are objects passed to the Html2React component, which is the component that renders the content of posts, pages, etc., and allows to replace HTML elements in the content by any React component. The image processor, apart from changing images by our Image component, it’s also changing the way in which the images are displayed, making them to be able to fill 100% of the width of the container and maintain the aspect ratio. The <span> is nothing more than a trick for images to do that and it is possible that this is affecting your styles.

Apart from that, this processor does nothing more. You can try removing the image processor from libraries.html2react.processors in src/index.js, on your theme, and check if the problem disappears. If so, we’ll take a deeper look to that processor and fix it.

Cheers.

5

@David I was, but the way I did was having to repeat the styling with a sibling nest-layer in the styling. I have some refactoring I need to do to clean up the styling anyway but for now it’s fixed, it’s just not the cleanest code.

6

@thedonquixotic was this a Frontity problem? Should we release a fix?

8

It’s a theme problem. I’d recommend themes (like Mars theme) include similar nested styling stuff to catch issues like this.

9

I see. Could you please share with us what we should include in Mars? Thanks!! :smile:

1 Like
10

Sure thing!

Here’s what my image styling looks like:

.wp-block-image {
  margin: 25px 0 100px 0;
  display: inline;

  &.alignfull {
    width: 100%;

    img {
      width: 100% !important;
    }
  }

  .aligncenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    margin-bottom: 50px;
  }

  .alignright {
    max-width: 40% !important;
    float: right;
    margin-right: 10vw;
    margin-left: 50px;

    
  }

  .alignleft {
    max-width: 35% !important;
    float: left;
    margin-left: 5vw;
    z-index: 50;

  }

  figcaption {
    font-size: 0.7em;
    text-align: center;
    max-width: 50%;
    margin: auto;
    margin-top: 25px;
  }

  figure {
    span.is-resized {
      height: unset !important;
      width: unset !important;
    }
  }
  
}

The most relevant part of is the figure span.is-resized at the bottom.

NOTE: I still need to do some refactoring on this stuff, and these rules will not work for all gutenberg based output, as there has been some changes in how they did nesting and alignment floats for gutenberg. The test frontity json source is using an older version of the gutenberg posts which may lead to some incompatibility. You can see some of my conversation with the dev who made the change here: https://github.com/WordPress/gutenberg/pull/7721

I’ve also posted a request for them to add an additional class to make the style writing easier for headless-wp themes: https://github.com/WordPress/gutenberg/issues/18276

11

Yes, we need to fix that.

I’m thinking we should release a table of versioning between @frontity/gutenberg and Gutenberg itself once we release the package.

Yeah, I saw those and I’m subscribed. Let’s see what they say. Thanks @thedonquixotic :slight_smile: