Same background in multiple pages AEM - image

Question

I have this structure of pages with components inside
homepage
- jcr:content
- topBanner
- background
- file
secondpage
- jcr:content
- topBanner (different component from the homepage)
- background (same component as homepage)
- file
What I need is, when I upload an image to homepage background I want that same image goes to secondpage.
I have tried use granite properties but I'm stuck because I can't find AEM documentation for javascript
this is my serverside javascript for upload the image, based on image of AEM
"use strict";
use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js",
"/apps/digital/components/content/utils/Image.js",
"/libs/sightly/js/3rd-party/q.js"], function(AuthoringUtils, Image, Q) {
var image = new Image(granite.resource);
var imageDefer = Q.defer();
image.resource=granite.resource;
var CONST = {
PLACEHOLDER_SRC: "/etc/designs/default/0.gif"
};
// check if there's a local file image under the node
image.path=granite.resource.path;
granite.resource.resolve(granite.resource.path + "/file").then(function(localImageResource) {
imageDefer.resolve(image);
}, function() {
// Modifying the image object to set the placeholder if the content is missing
if (!image.fileReference()) {
image.src = CONST.PLACEHOLDER_SRC;
}
imageDefer.resolve(image);
});
// Adding the constants to the exposed API
image.CONST = CONST;
// check for image available sizes
if (image.width() <= 0) {
image.width = "";
}
if (image.height() <= 0) {
image.height = "";
}
return imageDefer.promise;
});
Basically I want to copy the file from homepage to secondpage and other pages that may exist. Or create a pointer in the background of the secondpage to the file from homepage.
How can I do this?
TopBanner Component HTML
<div class="dashboard-hello">
<div data-sly-resource="${ 'background' # resourceType='digital/components/content/authored/vf_background'}"/>
<div class="spring" id="homepage--greeting">
<div class="dashboard-hello__content">
<div data-sly-resource="${ 'greeting' # resourceType='digital/components/content/authored/vf_greeting'}"/>
</div>
</div>
</div>

Answer 1

What you need is a design_dialog alongside the dialog of the background component.
Design dialogs content changes are global accessible while dialog content changes are page specific. That means that the content stored via a design dialog is store at design path (usually somewhere under /etc/design/) while the content modified through the dialog gets stored at page level under component’s node.
You would have to modify the JSP rendering script of your background component also.
I would first obtain the background image path from the JCR property of the page specific content :properties.get("<image_path_property_name>");. If not set, I would fallback to the global background image currentStyle.get("<image_path_property_name>");. This way you would be able to set a different background image in secondpage/../background or "other pages that may exist".
Or if you don't want authors to use a different background image in the secondpage/../background pages, then only obtain background image path from the design property.