Forum Discussion

MarkShnier__You's avatar
MarkShnier__You
Icon for Qrew Legend rankQrew Legend
5 years ago

Aligning images in a 5 x 5 block

I have a child table of images along with shall we call it Above Text and Below Text. My goal is to roll 25 images up into a 5 x 5 block on the parent record where each cell in the block has the Im...
Relationships
Tables and fields
AustinK's avatar
AustinK
Qrew Commander
5 years ago
This reminded me of Adam Keever's post with that health thing he wanted in a grid. I checked that out and I think that does most of what you want. https://community.quickbase.com/communities/community-home/digestviewer/viewthread?MessageKey=915c48c8-7d85-42ff-ac5f-6f82e364d680&CommunityKey=d860b0f8-6a48-487b-b346-44c47a19a804&tab=digestviewer#bm915c48c8-7d85-42ff-ac5f-6f82e364d680

I assumed this was in a Formula Rich Text field but you did not mention that. I only did 3 columns and 2 rows for mine because my images are larger than they should be for this, they are 500x500 each. From the description you gave I believe this is what you were asking for, or at least a rough mock up of it.


The end of the formula to do that was this. This is also probably bad because I don't even open a table tag or anything to do this, I just add the rows. 

"
<tr>
<td> " & $PA & "</td>
<td> " & $PB & "</td>
<td> " & $PC & "</td>
</tr>
<br>
<tr>
<td> " & $PA & "</td>
<td> " & $PB & "</td>
<td> " & $PC & "</td>
</tr>
"
  • MarkShnier__You's avatar
    MarkShnier__You
    Icon for Qrew Legend rankQrew Legend
    5 years ago
    Here is my final formula.  I use a Combined text summary field to float up the
    Style#
    Image
    Description

    fields from the child record.  They are formatted like this
    Style|Image|Description

    So the formula below separates out the different child records into separate formula variables and then separates each child record back into its three parts.   The images are arranged 5 across and then break to a new row after each set of 5, to a max of 25 images, 5 x 5.

    var text Images = ToText([Combined Text Image, Style# & Description]);

    // Cx = Combined Image, Style and Description.
    var text CA = Trim(Part($Images,1,";"));
    var text CB = Trim(Part($Images,2,";"));
    var text CC = Trim(Part($Images,3,";"));
    var text CD = Trim(Part($Images,4,";"));
    var text CE = Trim(Part($Images,5,";"));
    var text CF = Trim(Part($Images,6,";"));
    var text CG = Trim(Part($Images,7,";"));
    var text CH = Trim(Part($Images,8,";"));
    var text CI = Trim(Part($Images,9,";"));
    var text CJ = Trim(Part($Images,10,";"));
    var text CK = Trim(Part($Images,11,";"));
    var text CL = Trim(Part($Images,12,";"));
    var text CM = Trim(Part($Images,13,";"));
    var text CN = Trim(Part($Images,14,";"));
    var text CO = Trim(Part($Images,15,";"));
    var text CP = Trim(Part($Images,16,";"));
    var text CQ = Trim(Part($Images,17,";"));
    var text CR = Trim(Part($Images,18,";"));
    var text CS = Trim(Part($Images,19,";"));
    var text CT = Trim(Part($Images,20,";"));
    var text CU = Trim(Part($Images,21,";"));
    var text CV = Trim(Part($Images,22,";"));
    var text CW = Trim(Part($Images,23,";"));
    var text CX = Trim(Part($Images,24,";"));
    var text CY = Trim(Part($Images,25,";"));

    // Sx = Image x
    // but IF is not a valid name for formula variable so its IIF
    var text IA = Left($CA,"|");
    var text IB = Left($CB,"|");
    var text IC = Left($CC,"|");
    var text ID = Left($CD,"|");
    var text IE = Left($CE,"|");
    var text IIF= Left($CF,"|");
    var text IG = Left($CG,"|");
    var text IH = Left($CH,"|");
    var text II = Left($CI,"|");
    var text IJ = Left($CJ,"|");
    var text IK = Left($CK,"|");
    var text IL = Left($CL,"|");
    var text IM = Left($CM,"|");
    var text IN = Left($CM,"|");
    var text IO = Left($CO,"|");
    var text IP = Left($CP,"|");
    var text IQ = Left($CQ,"|");
    var text IR = Left($CR,"|");
    var text IS = Left($CS,"|");
    var text IT = Left($CT,"|");
    var text IU = Left($CU,"|");
    var text IV = Left($CV,"|");
    var text IW = Left($CW,"|");
    var text IX = Left($CX,"|");
    var text IY = Left($CY,"|");

    // Sx = Style # x

    var text SA = Part($CA,2,"|");
    var text SB = Part($CB,2,"|");
    var text SC = Part($CC,2,"|");
    var text SD = Part($CD,2,"|");
    var text SE = Part($CE,2,"|");
    var text SF = Part($CF,2,"|");
    var text SG = Part($CG,2,"|");
    var text SH = Part($CH,2,"|");
    var text SI = Part($CI,2,"|");
    var text SJ = Part($CJ,2,"|");
    var text SK = Part($CK,2,"|");
    var text SL = Part($CL,2,"|");
    var text SM = Part($CM,2,"|");
    var text SN = Part($CN,2,"|");
    var text SO = Part($CO,2,"|");
    var text SP = Part($CP,2,"|");
    var text SQ = Part($CQ,2,"|");
    var text SR = Part($CR,2,"|");
    var text SS = Part($CS,2,"|");
    var text ST = Part($CT,2,"|");
    var text SU = Part($CU,2,"|");
    var text SV = Part($CV,2,"|");
    var text SW = Part($CW,2,"|");
    var text SX = Part($CX,2,"|");
    var text SY = Part($CY,2,"|");


    // Dx = Description
    var text DA = Right($CA,"|");
    var text DB = Right($CB,"|");
    var text DC = Right($CC,"|");
    var text DD = Right($CD,"|");
    var text DE = Right($CE,"|");
    var text DF = Right($CF,"|");
    var text DG = Right($CG,"|");
    var text DH = Right($CH,"|");
    var text DI = Right($CI,"|");
    var text DJ = Right($CJ,"|");
    var text DK = Right($CK,"|");
    var text DL = Right($CL,"|");
    var text DM = Right($CM,"|");
    var text DN = Right($CM,"|");
    var text DO = Right($CO,"|");
    var text DP = Right($CP,"|");
    var text DQ = Right($CQ,"|");
    var text DR = Right($CR,"|");
    var text DS = Right($CS,"|");
    var text DT = Right($CT,"|");
    var text DU = Right($CU,"|");
    var text DV = Right($CV,"|");
    var text DW = Right($CW,"|");
    var text DX = Right($CX,"|");
    var text DY = Right($CY,"|");

    // Px is picture, meaning all three parts together
    var text PA = "<div><h3><b>" & $SA & "</h3>" & $IA & "<h4>" & $DA & "</h4></div>";
    var text PB = "<div><h3><b>" & $SB & "</h3>" & $IB & "<h4>" & $DB & "</h4></div>";
    var text PC = "<div><h3><b>" & $SC & "</h3>" & $IC & "<h4>" & $DC & "</h4></div>";
    var text PD = "<div><h3><b>" & $SD & "</h3>" & $ID & "<h4>" & $DD & "</h4></div>";
    var text PE = "<div><h3><b>" & $SE & "</h3>" & $IE & "<h4>" & $DE & "</h4></div>";
    var text PF = "<div><h3><b>" & $SF & "</h3>" & $IIF & "<h4>"& $DF & "</h4></div>";
    var text PG = "<div><h3><b>" & $SG & "</h3>" & $IG & "<h4>" & $DG & "</h4></div>";
    var text PH = "<div><h3><b>" & $SH & "</h3>" & $IH & "<h4>" & $DH & "</h4></div>";
    var text PI = "<div><h3><b>" & $SI & "</h3>" & $II & "<h4>" & $DI & "</h4></div>";
    var text PJ = "<div><h3><b>" & $SJ & "</h3>" & $IJ & "<h4>" & $DJ & "</h4></div>";
    var text PK = "<div><h3><b>" & $SK & "</h3>" & $IK & "<h4>" & $DK & "</h4></div>";
    var text PL = "<div><h3><b>" & $SL & "</h3>" & $IL & "<h4>" & $DL & "</h4></div>";
    var text PM = "<div><h3><b>" & $SM & "</h3>" & $IM & "<h4>" & $DM & "</h4></div>";
    var text PN = "<div><h3><b>" & $SN & "</h3>" & $IN & "<h4>" & $DN & "</h4></div>";
    var text PO = "<div><h3><b>" & $SO & "</h3>" & $IO & "<h4>" & $DO & "</h4></div>";
    var text PP = "<div><h3><b>" & $SP & "</h3>" & $IP & "<h4>" & $DP & "</h4></div>";
    var text PQ = "<div><h3><b>" & $SQ & "</h3>" & $IQ & "<h4>" & $DQ & "</h4></div>";
    var text PR = "<div><h3><b>" & $SR & "</h3>" & $IR & "<h4>" & $DR & "</h4></div>";
    var text PS = "<div><h3><b>" & $SS & "</h3>" & $IS & "<h4>" & $DS & "</h4></div>";
    var text PT = "<div><h3><b>" & $ST & "</h3>" & $IT & "<h4>" & $DT & "</h4></div>";
    var text PU = "<div><h3><b>" & $SU & "</h3>" & $IU & "<h4>" & $DU & "</h4></div>";
    var text PPV = "<div><h3><b>"& $SV & "</h3>" & $IV & "<h4>" & $DV & "</h4></div>";
    var text PW = "<div><h3><b>" & $SW & "</h3>" & $IW & "<h4>" & $DW & "</h4></div>";
    var text PX = "<div><h3><b>" & $SX & "</h3>" & $IX & "<h4>" & $DX & "</h4></div>";
    var text PY = "<div><h3><b>" & $SY & "</h3>" & $IY & "<h4>" & $DY & "</h4></div>";

    "<table><tr>"

    &

    List("&nbsp;",

    If($IA<>"", "<td>" & $PA & "</td>"),
    If($IB<>"", "<td>" & $PB & "</td>"),
    If($IC<>"", "<td>" & $PC & "</td>"),
    If($ID<>"", "<td>" & $PD & "</td>"),
    If($IE<>"", "<td>" & $PE & "</td>") & If($IIF<>"", "</tr><br><tr>"),

    If($IIF<>"", "<td>"& $PF & "</td>"),
    If($IG<>"", "<td>" & $PG & "</td>"),
    If($IH<>"", "<td>" & $PH & "</td>"),
    If($II<>"", "<td>" & $PI & "</td>"),
    If($IJ<>"", "<td>" & $PJ & "</td>") & If($IK<>"", "</tr><br><tr>"),

    If($IK<>"", "<td>" & $PK & "</td>"),
    If($IL<>"", "<td>" & $PL & "</td>"),
    If($IM<>"", "<td>" & $PM & "</td>"),
    If($IN<>"", "<td>" & $PN & "</td>"),
    If($IO<>"", "<td>" & $PO & "</td>") & If($IP<>"", "</tr><br><tr>"),

    If($IP<>"", "<td>" & $PP & "</td>"),
    If($IQ<>"", "<td>" & $PQ & "</td>"),
    If($IR<>"", "<td>" & $PR & "</td>"),
    If($IS<>"", "<td>" & $PS & "</td>"),
    If($IT<>"", "<td>" & $PT & "</td>") & If($IU<>"", "</tr><br><tr>"),

    If($IU<>"", "<td>" & $PU & "</td>"),
    If($IV<>"", "<td>" & $PPV & "</td>"),
    If($IW<>"", "<td>" & $PW & "</td>"),
    If($IX<>"", "<td>" & $PX & "</td>"),
    If($IY<>"", "<td>" & $PY & "</td>")


    )

    & "</tr></table>"



    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------