Image handling/gallery examples?

  • 3
  • Question
  • Updated 1 year ago
  • Answered
  • (Edited)
Has anyone gotten an example of an image gallery working with Skuid, in particular using Chatter Files (not the skuid-shipped custom object for images)? Use cases of interest are:
a) create a sexy list of thumbnails for files from the chatter feed of a record
b) display the full size image

This seems like such a possibly awesome use for Skuid and yet I'm not finding anything that points me at how this can be done well (without old school attachments or the skuid custom object). Guidance, shares and pointers appreciated!

Thanks,
-cjj
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
  • curious and hopeful

Posted 4 years ago

  • 3
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,848 Points 20k badge 2x thumb
I don't know what other people have done,  but here is a strategy. 

Create a chatterFiles model. 
- sObject is ContentDocument
- bring in whatever fields you want. Make sure you include LatestPublishedVersionId

Drag a field editor onto your page. 
- Make "labels appear above fields" 
- Remove all but one column,  and remove the column width property. 
- Give the field editor a css class:  Somthing like "responsive-field-editor"
- Add any metadata fields you want to the field editory.  I added title and created date. 
- Add a template to the field editor with the following code: 

<img src="/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId={{{LatestPublishedVersionId}}}" height="200" style="margin:1px;"></img>

Add a CSS resource with the following code to provide the responsive display with the field editor.  

.responsive-field-editor .nx-item {    display: inline-block;
    padding-right: 10px;
}

That will give you somthing like this Skuid Summer activities board.   (where we show off the latest peach eating and bike riding...) 



I think that's pretty sexy. No? 
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
woooooo! That's pretty sexy, Rob! Now, how about on-click behavior? Did you add anything in for that use?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
I would recommend using lightbox for onclick awesomeness.

http://lokeshdhakar.com/projects/lightbox2/ 
Photo of Kaede Holland

Kaede Holland

  • 3,016 Points 3k badge 2x thumb
Any new possibilities on this front with new Banzai capabilities?
Photo of Pat Vachon

Pat Vachon, Champion

  • 44,526 Points 20k badge 2x thumb
I'd go with a mobile skuid page for this. You get the same capability as provided by Rob, but you'd also have the ability to setup an "Interaction" for each "Card" in the "Deck" component. Like so...



Poor neglected Mobile Skuid Pages... often overlooked and under appreciated. You're like the Louis Litt in the Skuid family. You stick it to him Mobile Skuid Page! Stick it to him!

Sorry ... binge watching Suits. :S
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
Ahha! Nice! Does it work to have a page include of a Mobile page in a desktop page? I have it working in the mobile page but it doesn't do anything when I include it in the existing desktop page. Hoping this is possible!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,848 Points 20k badge 2x thumb
There is not really a very elegant way to include mobile pages within desktop pages.  The run-times are really totally different.  An iFrame might work,  but isn't exaclty reccomended. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 9,990 Points 5k badge 2x thumb
iFrame still the best way to include a mobile page in a desktop page?
Photo of Chad Gill

Chad Gill

  • 1,384 Points 1k badge 2x thumb
anyone find a better chatter photo gallery approach with new composer?