I amtry to display a costum Image in jsTree. I build the tree from a database via AJAX-Call. To build it up I use c# eg:
var s = "<li data-jstree='{'icon':'fa fa-check'}'> Konfiguration"
then I send "s" as JsonFile to on the Ajax call.
Can some on explain to me how I must format the string that I can display the image. Also I would pref to display an image out of my image-folder.
Thanks a lot for any suggest.
Related
Lets say i have an image link that is stored in mongodb as a string. The image is uploaded somewhere and is accessible. How would i be able to display this thing that holds the string as an image in the ejs or html page?
For example the schema is: User.
And the name that holds the string in the database = user.characterimg
However if i would put that just like that in a ejs file it would only show the string and not the actual image.
I found the solution:
src= <%=user.characterimg%>>
Normally when using SAP UI5, we use the following code
this.appContent.placeAt('content');
This will render the content element.
But I just want the html of appContent UI5 control without rendering it. How to do that?
The reason I want to do it is because I want to use sap.ui.template to build a carousel and I want to add get raw HTML of UI5 control and add it as a string to a template instead of rendering it directly.
Assuming this.appContent is a control, then after the contol has been rendered just call
var $domRef = this.appContent.$():
or getDomRef() (visibility is protected!)
var domRef = this.appContent.getDomRef():
Be aware when to call this after the control has been rendered, i.e. like this:
this.appContent.addEventDelegate({
onAfterRendering : function(oEvent){
var $domRef = oEvent.srcControl.$();
// now do something
}
});
this.appContent.placeAt('content');
However, I would try to avoid using placeAt.
I'm designing a GUI in Qt and I need to use a form to save an image. The user would be able to save a file in any location (a simple save form that we see under Save as...). How can make a save-as form in Qt?
thanks!
You can do, for example, the following:
QImage image(128, 128);
image.fill(Qt::red); // A red rectangle.
QString fileName = QFileDialog::getSaveFileName(this, tr("Save Image File"),
QString(),
tr("Images (*.png)"));
if (!fileName.isEmpty())
{
image.save(fileName);
}
I have configured image for my page using sidekick >Page properties>Images tab. Now I want to fetch my this page image(thumbnail) in one of my jsp. Can someone give me pointers or code snippet for api class and method that I can use to achieve this.
Thanks,
Rajeev
I would suggest using the default image component as an example - /libs/foundation/components/image.
If you're putting your code into a component for your specific page type though, your code should be something like this:
if (currentNode.hasNode("image")) {
String imagePath = currentNode.getNode("image").getPath();
Resource imageRes = resourceResolver.getResource(imagePath);
image = new Image(imageRes);
image.loadStyleData(currentStyle);
image.setSelector(".img");
if (!currentDesign.equals(resourceDesign)) {
image.setSuffix(currentDesign.getId());
}
image.draw(out);
}
Keep in mind though, even though you set an image, it does NOT mean it will show up - if you're using the default page dialog for page properties, it will only show a broken image. That's because there is a bug in CQ where the sling:resourceType property of the image doesn't get set, and thus it won't show up. This is because the .img selector that gets put on the image doesn't know what to do, unless it get's pointed to a resource type with a definition for the .img selector, so it can properly render the image.
I've uploaded a package that you can use as a hotfix for the issue with the default /libs/foundation/components/page component dialog, so that it will actually set the resource type when you upload an image. You can find/download the package from my Google Drive
Hopefully that helps. Let me know if you need more help.
EDIT
If you're trying to get the page properties image from one page on another page, you just need to use a resource resolver. You should have one available to you in CQ, so this would essentially be the code:
Resource imageRes = resourceResolver.getResource(pathFromYourDialog);
Image image = new Image(imageRes);
The rest would be the same - you're just giving it a different path to start from.
I think Nicholaus was more on point with his EDIT answer to your immediate need. If the user is providing you a path to the thumbnail via the dialog (i.e. a DAM image).
You can simply create the image, or if it has DAM information you can load it as a DAM Asset and pull the necessary information.
Image image = new Image();
Resource imageResource = resourceResolver.getResource(imageUrl);
Asset imageAsset = imageResource.adaptTo(Asset.class);
Map<String, Object> valueMap = imageAsset.getMetadata();
long width = Long.parseLong(valueMap.get("tiff:ImageWidth").toString());
long height = Long.parseLong(valueMap.get("tiff:ImageLength").toString());
Object titleObject = valueMap.get("tiff:ImageTitle");
String title = (titleObject == null) ? null : titleObject.toString();
if (title != null)
{
image.setTitle(title);
}
image.setWidth(width);
image.setHeight(height);
image.setUrl(imageUrl);
This is a little long hand for what Nicholaus had suggested, the Image class will create itself based off the Resource you pass it. (actually upvoted Nicholaus for that, have some optimizations we can make).
Another, simpler option would be to just use the src that the user passes through, in the event that all you're doing is setting a thumbnail. I'm guessing you could be safe in doing something like:
in java:
String thumbSrc = properties.get("thumbSrc", "defaultThumbnail.path");
if (!thumbSrc.isEmpty())
{
pageContext("thumbSrc", thumbSrc);
}
in jsp:
<img alt="thumbnail" src="${thumbSrc}"/>
or if you don't want to do anything in the java you could just do something like
<c:if test="${not empty properties.thumbSrc}">
<img alt="thumbnail" src="${properties.thumbSrc}"/>
</c:if>
In order to get the same result as the first part in just jsp, you'd need to wrap it in a choose, because passing it through some processing before sending to view makes it easier to set default values.
So I've used FCKeditor for TinyMCE. This integrated easily and gave my customers a nice way to upload files while selecting them. To integrate this I used the following code:
function fileBrowserCallBack(field_name, url, type, win) {
var connector = ROOT + "path/to/tiny_mce/filemanager/browser.html?Connector=connectors/php/connector.php";
connector += "&Type=" + type;
browserField = field_name;
browserWin = win;
window.open(connector, "browserWindow", "modal,width=600,height=400");
}
And file_browser_callback: "fileBrowserCallBack" in the TinyMCE call.
Now I want to use this same function to fill a simple input-tag so my users can select an image for a custom background.
Now I created an onClick event on this input field that opens the file-browser. But when I select a file I get the following javascript error:
TypeError: window.top.opener.tinyfck is undefined
So how can I use this same plug-in as a regular file-browser making it return the selected file?
Edit: The actual name of the plug-in I used is TinyFCK
Unfortuanatly, this is not possible. The tinymce image uploader needs the tinymce document structure which is not present when you use another kind of editor.