I'm currently working on a hippo component within (7.9) and I need the image link, alt, and title:
Component Method:
public HippoGalleryImageSetBean getImage() {
return getLinkedBean(Constants.NS_FLD_IMAGE,
HippoGalleryImageSetBean.class);
}
I would like to write my Component JSP like this below:
<c:forEach var="item" items="${ document.links }"
varStatus="loopStatus">
<hst:link var="image"hippobean="${ item.image.original }" />
<li><img
src="${ image }"
alt="${ image.alt }"
title="${ image.title} ">
</li>
</c:forEach>
The 'alt' and 'title' are defined on the imageset itself and not in the image variants. ${image} in your case is the link generated to an image and not the image object itself.
Try it with:
<c:forEach var="item"
items="${ document.links }"
varStatus="loopStatus">
<hst:link var="imagelink"hippobean="${ item.image.original }" />
<li><img src="${ imagelink }"
alt="${ item.image.alt }"
title="${ item.image.title} ">
</li>
</c:forEach>
Related
I want multiple images in a window. When I click on a image I want toggle out showing some info. I want this on all my images.
You didn't post the technologies you're using so I assume you are using jQuery and html:
Here is the html example:
<div>
<img class="img" data-imgid="img1" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" width="200px" />
<br/>
<text style="display:none;" id="img1">Image1 ......</text>
<br/><br/>
<img class="img" data-imgid="img2" src="http://www.111ideas.com/wp-content/uploads/2018/01/download-rose-image.jpg" width="200px" />
<br/>
<text style="display:none" id="img2" class="text" hide>Image2 </text>
<br/><br/>
<img class="img" data-imgid="img3" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" width="200px" />
<br/>
<text style="display:none" id="img3" class="text" hide>Finally Image3 :)</text>
</div>
and here is the jQuery code which handle the toggling process.You need to use toggle method based on the id of any text tag in the html code inside onclick function to toggle it:
$(function () {
$('.img').on('click', function () {
var txtId = $(this).attr('data-imgid');
$('#' + txtId).toggle();
});
});
You can see live demo here:
http://jsfiddle.net/gtU56/342/
I am trying to click the second tab Tab1_imgImbillsTab.
<div id="menuTabsForPageContainer" >
<div id="menuTabsForPage">
<img id="Tab1_imgHomePageTab" accesskey="H" disabled="disabled" class="imgHomePageTab" src="images/home_deselected_tab.png" alt="Home" style="border-width:0px;" />
<img id="Tab1_imgImbillsTab" accesskey="B" class="imgImbillsTab" src="images/bills_deselected_tab.png" alt="Bills" style="border-width:0px;" />
<img id="Tab1_imgArchiveTab" accesskey="C" class="imgArchiveTab" src="images/chartrack_deselected_tab.png" alt="Chart Rack" style="border-width:0px;" />
<img id="Tab1_imgPracMgmtTab" accesskey="I" class="imgPracMgmtTab" src="images/managementreporting_deselected_tab.png" alt="Business Intelligence" style="border-width:0px;" />
<img id="Tab1_imgSysToolTab" accesskey="Y" class="imgSysToolTab" src="images/systemtools_deselected_tab.png" alt="System Tools" style="border-width:0px;" />
<img id="Tab1_imgBulletinTab" accesskey="S" class="imgBulletinTab" src="images/settings_deselected_tab.png" alt="Settings" style="border-width:0px;" />
</div>
</div>
I tried several things:
browser.button(:id => 'Tab1_imgImbillsTab').click
browser.div(:id, "menuTabsForPage").div(:id, "menuTabsForPage").button(:id, "Tab1_imgImbillsTab").click
I also tried to reference it as a clickable image by referencing the "src" of the image. These tabs, I believe have JavaSceript behind them. I can not figure out what I'm doing wrong.
The code:
browser.button(:id => 'Tab1_imgImbillsTab').click
Says to find a button element or input element (of type button, reset, submit or image) that has the id "Tab1_imgImbillsTab".
However, based on the HTML, the tab is an img tag. As a result, it will never be found by the button method. Tell Watir to look for the img tag instead:
browser.img(:id => 'Tab1_imgImbillsTab').click
I have a requirement where if status is 0 then add a css class active else add a css class active1 and for that I have done like the follow
<c:forEach items="${parentList}" var="test">
<c:choose>
<c:when test="${test[1] eq 0}">
<li><a href="#" class="active" value="${test[0].id}-${test[0].category}" id="${parent.id}" onclick="return getQuestions(this);" >
${test[0].name }</a></li>
</c:when>
<c:otherwise>
<li><a href="#" class="active1" value="${test[0].id}-${test[0].category}" id="${parent.id}" onclick="return getQuestions(this);" >
<img src="${pageContext.request.contextPath}/resources/ui_resources/img/checked.jpg" alt="" height="20" width="20"/>${test[0].name }</a></li>
</c:otherwise>
</c:choose>
</c:forEach>
Now my requirement if
${test[0].category} is client then add a button <button name="delete/>
so now 4 condtions arrise
if status is 0 and category is not client then add class active
if status is 0 and category is client then add class ="active" and
add button.
if status is not 0 category is client then add class="active1" and
add button
if status is not 0 and category is not client then only add
class="active".
So can any body please tell me how to use if loop inside if loop using jstl
Instead of a multitude of <c:choose /> use <c:if /> together with a <c:var /> to determine the class to use. You can also use a <:if /> for the button, this will require you to move the rendering of the image to the css.
The JSP would look something like this (from the top of my head).
<c:forEach items="${parentList}" var="test">
<c:set var="clazz" value="active" />
<c:if test="${test[1] ne 0 and test[0].category ne 'client'}">
<c:set var="clazz" value="active1" />
</c:if>
<li>
<a href="#" class="${clazz}" value="${test[0].id}-${test[0].category}" id="${parent.id}" onclick="return getQuestions(this);" > ${test[0].name }</a>
<c:if test="${test[0].category eq 'client'}"><button name="delete" /></c:if>
</li>
</c:forEach>
You would need something like the following to your css class active1
a.active1 {
background-image: url('/resources/ui_resources/img/checked.jpg');
background-repeat: no-repeat;
padding-left: 25px; /* width of the image plus a little extra padding */
display: block;
}
Based on your code block, how just add c:if tag after <c:choose> block?
<c:forEach ...>
<c:choose ...>
</c:choose>
<%-- here to check buuton add or not --%>
<c:if test="${test[0].category == 'client'}"><button name="delete" /></c:if>
</c:forEach
I m using image template inside a gridview like this
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div1<%# Eval("bank_id") %>');">
<img alt="" id="imgdiv1<%# Eval("bank_id") %>" width="20px" border="0" src="../Images/Plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
here i am using src="../Images/Plus.gif" but i want to set to path conditionaly.like if Eval("bank_id") is -1 then there should no image displayed or path to b set.is there any one help me to set the conditonal image path
you can small trick here. instead of bind your data directly to your image you could call some function that 'll send to it directly the data from DB then in that function you check for that value and based on what you need you return the correct string(correct image src).
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div1<%# Eval("bank_id") %>');">
<img alt="" id='<%#getImageSRC(int.Parse(Eval("bank_id").ToString())) %>' width="20px" border="0" src="../Images/Plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
then in your cs file:
public string getImageSRC(int bankId)
{
if (bankId < 0)
return "";
else
return "/bank-images/" + bankId + ".jpeg";//return here the correct image path
}
I have problems with getting my JSP view right. What I intend to do is to send a List that contains questions and each question object is a text field and a List with alternatives.
My intention is to be able to edit multiple questions (both to be able to edit the text/name of the question and edit the containing alternatives).
My backing object is now sending an List question.
Here is my JSP which are failing with invalid property of bean class.
<form:form commandName="question">
<form:errors path="*">
<fieldset class="stdframe">
<legend>Question</legend>
</fieldset>
</form:errors>
<div class="stdframe">
<c:forEach var="q" items = "${question}" varStatus = "s">
<p><b>Question:</b></p>
<p><form:input size="67" path="${q.text}"/></p>
<br/>
${q.text}
<ul>
<c:forEach var="alternative" items = "${q.alternatives}" varStatus = "t">
${alternative.text}
<li><form:input path = "${alternative[$t.index].text}" /></li>
</c:forEach>
</ul>
<br/>
</c:forEach>
<input type="submit" class="submit" value="Save" />
<input type="button" class="button" onClick="back()" value="Back"/>
</div>
</form:form>
I have tried both ${q.text} and ${q[$s.index].text}. When I just print ${q.text} it shows the correct text for the question object. Same goes for alternative.
What can I do to correctly bind the form to the objects?
In addition when I store an object which contains a list of other object, will the list be stored itself in the database?
You may need to wrap your List in a simple object with the List as a field:
class MyListWrapper { List questions; } // etc.
If you use that as your command/form object, you should be able to do something like this in the JSP:
<form:form commandName="wrapper">
// ...
<c:forEach var="q" items = "${wrapper.questions}" varStatus = "s">
<p><b>Question:</b></p>
<p><form:input size="67" path="questions[${s.index}].text"/></p>
// ...
<c:forEach var="alternative" items = "${q.alternatives}" varStatus = "t">
${alternative.text}
<li><form:input path = "questions[${s.index}].alternatives[${t.index}].text" /></li>