"is-resized" not supported by Frontity. Please support!

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>

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

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.

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