Customize Out of the Box Container Component to add two additional background image fields to author images for mobile and tablet devices.

[Sayali1]

I have a client requirement where I need to add two more background image fields in the container component which is referring to core/wcm/components/container/v1/container as sling:resourceSuperType. The two image fields are required fields and the image authored in those fields should load on page as backgroung image on the page. The out of the box container backgroundImageAsset field refers to sling:resourceType cq/gui/components/authoring/dialog/fileuplod. How can I achieve this requirement where I add two more required image fields to the container and display those images as backgroung images.

[ksh_ingole7 · Accepted solution]

Hi @Sayali1 

1. Create a New Component: Create a new component that extends the core Box Container component. This new component will allow you to add the two additional image fields. You can create this component in your project's folder structure.

2. Create a Dialog: In the myboxcontainer component's cq:dialog node, create two additional fields of type "Image" for mobile and tablet. These fields will allow authors to upload images for mobile and tablet view.

3. Override the Core Component: In your myboxcontainer  component's JSP file (myboxcontainer .jsp), you need to include the core teaser component's rendering while adding your customizations for the mobile and tablet images. You can achieve this by using the <cq:include> tag.

   Here's an example of how your myboxcontainer .jsp file could look:

   <%@include file="/libs/foundation/global.jsp"%> <cq:include path="box-container" resourceType="core/wcm/components/teaser/v2/<box-Container>"/> <%-- Add your custom mobile and tablet image rendering here --%> <div class="mobile-image"> <cq:include path="mobileImage" resourceType="foundation/components/image"/> </div> <div class="tablet-image"> <cq:include path="tabletImage" resourceType="foundation/components/image"/> </div>

   In this example, we're using <cq:include> to include the core Box Containercomponent's rendering first and then adding the custom mobile and tablet image fields.

[Ekhlaque]

@Sayali1 ,To achieve the the requirement of adding two more required image fields to the container component and displaying those images as background images on the page, you can follow the below steps.

->Create a new custom container component by copying the existing container component (sling:resourceSuperType) located at /libs/wcm/foundation/components/container.Place the copied component under your project's apps folder, for example, /apps/myproject/components/container.

->Modify copied container's dialog XML located at /apps/myproject/components/container/dialog/items/tab1/items/column/items/backgroundimage and add two more fields for the new background images. You can use the granite/ui/components/coral/foundation/form/fileUpload widget for these new fields. Set their required property to true to make them mandatory.Update the corresponding <items> node to include your new fields.

Example code :

<backgroundimage1
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/fileUpload"
   fieldLabel="Background Image 1"
   name="./backgroundImage1"
   required="{Boolean}true"
   ... other properties ... />

<backgroundimage2
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/fileUpload"
   fieldLabel="Background Image 2"
   name="./backgroundImage2"
   required="{Boolean}true"
   ... other properties ... />

->Create a client-side JavaScript file (e.g., custom-container.js) to handle the display of the background images. Place this file in your project's client library folder (e.g., /apps/myproject/clientlibs).In this JavaScript file, listen for the changes in the file upload fields and update the CSS of the container component accordingly. Set the background images using the selected file URLs.

->Register the client-side JavaScript file by creating a clientlib node under your project's /apps/myproject folder. Define the categories for the client library and include the required JS file.Make sure the client library category matches the one used in your container component's policy (cq:editConfig/cq:dropTargets/myproject.container).

/apps/myproject/clientlibs
   - categories = [myproject.container]
   - js.txt = custom-container.js

->Modify the Container Component Policy ,navigate to/apps/myproject/components/container/policies.Open the container's policy (cq:EditConfig) and update the cq:dropTargets node and add the myproject.container category to include the new client library. 

<myproject.container
    jcr:primaryType="nt:unstructured"
    cq:actions="... other actions ..."
    cq:dropTargets="{ 'myproject.container': ['myproject.container'] }" />

->In the custom JavaScript file (custom-container.js), set the background images of the container using the URLs of the selected images in the file upload fields. You can use jQuery or plain JavaScript to achieve this.

For example, you can set the background images using the background-image property: 

// Assuming the field names are ./backgroundImage1 and ./backgroundImage2
var backgroundImage1URL = $('input[name="./backgroundImage1"]').val();
var backgroundImage2URL = $('input[name="./backgroundImage2"]').val();

$('.my-container').css({
    'background-image': 'url(' + backgroundImage1URL + ')',
    'background-size': 'cover'
});
$('.my-container').css({
    'background-image': 'url(' + backgroundImage2URL + ')',
    'background-size': 'cover'
});

 ->Add a CSS class (e.g., my-container) to the container component HTML markup where you want the background images to be displayed.

<div class="my-container">
    <!-- Other content of the container component -->
</div>

Hope this helps !