Thank you Howard I really appreciate the help. You commented on this in the past for me but I havent gotten it yet as to whether t-5 is capable of rendering images or not.
I can render an ID or a link easily. If I resort to rendering an ID... how does the image make it into the form ? It hasnt hit me yet whether it is feasible or not with the framework and whats available to render the images without having to suck them all into the form in order to render each one. Below is a cut of my t-5.4 gallery if you can comment further on what to do. I have integrated angular and other node.js modules into you rframework using the javascript stack interface and its showing some nice markup with regard to handling JavaScript. Thanks for any additional gracious info I really appreciate the privilige. KEN ------------- cut here ---------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <div xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"; xmlns:p="tapestry:parameter"> <t:block t:id="autoPagingContent" id="autoPagingContent"> <table width="100%" border="3" > <tr> <td width="10%" align="center" nowrap="NOWRAP"> <t:Label for="itemsPerPageSelect">Items Per Page</t:Label> <select t:type="Select" t:id="itemsPerPageSelect" t:clientId="itemsPerPageSelect" id="itemsPerPageSelect" t:model="literal:5,10,15,25,50,100,250,500,1000,5000,10000" t:value="itemsPerPage" onchange="galleryForm.submit()" /> </td> <td width="10%" align="center" nowrap="NOWRAP"> <t:Label for="tableColumnsSelect">Table Columns</t:Label> <select t:type="Select" t:id="tableColumnsSelect" t:clientId="tableColumnsSelect" id="tableColumnsSelect" t:model="literal:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,25,50,100" t:value="tableColumns" onchange="galleryForm.submit()" /> </td> <td colspan="0" align="right"> <div style="font-weight:bold; text-align: right; font-size: 26px"> <span class="label">ITEM </span> <t:outputRaw value="${fromValue}"/> <span class="label"> to </span> <t:outputRaw value="${toValue}"/> <span class="label"> of </span> <span class="label">${count}</span> </div> </td> </tr> <tr> <td nowrap="NOWRAP" colspan="3"> <div style="font-size:10pt; text-align: center;"> <a> <t:eventLink t:id="FirstPage"> <img src="${startPageImage}" height="26" width="42"/> </t:eventLink> </a> <a> <t:eventLink t:id="PrevPage"> <img src="${prevPageImage}" height="26" width="42" alt="page to previous"/> </t:eventLink> </a> <t:if test="pages"> <t:Loop id="foreachpage" source="pages" value="currentPage" index="pageIndex"> <a> <!-- <t:eventLink t:id="IndividualPage" t:parameters="prop:{'pageNum':'indexValue'}" > --> <t:eventLink t:id="IndividualPage" t:context="${pageValue}" > <!-- <t:eventLink t:id="IndividualPage" parameters="pageValue" > --> <t:outputRaw value=" ${individualPageIndex} " /> </t:eventLink> </a> </t:Loop> </t:if> <a> <t:eventLink t:id="NextPage"> <img src="${nextPageImage}" height="26" width="42"/> </t:eventLink> </a> <a> <t:eventLink t:id="LastPage"> <img src="${endPageImage}" height="26" width="42"/> </t:eventLink> </a> </div> </td> </tr> </table> </t:block> <t:block t:id="collectionContent" id="collectionContent"> <t:If test="collection"> <!-- begin test collection --> <table width="100%" cellspacing="0" border="0" > <t:OutputRaw value="${startRow}"/> <t:Loop id="foreachrow" source="collection" value="currentObject" index="index"> <!-- begin loop collection --> <t:If test="okToRenderItem"> <t:Loop id="foreachitem" source="currentObject"> <!-- begin loop object --> <td style="border:25px; padding: 10px;"> <a href="#" model="currentObject"> <t:pagelink t:page="Edit" context="editPageContext"> <t:Any t:id="imageComponentId" id="imageComponentId"> <!-- http://www.cssnewbie.com/sizing-images-responsively set MAVEN_OPTS=-Dorg.mortbay.jetty.Request.maxFormContentSize=-1 -Xms512m -Xmx1024m -Xss256k --> <img id="ImageWidget" src="${photoLink}" alt="${currentObject}" width="200" height="160" title="${currentObject.photo.fileName}" model="currentObject" image="${photoLink}" style="-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 5px 5px 5px black;-webkit-box-shadow: 5px 5px 5px black;box-shadow: 5px 5px 5px black;" /> </t:Any> </t:pagelink> </a> </td> </t:Loop> <!-- end for loop object--> <t:If test="atNewRow" negate="false"> <t:OutputRaw value="${newTableRow}"/> </t:If> </t:If> </t:Loop> <!-- end for loop collection--> <t:If test="atNewRow" negate="true"> <t:OutputRaw value="${endTableRow}"/> </t:If> </table> <p:else> <B><CENTER><H3>No objects to render</H3></CENTER></B> </p:else> </t:If> <!-- end test collection --> </t:block> <!-- OK here is the definition. It is all referral declaration within <td> --> <table width="100%" border="3" align="center"> <tr> <td> <t:Any id="headerSelect"> <t:delegate to="autoPagingContent"/> </t:Any> <t:Any id="galleryContent"> <t:delegate to="collectionContent"/> </t:Any> <t:Any id="headerSelect"> <t:delegate to="autoPagingContent"/> </t:Any> </td> </tr> </table> </div>
