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>
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.
I created an image directory in my projects in the UI folder to place my images.
So the full path is currently Resources/UI/Images.
When i create an image view it wont display the images.
I tried different options, even a web image but nothing works?
var self = Ti.UI.createView({
backgroundColor:'white'
});
var imgv = Titanium.UI.createImageView({url:"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png"});
self.add(imgv);
var imgv = Titanium.UI.createImageView({url:"../images/sb02.jpg"});
self.add(imgv);
var imgv = Titanium.UI.createImageView({url:"Resources/ui/images/sb03.jpg"});
self.add(imgv);
There is an error in your code. There is no url property for ImageView control. You should use image property. Try the following code
var imgv = Titanium.UI.createImageView({
image:"../images/sb02.jpg"
});
self.add(imgv);
To answer my question thanks to Anand for the tips:
Images should be placed in the Resources dir
Afterwards reference them just by /folder/image.jpg in my case /images/sb1.jpg
I have been trying to put an image with a hyperlink on it into a google apps script ui. I first thought of using createAnchor(), but that only allows text. Then I thought of using a button, but as far as I know you cannot open a new tab/window and redirect in a callback function.
I also tried createHTML(), but the element is not handled by it as yet.
I have seen people overlay transparent buttons over images, but still have same issue in callback.
My research has not found an answer to this. Does anyone have any solutions/examples?
Thanks
This worked for me on Chrome20 and IE9
// Container for box and results
var imageContainer = app.createFlexTable();
// Setup the button
var button = app.createButton("ImageButton");
button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
button.setStyleAttribute("position", "absolute");
button.setStyleAttribute("color", "transparent");
button.setStyleAttribute('zIndex','1');
button.setStyleAttribute("border", "0px solid black");
imageContainer.setWidget(0, 0, button);
// image to click
var image = app.createImage("image.jpg").setId(imageId);
imageContainer.setWidget(1,0, image);
The image has a slight (3px) offset. If important, this looks to fix it http://www.w3schools.com/css/css_positioning.asp (use relative for the flex table and top etc for the image and button)
Did you try a transparent Anchor overlaying the image?
function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);
return app.close();
}
app.createAbsolutePanel()
.add(app.createImage('https://www.google.com/images/logos/google_logo_41.png'))
.add(app.createAnchor('','https://www.google.co.uk/intl/en/about/')
.setStyleAttributes({position:'absolute',top:'0px',left:'0px',width:'201px',height:'47px',opacity:'0'}))
This is a tested one. It works fine.
It doesn't work with positioning the image (as 'absolute').
It doesn't work with .setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER)
I don't believe this is possible with the widgets available. I would suggest altering your UI's design to utilize an Anchor widget instead.
Use HTML Box if you are coding directly on your page. Click "Edit" to edit your page and go to "Insert>HTML Box" in your menu. It will accept javascript too! There are a few caveats - when using javascript, HTML Box will not accept links...too bad, but too many exploits there.
If you are coding in apps script, you could try to place the image on a panel and use absolute panel and position your link over your image. Another method could be to use the .setStyleAttribute for CSS styling and utilize the zIndex parameter to place a panel over top of your image....like so:
var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI
var popPanel = app.createSimplePanel()
.setStyleAttribute('top','Y')
.setStyleAttribute('left','X')
.setStyleAttribute('zIndex','1')
.setStyleAttribute('position','fixed');
// add your anchor to the popPanel
app.add(panel).add(popPanel);
Not 100% sure if you can make this panel transparent, but you could try something like:
.setStyleAttribute('background',transparent')
or change the opacity via:
.setStyleAttribute('opacity','.5')
Hopes this gives you a few ideas!
I managed to do it with a single Anchor object and using CSS3.
It works on Chrome, I did not test it in other Browsers.
gui.createAnchor("", false, "$DESTINATION_URL$")
.setStyleAttributes({ "display":"block",
"width":"$IMAGE_WIDTH_IN_PIXEL$",
"height":"$IMAGE_HEIGHT_IN_PIXEL$",
"background":"url($URL_OF_THE_IMAGE$)",
"background-size":"100% 100%",
"background-repeat":"no-repeat" })
Of course you have to replace the $......$ with your data.
Thierry
If you first create all your HTML in a string, you can then replace the content of a page with the HTML you want like this:
var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');
I'm trying generate a images/chart in my controller and have that image displayed in an image tag in the view. In my view, I have
<div id="graphcontainer">Close Graph<img id="chartImage" alt="" /></div>
and in my controller (called EventReport) I have a method called "BuildChart". My idea was to capture the click event of a button designated as the build report button. In the click event handler I would want to assign the image's source to something like "/EventReport/BuildChart" to have the image control populated.
Here's what's in the controller
public ActionResult BuildChart()
{
var chart = new Chart
{
Height = Unit.Pixel(400),
Width = Unit.Pixel(600),
AntiAliasing = AntiAliasingStyles.Graphics,
BackColor = Color.White
};
// Populate chart here ...
var ms = new MemoryStream();
chart.SaveImage(ms);
return File(ms.ToArray(), "image/png");
}
I'm just having problems wiring this up. Am I on the right track?
Thanks!
Set src of your image as link to your action on the click of your button, eg:
using jquery:
$('#build-chart').click(function() {
$('#chartImage').attr('src', '/EventReport/BuildChart');
});
and action will be asked for content for image. Probably some 'loading' indicator will be needed.
I'm attempting to place an image map into a jQuery UI dialog. Initially, the and are hidden on the page so that I don't have to do any AJAX. When the dialog is triggered, the and are placed in the dialog and the hidden original content has its link to the image map removed.
There are a few links on the image map in tags and in Firefox, Chrome etc the links are positioned correctly and work.
However, in all versions of IE (the web site is SharePoint 2007 and compatibility mode is on), the links do not fire on the image map. You can hover over the rectangles and be shown the link, but the action never fires.
Code used to initialise below:
$(document).ready(function() {
$('.processDiagram').click(function() {
var phase = $(this).attr('title');
var text = $('#'+phase+' div').html();
var mapname = $('#'+phase+' map').attr('name');
$('#'+phase+' map').attr('name', ''); // null out the background map name so it doesn't get confused
var $dialog = $('<p></p>').html(text).dialog({modal:true, autoOpen:false, width:620, title:phase, beforeClose: function(event, ui) { $('#'+phase+' map').attr('name', mapname); }});
$dialog.dialog('open');
return false; // So firefox won't just follow the link
}
}
I could really do with some help here as I have no idea why the links aren't firing.
Thanks,
Steve
So, the reason is the layout being position:relative does a number on IE, moving all of the hotspots to be relative to the body and not to the image map itself.
Solution is to fix that layout issue.