Changing order of results to fit images into available space

Since you can only accomodate 4x100 OR 1x300+1x100, you'll need a way to alternate the 100 and 300px grahics. If you set the 300px graphics to an "odd" incrementation scheme and the 100 px graphics to an even incremental scheme, you'll get something like this:

Assuming 2 300px graphics and 6 100px graphics:

WIDTH, IMAGEORDER
====================
300px, 1 <--- First 300px graphic (odd)
100px, 2 <--- First 100px graphic (even)
100px, 4 <--- Second 100px graphic (even)
100px, 6
300px, 3 <!--- Second 300px graphic (odd)
100px, 8
100px, 10
100px, 12

Now when you order the data, you get something like this:

WIDTH, IMAGEORDER
====================
300px, 1
100px, 2 <!--- 400 px (First Row)
300px, 3
100px, 4 <--- 400 px (Second Row)
100px, 6
100px, 8
100px, 10
100px, 12 <!--- 400 px (Third Row)

Once the data is ordered, you just have to keep a running tally of the pixel width for all the graphics in a row - as soon as you get to 400, create a new row.

<table>
<tr>
<td>
<cfset iRowWidth = 0>
<cfoutput query="myOrderedQuery">
<!--- Make New Row --->
<cfif iRowWidth gte 400>
</td></tr><tr><td>
<cfset iRowWidth =0>
</cfif>

<!--- output image --->
<img src="#myImage#" width="#myImageWidth#">
<cfset iRowWidth = iRowWidth + myImageWidth>
</cfoutput>
</td>
</tr>
</table>

If you know your images are going to be only 300 and 100 px wide, maybe something like this?

1) Add a column to your query called "imageorder" (QueryAddColumn)
2) Loop over your query and assign an incremented value to myQuery.imageorder based on the width of the image (300 px - odds, 100px evens) - Take a look at QuerySetCell() and myQuery.currentRow
3) Use Query of Query to order by imageorder.

Then its just a matter of looping through your query. You'd just have to keep an eye on the width of each row and place the correct HTML code when a new row needs to be created.

I'm not sure you can do this with native CF7 and below. The CF8 however has image reading capabilities that can give you all sorts of information.

I guess then with the new features you could construct some if else logic to do the formatting you require.