I have a form with an Image widget and a FileUpload widget.
I can use file upolad to change images.
I'd like to visualise a changed image right after a new image is submited to a servlet. But how can I force an Image widget to grab a new image from server ? (image's url doesn't change, content does) .
If you can't/don't want to change the URL on the server, you can alternatively add a query parameter like:
version++;
image.setUrl(url + "?v" + version);
The query parameter will be ignored on the server (except if you want to use it somehow), but it forces a reload, because the browser doesn't know, if the image might be generated dynamically.
Or better: just set the URL to "" then back to the original URL. Tested in Chrome.
String url = image.getUrl();
image.setUrl("");
image.setUrl(url);
Related
I'm trying to create a GWT button that includes both an image and text like this:
I can create and set the button image like this:
PushButton button = new PushButton();
button.getUpFace().setImage(new Image(icon));
but if I do this the image disappears:
button.setText("ABC");
How can I keep both? I would prefer not to use the setHtml method because that would create a new HTTP request
EDIT: The problem with calling setHTML() is that it causes the browser to send another HTTP request to the server. This means that when I change the icon the button is blank for a second or two while the browser waits for a response from the server - obviously this not ideal. I'm looking for a way to use the image that is in memory in the form of a ImageResource object. Thanks!
There are lots of ways to achieve this.
Please have a look at below post asked in the same context:
HTML/CSS - Adding an Icon to a button
Adding icons to an button in gwt
GWT Custom Button with Icon above Text
Sample code:
Button button = new Button();
// get image form CSS resource
String url = new Image(Resources.INSTANCE.cut()).getUrl();
// get image from url
String url = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/edit-cut-64.png";
// get image from the project war/images folder
String url = GWT.getHostPageBaseURL() + "images/cut.png";
String html = "<div><center><img src = '" + url
+ "'></img></center><label>Cut</label></br></div>";
button.setHTML(html);
Note: you can move it to CSS as well and append in HTML.
___________-
EDIT
You can achieve it using PushButton as well using setInnerHTML()method that will benefit from ImageResource as well.
final PushButton pushButton = new PushButton(new Image(Resources.INSTANCE.old_cut_icon()));
pushButton.getElement().setInnerHTML("<div><center>"+pushButton.getElement().getInnerHTML()+"</center><label><center>Cut</center></label></div>");
now simply call setImage() whenever needed to change the icon only.
pushButton.getUpFace().setImage(new Image(Resources.INSTANCE.new_cut_icon()));
Screenshot
Set a text on your button. Also set a CSS style:
.myButton {
background-image:url('/images/icon/cut.png');
background-position:center top;
padding: 28px 2px 2px;
}
Adjust padding depending on the size of your image.
An alternative approach is to create a widget that combines a button with a label, and either (1) put them in a LayoutPanel, specifying the position that you want, or (2) use CSS to move the label on top of the button (better).
Using Adobe Experience Manager 5.6.1 (AEM) (Formerly CQ5) I am trying to create a new tab similar to the Image tab in Page Properties. It would be titled "Logo".
I basically just copied the Image tab to create a logo tab and renamed the paths to reflect the logo purpose. For instance, I set the fileReferenceParamater to ./logo/fileReference and requestSuffix to /logo.img.png.
When I edit the properties, I can drag an image into the tab just as I can with the "Image" tab, however, the image never appears there. I am guessing this is because the default image handler is not picking up the request. The error is:
Cannot serve request to
/content/my-site/home-page/en_us/jcr:content/logo.img.png in
org.apache.sling.servlets.get.DefaultGetServlet
When I looked at the content node there was no sling:resourceType. When I added a resource type of foundation/components/adaptiveimage then it worked. However, I noticed that the "Image" node didn't have a sling:resourceType. I guess the img.png.java servlet in the foundation page is handling that request.
I tried creating a logo.img.png.jsp file in my page component to handle the request, but that didn't seem to work.
How can I get AEM to either add the sling:resourceType or to handle the request?
I was facing the similar problem and I found a simpler way to resolve. All you need to do is to add a hidden xtype under the your logo image as below:
<yourlogo
jcr:primaryType="cq:Widget"
<-- other properties -->
xtype="html5smartimage">
<items jcr:primaryType="cq:WidgetCollection">
<resType
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./logo/sling:resourceType"
value="foundation/components/image"
xtype="hidden"/>
</items>
</yourlogo>
Well, after some time experimenting, this is what I ended up doing to get this to work. If there is an easier way, I would be happy to know it.
First, I copied the /libs/foundation/components/page/img.png.java file and added it to my compiled package with some modifications.
#SlingServlet(
resourceTypes = "sling/servlet/default",
selectors = "imgnode",
extensions = {"png","jpg","jpeg","gif"},
methods = "GET"
)
public class SimpleImageServlet extends AbstractImageServlet {
Where img.png.java had the following line:
Image image = new Image(c.resource, "image");
I changed it to:
Image image = new Image(c.resource);
This relies on SCR annotations to generate the OSGi configuration so that this servlet will handle image requests having the imgnode selector. Instead of looking for a child image node it just expects the current resource to be an image.
Second, I added a component to the body.jsp overlay of the page component, like so.
<cq:include path="logo" resourceType="/apps/my-site/components/logo" />
This maps the logo path to a component for rendering.
Third, within the logo.jsp on the component I set the selector to imgnode rather than img.
Image img = new Image(resourcePage, "logo");
img.setSelector("imgnode");
I believe this step would be similar if the adaptiveimage were overlayed. You just need to render out URLs that include the imgnode selector.
Fourth, I setup the logo image dialog tab in page properties to use the expected requestSuffix and set the other properties to point to the logo sub-node.
Examples:
requestSuffix = "/logo.imgnode.png"
fileReferenceParameter = "./logo/fileReference"
Fifth, I made sure that the image dialog tab for the /apps/my-site/components/logo component pointed to itself.
Examples:
requestSuffix = ".imgnode.png"
fileReferenceParameter = "./fileReference"
Now whether it is in page properties, component editing, or final rendering, the image is handled appropriately.
this is a bit of a nuisance with using the image widget controls--only the image component nicely handles the data, and the servlet that handles ".img" is tied to the image component resourceType.
the easiest thing is to just use the value of the fileReference property instead of referencing the image as part of the page. since you're using assets from DAM, this is a reasonable approach.
this doesn't address the issue with a user uploading an image directly. i wanted to suggest having a hidden field like "./logo/sling:resourceType", but testing that locally resulted in an error when trying to save the dialog.
another approach is the following:
<sling:include resourceType="foundation/components/adaptiveimage" resource="${resource.path}/logo" />
(assuming resource is jcr:content). this is effectively the same as adding a sling:resourceType, but there are at least 2 downsides:
the image becomes authorable at that point as opposed to in the dialog
this method only works for rendering a normal tag. it won't work for any sort of background image
I want to display an "img" element as a child of a panel. Should we be using the Image widget for this? I'm doing the following:
Image img = new Image();
img.getElement().getStyle().setWidth(80, Style.Unit.PX);
img.getElement().getStyle().setHeight(80, Style.Unit.PX);
// add it to a panel, which eventually gets added to the root panel.
somePanel.add(img);
// set the url
img.setUrl("stuff/test.png");
This works fine on FF. When I run the same code in mobile safari, the images never load. I've added a LoadHandler to the Image instance. I can see that on FF, the event callbacks are triggered. But on mobile safari, they're never triggered.
I recall that an Image must be added to the RootPanel in order for it to ever load, but I am indeed doing that. What else could be causing this? I'm sure the png resource is located correctly.
Thanks
Rule of thumb: always use absolute URLs, possibly using GWT.getModuleBaseURL(), GWT.getHostPageBaseURL() or GWT.getModuleBaseForStaticFiles() as a prefix:
img.setUrl(GWT.getHostPageBaseURL() + "stuff/test.png");
This is because GWT code runs in an iframe and is loaded from within a subfolder, and browsers differ in behavior on whether to use the host page or the iframe URL to resolve relative URLs.
I have created plugin in TinyMCE to cutomize advimage plugin in it default. I added a browse button at the end of image url textbox in general tab. Here is my code:
tinyMCE.execCommand('mceAdvImgMgr',false,'src');
I can open my plugin. But I don't know how can i pass the value and get it in my plugin?
Because I want to pass ID from advimage(ID of image url image) to my plugin and then after select image from my plugin, it return image url to caller plugin(advimage)?
This is not that difficult, but depends on the point of time or action at which you want to assign the value to a variable.
You may i.e. save the value in the editor object:
tinyMCEPopup.editor.last_selected_value = value;
and get it from there later on
ed.last_selected_value
I have an img tag on a wicket page and I add image as following:
NonCachingImage banner = NonCachingImage(id, imageResource)
now i also add attributes like: banner.add(new AttributeModifier("width",...
Now my page constructor is getting invoked twice. If for testing I also add
banner.add(new AttributeModifier("src", new Model<String>("test")
constructor would be invoked only once but the image would not be rendered. Please suggest me how can i render the correct image from org.apache.wicket.Resource and make the constructor getting invoked only once.
Would appreciate if you can direct me to specific examples.
In some browsers, <img> tags that are rendered with src="" (no url) the browser will submit a request to the current url in search of the image. If your imageResource is resolving to an empty url path then this would occur. Further, this would not happen if after creating the NonCachingImage you added an AttributeModifier which would override the generated src attribute with a value of "test" as the value would no longer be empty.