I am working on a site that needs to give a thumbnail preview of a report in ColdFusion8 and ColdFusion11. The consensus is that we will search the xml source of the reports for items (list,chart,etc.) then put a png representation of that element in the thumbnail. Since each report is unique in order,number, and type of report items, we need to have a div that will stay the same size (as it is a pop-up thumbnail) but each report item will resize based on how many others are in the same div. Meaning if only one list, it will take up the whole div, but if two then each will take up exactly 50% of the alotted space, and so on. I am not sure how to begin to tackle this issue, so if I'm barking up the wrong tree, please say so. I have seen posts on dynamically sizing with css a single background image, but nothing where multiple images may or may not be in a particular "box" and the only thing that changes is the size of the; in this case pngs.
Here is all the hoopla i'm jumping through to find two types of report items (lists and charts) and how im currently displaying them:
The index.cfm calls the thumbs_CF8.cfc which returns the div with the thumbs image back to index.cfm
thumbs_CF8.cfc:
...
<!--- script to search and parse out items in order of xml doc --->
<cfscript>
listInXml=ArrayNew(2);
listInXml = XmlSearch(cleanedXml,"//node()[ local-name()='listColumns' or local-name()='combinationChart' or local-name()='dataSource'] ");
for (i = 1; i LTE ArrayLen(listInXml); i = i + 1)
try{ elementsList[i][1] = (listInXml[i].XmlName); } catch (any e) {elementsList[i][1] = 'noName';}
for (i = 1; i LTE ArrayLen(listInXml); i = i + 1)
try{ elementsList[i][2] = (listInXml[i].XmlAttributes['name']); } catch (any e) {elementsList[i][2] = 'noXmlAttrib-Name';}
</cfscript>
<!--- loop to output pngs based on the elementsList --->
<cfset thumbsBuckets = arrayNew(1)>
<cfloop index=i from="1" to="#arrayLen(elementsList)#" >
<cfloop index=j from=1 to=2>
<cfset myArray[i][1] = #elementsList[i][1]# >
<cfset myArray[i][2] = #elementsList[i][2]# >
</cfloop>
<cfif Find("listColumns",myArray[i][1])>
<cfset thumbsBuckets[i] = '<img tabindex="0" class="image" src="#Application.basepath#/images/list-icon.png" style="height: 46px; width:46px;">' >
<!--- labels for icons
<cfif Find("noXmlAttrib-Name",myArray[i][2])>
#myArray[i][1]#</br>
<cfelse>
#myArray[i][2]#</br>
</cfif> --->
<cfelseif Find("combinationChart",myArray[i][1])>
<cfset thumbsBuckets[i] = '<img tabindex="0" class="image" src="#Application.basepath#/images/Bar-chart-icon.png" style="height: 46px; width:46px;">' >
<!---
<cfif Find("noXmlAttrib-Name",myArray[i][2])>
#myArray[i][1]#</br>
<cfelse>
#myArray[i][2]#</br>
</cfif>
--->
<cfelse>
<cfset thumbsBuckets[i] = 'no icon'>
<!--- I didn't find a icon for #name# </br> --->
</cfif>
</cfloop>
<!--- div bucket to put the thumbs into --->
<div >
<cfloop index=i from="1" to="#arrayLen(thumbsBuckets)#" >
<cfif #thumbsBuckets[i]# NEQ 'no icon'>
#thumbsBuckets[i]#
<cfelse>
</cfif>
</cfloop>
</div>
Index.cfm:
<!--- index.cfm where the div thumbs bucket comes back to get displayed --->
<div style="width:50%; height:30%"><!------ thumbs section - under construction --------------------->
<div class="thumbsItemRow">
<cfset xmlToParse = #reportResults.REPORT_XML# >
<cftry>
<cfinvoke component="#thumbObj#" method="makeXML" reportTitle="#reportResults.COG_REPORT_TITLE#" numVersion="#numVersion#" xmlToParse="#xmlToParse#" returnvariable="thumbs">
<cfcatch>No thumbs!</cfcatch>
</cftry>
</div>
<!------ end thumbs section ---------------------> </div>
</div>
Why not make your mark-up conditional based on how many images/charts you need to render in the box... something like:
<div class="chart-container num-charts-#arrayLen(myData.charts)#">
<cfloop from="1" to="#arrayLen(myData.charts)#" index="i">
<div class="chart-item-container">
<img src="#myData.charts[i].imgPath#">
</div>
</cfloop>
</div>
and then have some css:
.chart-item-container {
width: 100%; /* default width */
}
.num-charts-1 .chart-item-container {
width: 100%;
}
.num-charts-2 .chart-item-container {
width: 50%;
}
.num-charts-3 .chart-item-container {
width: 33.3333%;
}
.chart-item-container img {
max-width: 100%; /* ensure image stretches to fill available space */
}