Tag: Sitecore Headless SXA

This is a very common scenario where a background image needs to be set to certain components. Banner’s on any page on your website is a very common place to have a background image.

This blog assumes you have setup the Foundation Head setup or have your own Nextjs project setup implemented using the Sitecore NextJS SDK.

Note: This is not specific to XM Cloud but for any Headless implementation

Foundation Head already has an example on setting the background image using params. In this blog post will explore how this works and where in Sitecore the image can be applied. Will see how this can applied using using OOTB _Background Image item.

To apply image background using rendering parameters to the container see this blog here

Applying background image using rendering field to the components

Background image can be applied to components inheriting the existing __Background Image item to the custom component template.

Create a template for your component. Here I am creating a Banner component-

Inherit _Background Image from /sitecore/templates/Foundation/Experience Accelerator/Presentation/_Background Image

_Background Image has “Background Image” and “Stretch mode” field.

Note that there is a space between the field names, although not recommended but this comes OOTB.

Create a “Banner” JSON Rendering and provide the “Parameters Template”, “Datasource Location” and “Datasource Template” as per your requirement and add this rendering to the “Available Renderings”

Create a Nextjs component in sxastarter project

Note below how the “Background Image” field is set. This is due to the same in field name. Not recommended but this is OOTB.

Experience Editor-

Add a container component in Main placeholder-

Add a newly created component (Banner) in Container placeholder-

Create or select associated content

Once the component is added you should see the button to Add Background Image ( ths is added when the template inherits from _Background Image template.

Select the Background Image and Save-

You should now able to see the background image to component-

Rendering Host-

Reference-

https://doc.sitecore.com/xmc/en/users/xm-cloud/add-a-background-image.html

This is a very common scenario where a background image needs to be set to certain components. Banner’s on any page on your website is a very common place to have a background image.

Note: This is not specific to XM Cloud but for any Headless implementation

Foundation Head already has an example on setting the background image using params. In this blog post will explore how this works and where in Sitecore the image can be applied. Will see how this can applied using Rendering Parameters and using OOTB _Background Image item.

Applying background image using rendering parameters

Background image can be applied to container. If you are using Foundation Head repo you can find this component OOTB.

Thre Container rendering is at following lcoation in Sitecore –

/sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Page Structure/Container

Note Other properties- IsRenderingsWithDynamicPlaceholders and IsRenderingsWithDynamicPlaceholders is set to true

Rendering parameter is located – /sitecore/templates/Feature/JSS Experience Accelerator/Page Structure/Rendering Parameters/Container

Rendering paramter template has the BackgroundImage field. The background image will be set based on the image selected in this field.

How the image is set in Head

Lets see background image set in nextjs (sxastarter) Container.tsx

// image string from the rendering parameters
 let backgroundImage = props.params.BackgroundImage as string;
  let backgroundStyle: { [key: string]: string } = {};
  console.log('backgroundImage1');
  console.log(backgroundImage);
  if (backgroundImage) {
    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
    backgroundImage = `${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()?.replace(/-/gi, '')}`;
    backgroundStyle = {
      backgroundImage: `url('${prefix}${backgroundImage}')`,
    };
  }

  return (
    <div className={`component container-default ${styles}`} id={id ? id : undefined}>

// style applied to <div> having background image
      <div className="component-content" style={backgroundStyle}>
        <div className="row">
          <Placeholder name={phKey} rendering={props.rendering} />
        </div>
      </div>
    </div>
  );
};

Lets see this in working in experience editor and rendering host

In the experience editor main section add a container component.

Once the rendering is added, goto “Edit component properties” and add an background image

Now you are able to see the background image applied ot container and I have added RichText in containerto show the image in background-

Rendering Host displays the image in background-

Nested containers to apply differnt background image or component

If you add only one container the image will be applied to the main section.

To resolve this you can add a container within main container. add mutiple containers as per your requirements. To set the background image to specific container in this example contianer-2 select the parent(i.e. container) and set the image by Editing the Component properties

This should apply the different images for various other sections in the sampe page and since the Container rendering has IsRenderingsWithDynamicPlaceholders property set this should create a unique Id for each container.

Here for example container-2 and container-3 is a child of container-1

Rendering Host displays banckgroung images with there respective components-

Isusue- Here you can see there is a white patch when applied to child container and the image is applied to inner div.

To resolev this apply the image to the outer div instead in container.tsx

return (
    <div className={`component container-default ${styles}`} style={backgroundStyle} id={id ? id : undefined}> // backgroundStyle added
      <div className="component-content"> // backgroundStyle removed
        <div className="row">
          <Placeholder name={phKey} rendering={props.rendering} />
        </div>
      </div>
    </div>
  );

Here you can seee a full width background image

Hope these tips helps.