When I’m overriding the Image component from Builder.io , I seem to be losing the original editing capabilities of an image.
Here you see the original editing of an image:
And here you see mine:
And this is my override setup in builder-registry.ts. I added all the fields otherwise those inputs disappear.
Builder.registerComponent(BuilderImage, {
name: 'Image', // The same name you used in Builder.io
override: true,
inputs: [
// Add any custom inputs if needed, repeating standard ones
{ name: 'image', type: 'file' },
{ name: 'backgroundPosition', type: 'string' },
{ name: 'backgroundSize', type: 'string' },
{ name: 'lazy', type: 'boolean' },
{ name: 'fitContent', type: 'boolean' },
{ name: 'aspectRatio', type: 'number' },
{ name: 'lockAspectRatio', type: 'boolean' },
{ name: 'height', type: 'number' },
{ name: 'width', type: 'number' },
{ name: 'altText', type: 'string' }
],
});
How can I use Next Image without losing editing capabilities in Builder.io ?
1 Like
Hello @jasperkooij ,
If you’re overriding the default Builder image, you’ll need to implement your own logic to ensure the responsiveness and editing capabilities of your custom image component. For reference, you can review the Builder image component code at the following GitHub link:
/** @jsx jsx */
import { jsx } from '@emotion/core';
import React from 'react';
import { BuilderBlock as BuilderBlockComponent } from '../components/builder-block.component';
import { BuilderElement, Builder } from '@builder.io/sdk';
import { BuilderMetaContext } from '../store/builder-meta';
import { withBuilder } from '../functions/with-builder';
import { throttle } from '../functions/throttle';
import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
// Taken from (and modified) the shopify theme script repo
// https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
function removeProtocol(path: string) {
return path.replace(/http(s)?:/, '');
}
function isElementInViewport(el: HTMLElement) {
const rect = el.getBoundingClientRect();
show original
This should provide you with insights into how to maintain the desired functionality in your custom implementation.
Thanks,
