Overview

When creating components with images, we should always use the built in image component.Right now it’s using img tag which works but doesn’t benefit from the image optimization.
Using means we won’t have to worry about image styles anymore.

Proposed resolution

User interface changes

CommentFileSizeAuthor
#7 Drupal-Experience-Builder-08-07-2025_12_46_PM.png181.84 KBnarendrar

Issue fork experience_builder-3539017

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

utkarsh_33 created an issue. See original summary.

utkarsh_33’s picture

utkarsh_33 commented
Issue summary: View changes
utkarsh_33’s picture

utkarsh_33 commented
Issue summary: View changes
utkarsh_33’s picture

utkarsh_33 commented
Title: Use XB Image components for component creation » XB AI: Use XB Image components for component creation

utkarsh_33 opened merge request !1414

utkarsh_33’s picture

utkarsh_33 commented
Status: Active » Needs review

This is ready for review.

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Drupal-Experience-Builder-08-07-2025_12_46_PM.png181.84 KB

Tested manually and required tag is not getting used. Marking as RTBC.
Issue

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Reviewed & tested by the community » Needs work

Needs manual rebase. Please feel free to set back to RTBC.

utkarsh_33’s picture

utkarsh_33 commented
Status: Needs work » Reviewed & tested by the community

Rebased!

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Version: 1.x-dev » 0.x-dev
Status: Reviewed & tested by the community » Fixed

Merged and backported!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

neha_bawankar’s picture

neha_bawankar commented

Scenario

Result

Status

Create a code component for image

 
<Image 
   src={image.src} 
   alt={image.alt || 'Image'} 
   width={image.width || 400} 
   height={image.height || 300} 
   className="w-full h-auto"
 />

PASS

Create a code component that takes input for user profile photo

 
<Image 
  {...previewImage}
   className="object-cover w-full h-full"
/>

PASS

Create a code component form that takes input from user for , name , age and user profile picture

 
<div className="relative w-24 h-24 rounded-full overflow-hidden border-2 border-gray-300">
  <Image
     src={previewImage.src}
     alt={previewImage.alt}
     width={previewImage.width}
     height={previewImage.height}
     className="object-cover w-full h-full"
   />
</div>

PASS

Create code component matching to the image

Only local images are allowed. 

<Image
  src={profileImageSrc}
  alt={profileImageAlt}
  width={150}
  height={150}
  className="rounded-full"
 />

PASS