A quick guide for adding background images to a Quilt override.

You can add background images to different Quilt Sections in several ways.

One way is to use Page Builder in the Aurora Designer. Another way is to add the images via a GraphQL mutation or manually (by committing directly to the Git repo).

Adding a Background Image via GraphQL

To add a background image for a quilt, you need to call two different mutations. One uploads and saves the background image, while the other adds a reference to it in the right place in the Quilt.

Saving the Image via GraphQL

To save the image, make a GraphQL call to execute the saveQuiltAssetFromUpload mutation. This mutation commits the uploaded file to the Git repo under a folder with the same name as the quiltId.

Here is an example cURL script that performs the upload:

curl --location 'https://community.mine.com/t5/s/api/2.1/graphql' \
--header 'Li-Api-Session-Key;' \
--header 'Content-Type: multipart/form-data' \
--form 'operations="{ \"query\": \"mutation($quiltId: String!, $assetId: String!, $assetPart: Upload!) { saveQuiltAssetFromUpload(quiltId:$quiltId assetId:$assetId   assetPart: $assetPart){result {name directoryName subDirectoryName feature size lastModified revision mimeType url } errors {...on Error { message fields }}}}\", \"variables\": {\"quiltId\": \"CommunityPage\", \"assetId\": \"nodes-widget-nodePageHeaderWidget.jpg\", \"assetPart\": null} }"' \
--form 'map="{\"file\":[\"variables.assetPart\"]}"' \
--form 'file=@"nodes-widget-nodePageHeaderWidget.jpg"'

To add a reference to the image, you'll need to make a GraphQL call to execute the createOrUpdateBulkQuiltOverride mutation, adding the reference to the place you want it.

The call would use the same Mutation from the Creating or Updating a Quilt overrides via GraphQL section, but with the variables changed to reference the image you uploaded under the backgroundImageProps prop of the Quilt header:

{
  "bulkQuiltInput": [
    {
      "defaultQuiltId": "CommunityPage",
      "quiltInput": {
        "id": "CommunityPage",
        "items": [
          {
            "header": {
              "type": "HEADER",
              "id": "nodes.widget.nodePageHeaderWidget",
              "props": {
                "backgroundColor": "transparent",
                "navbarProps": {
                  "useTransparentNavbar": false
                },
                "nodeHeaderVariantProps": {
                  "contentWidth": "medium",
                  "isSearchGlobal": true,
                  "type": "lg",
                  "alignment": "center",
                  "useSearch": true
                },
                "backgroundImageProps": {
                  "assetName": "nodes-widget-nodePageHeaderWidget.jpg",
                  "backgroundSize": "COVER",
                  "backgroundPosition": "CENTER_CENTER",
                  "lastModified": "1686199362000",
                  "backgroundRepeat": "NO_REPEAT"
                },
                "useBottomBorder": false,
                "nodeHeaderPadding": {
                  "paddingTop": 50,
                  "paddingBottom": 50
                },
                "useNodeHeaderCountStats": false,
                "showNodeHeaderTitleAndDescription": "both",
                "editLevel": "FULL",
                "breadcrumbProps": {
                  "useBreadcrumb": false
                },
                "nodeHeaderFontColor": "var(--lia-bs-body-color)"
              }
            }
          }
        ]
      }
    }
  ]
}

Adding a Background Image Manually

To add a Quilt background image manually, you'll first want to add a directory with the same name as the part of your .quilt.json file name before the .quilt.json for the quilt you want to add the background image to (if the directory does not exist already). You'll want to place the image in that directory.

Then you'll want to update your quilt to either add or update the appropriate BackgroundImageProps field to reference your image.

For example, if you want to use the background image for the header, you'd want to add a backgroundImageProps prop like this one to the header:

"backgroundImageProps" : {
  "assetName" : "nodes-widget-nodePageHeaderWidget.jpg",
  "backgroundSize" : "COVER",
  "backgroundPosition" : "CENTER_TOP",
  "lastModified" : "1682457055000",
  "backgroundRepeat" : "NO_REPEAT"
}