Forum Discussion

JenniferMeyer's avatar
Qrew Member
2 years ago

Is there a way to make this happen?

I want to have a place to store our photos in Google Drive and have them present on a page similar to the photo I have attached here.  Any ideas on how to achieve this?

Jennifer Meyer

2 Replies

  • Jennifer,

    We have done this several times in our applications. It was a challenging puzzle but we finally got it working. If you are able to export a csv file of the photo links from Google, this method should work for you as well. Note that at least in Box (which we use as our cloud storage platform for this purpose), there are several types of links that can be produced. I believe we use the Share Link to display the photo on its own without the Box previewer and full navigation showing up. Play around with different link types if you are having similar issues.

    We use a separate Photos table with links to the photo on the cloud server and create a [Preview] rich text field with an <img> tag to display the photo. If you want to add text under the photo like you have in your screenshot, you can also do this in the [Preview Field] with a bit more HTML. I'd also suggest setting a max-width and max-height in the <img> tag to keep the photos at a reasonable size. 

    Our [Preview] formulas is:
    "<img src=" & ToText([Box URL]) & " style='max-height:300px;max-width:300px'></img>"

    Next, you create a relationship with the parent table (call it Assets for now). Either allow it to create a new Related Asset field or create the field manually in the Photos table. You can then create a summary field of Combined Text type on the Preview field. This will create a multi-select field of all your photo previews. On your Assets table, create a formula-text field such as [Photo List] and the entire formula is:
    ToText([Combined Text Preview])

    This [Photo List] field will then display all your images back to back similar to your screenshot (with some pesky semi-colons between them). Note that if you want to have each photo linked to open full-screen or anything, you will need another field to parse each photo link out, such as: 

    var text photourls = [Photo List];

    If(Part($photourls,1,";") != null,
    "<a href='" & Part($photourls,1,";") & "' target='_blank'>" &
    "<img height='200' src='" & Part($photourls,1,";") & "'/> </a>") &

    If(Part($photourls,2,";") != null,
    "<a href='" & Part($photourls,2,";") & "' target='_blank'>" &
    "<img height='200' src='" & Part($photourls,2,";") & "'/> </a>") &

    If(Part($photourls,3,";") != null,
    "<a href='" & Part($photourls,3,";") & "' target='_blank'>" &
    "<img height='200' src='" & Part($photourls,3,";") & "'/> </a>")

    Either way, your end result looks like this:

    Hope this helps point you in the right direction!

    Oana Toma
  • Brainstorming

    • Use iFrame to showcase Actual Google drive page into the webpage 
    • Use iFrame to showcase Actual Google photos page with albums into webpage 
    • if number of items are fixed , use RichText Table to show a grid of 3X3; 4X4 ; 5X5 etc to showcase pictures below (this would be pain)
    • Use ReportLink which showcases a KANBAN report with pictures inside to show a grid of images

    Prashant Maheshwari