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 Image vertically sandwiched between the Above Text and the Below Text.

For example, I have this set of 25 formula variables.  

The abbreviations stand for
$Ax = Above Text=
$Ix = Image
$Bx =  Below Text

var text PA = "<h3><b>" & $AA & "</h3>" & $IA & "<h4>" & $BA & "</h4>";
var text PB = "<h3><b>" & $AB & "</h3>" & $IB & "<h4>" & $BB & "</h4>";
var text PC = "<h3><b>" & $AC & "</h3>" & $IC & "<h4>" & $BC & "</h4>";
etc....
var text PY = "<h3><b>" & $AY & "</h3>" & $IY & "<h4>" & $BY & "</h4>";

Any one of these is fine on its own as my "sandwich", but my problem is that I cannot figure out how to make them go horizontally to be 5 wide.  I know that won't deal with the other 20, but I figure one step at a time towards my ultimate goal.

The look I'm trying to achieve is a bit like this if it was a 5 x 5 grid.

https://login.quickbase.com/db/9kaw8phg?a=ShowPage&pageid=160


 



------------------------------
Mark Shnier (YQC)
Quick Base Solution Provider
Your Quick Base Coach
http://QuickBaseCoach.com
mark.shnier@gmail.com
------------------------------
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
      ------------------------------