I am building a web application using ExtJS4 and I want to be able to get the source of an image element. I know I can use the line:
document.getElementById("imageID").getAttribute('src');
However, the issue I have with that solution is that the code is dependent on the id property. I won't be able to reuse this code if I have an class with a panel and an image inside since I will have conflicting ids if I duplicate the class. What I resorted to instead is to set an itemID in the image inside my panel.
Is there a way to get the image source using only the itemID property? Or do i really have to stick with my the id property?
I got it:
Navigate to your image element and assign it to a variable then do:
imgSrc1 = img.getEl().getAttribute('src');
where img is your image variable
Related
I'm trying to set up a form.IO form that will let me use the value of a field as part of the css class. This needs to take effect when the item is in the table view. If it also influences the form view that's ok because we don't have the element showing in the form view.
Specifically I want to get the following output:
<div class="[value]Stoplight"> </div>
The values from the object are going to be colors e.g. "yellow" so the result would be:
<div class="yellowStoplight"> </div>
Once I have that I can have my CSS file specify a background image based on the class and make it display the way I want.
Alternatively if I could put an html element of type image and have the source be different based on the value of the object that would work too.
Any ideas on how I could make either of those work? I'm not finding anything that relates to "dynamic css". Perhaps I'm looking for the wrong search criteria.
Let's say I defined a IBM WCM authoring template called "AT-Image"; it creates content item "CT-Image" that contains elements such as an Image of type "Image", Description of type "Short Text", Keywords of type "Text", and other fields that serve as meta for that image resource.
Now, I need to create a content item called "CT-Article" based off from its "AT-Article" authoring template. Let's say that "Article" item has 3 elements: Title, Summary, and Image. Title and Summary are of type "Short Text". But Image needs to be of type "CT-Image" and not Image or Image component.
Is this possible Out-of-the-Box or is this something I need to implement myself via WCM API?
From my point of view you should use a menu component in the following way:
Let's assume you have got your CT-Image and CT-Article in a common sitearea called "MyArticle" like this:
MyArticle
CT-Article
CT-Image
Furthermore you need a WCM Menu component which uses two selection criteria:
current sitearea as location
CT-Image as authoring template
So then rendering CT-Article with a presentation template PT-Article you can reference the menu component. Therefore, you reference the menu component in the presentation template markup. The menu component then will pick up the CT-Image and render it as it is located in the same sitearea as your CT-Article.
That's rather a content design approach then a technical approach. It's all there out-of-the-box and saves custom development effort.
If I understand correctly, basically you want to create pre-defined images and then pick one of them to display when you create an article. Correct?
Well, the easiest way would be to utilize what WCM already gives you: create an Image Component. You will be able to upload the image and also provide a description, but you won't be able to set keywords or metadata. The workaround for this would be to set the keywords/metadata as part of the article. If that is okay, this would probably be the best way to do it.
By doing that, all you would have to do is select the relevant Image Component from your Image Element in AT-Article.
If you really need the images to be their own content items (rather than components) so that they have their own keywords and other information, then the next "easiest" way is probably to use an HTML Element inside AT-Article. In this HTML Element you will have to use the "Insert Tag" option, and then choose an Element Tag and use "Selected" rather than "autofill" or "current" to navigate to the content item that you want (the one with the image).
The code will look like this:
[Element name="[path]" type="content" context="selected" key="[element]"]
Where [path] is the path to the content item and [element] is the element that you actually want to pull from that content item (such as image, description, keywords, etc.)
context="selected" is the key there. Then you just need to set up your Presentation Template to be able to use this information that you are pulling in from the HTML Element.
WCM 8.5 has the InContext tag.
The InContext tag renders a tag body within a specified context. The new context can be specified as a predefined context by using a UUID, or by path.
For eg. in this case you can use below where key="Image" in InContext tag is the Link element to the CT-Image content item :
[InContext uuid="[Element context='current' type='content' key='Image' format='id']"]
[Element context="current" type="auto" key="Image"]
[Element context="current" type="auto" key="Description"]
[/InContext]
I have a block which is going to display a LinkItemCollection. Each link has an image which belongs to it. Since clickable image isn't supported, I was wondering if anyone had a solution of how to couple the images and links together.
Maybe you could extend LinkItem and add an Url property to an image, any ideas?
This is EPiServer CMS 7 (MVC).
I'd go with a ContentArea property instead of LinkItemCollection, and create a block type with properties for specifying link, image etc. Then add one block per link to the content area.
That also makes it a lot easier to add/remove/rearrange links with drag and drop.
I'm using a VirtualTree as a layer selector for a mapping application, and I'm trying to have a "Layer" or "File" show a green icon when a layer is active and a grey icon when it is not.
Can you...
Set the icon of a selection? or
Bind an icon of an item of a VirtualTree to a boolean property of an array?
I see there is a property for: iconOptions that takes a map and this references qx.data.SingleValueBinding, but how to actually implement it is stumping me. My tree is getting created using:
var store = new qx.data.store.Json(url);
store.bind("model", tree, "model");
I tried:
tree.setIconPath("icon");
but that requires that I have an icon property for every element of my JSON file to display the Folder/File and doesn't allow for the multiple (on/off) capabilities.
Any suggestions?
have a look at virtual tree demo. Using the setIconOption you could specify a convertor takeing other data into account when deciding what type of icon to set.
Is there a way to change the default ajax progressbar that is there in dotnetnukes.
Its not for changing the image but i would like to use an altogether different progressbar. The current one displays the progressbar at the bottom of the section. The requirement to replace it with one covering the entire section or part of it. The section has a search criteria on top and the results below. The progressbar needs to appear above the criteria so that the user will not change it while the search is going on.
That's the animated image you can replace with your own if you have one.
Agree with #DangIT, you can find the gif with name progressbar.gif in images folder in the root of dnn installation. just delete it, and place another image with the same name will do the trick for you