Image handling/gallery examples?

  • 3
  • Question
  • Updated 6 months 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 3 years ago

  • 3
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 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,646 Points 5k badge 2x thumb
I would recommend using lightbox for onclick awesomeness.

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

Kaede Holland

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

mB Pat Vachon, Champion

  • 42,714 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,006 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

  • 8,322 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,194 Points 1k badge 2x thumb
anyone find a better chatter photo gallery approach with new composer?
Photo of Griffin Brown

Griffin Brown

  • 2,766 Points 2k badge 2x thumb
Seems bold to ask questions about arranging "Sexy Images."

What's you're use case ;-)
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
I am making some progress here by querying ContentDocuments based on words in the Chatter File's description. However, that won't really work in the long run. 

I would like to query ContentDocuments based on TopicAssignments for a specific Topic, but am having a tough time. I've tried frontways and backways and sideways and no ways get me to the right way. 

I think I need to access the EntityId of TopicAssignment records, but it doesn't seem like that is an accessible field. It is just blank when I query it. 

This:


Results in this:
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Kaede,  I went looking through the community for posts about Topics.  But I found that they all were from you.  We'll just call you Ms Topics.

Have you seen Zach's code for topic management?  It may provide some direction on working up from topic assignment.  https://github.com/skuidify/SamplePages/blob/master/pages/Topic%20Management%20by%20Object
(Edited)
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
I built this on a Contact Detail page, but unfortunately it is displaying any photos that I have uploaded to Chatter...regardless of which Contact was "tagged" (I guess is how you would say it in SF lingo) in the chatter file at time of upload.

Is there any way to conditionally display only files for the contact record I am looking at?

It doesn't look like the ContentDocument object has any fields that relate to another object...can I use the ContentDocumentLink object, and if so can someone walk me through it (I'm kinda a noob).

Thanks! 
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Just figured it out...

I had to create a condition to set the page/url parameter Id (my contact id) to be =

LatestPublishedVersion.FirstPublishLocation.Id

The FirstPublishLocation was a bit unintuitive, so it was just a matter of trying out a lot of the fields on the ContentDocument object.
Photo of susan.nordquist

susan.nordquist

  • 354 Points 250 badge 2x thumb
Does anybody know what the src URL would be if you use file attachments instead of chatter Files?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
This is how I show links to Attachments, you need to pull in the attachment you want into a model, or as a child relationship on a parent model, and include both Id (Attachment Id) and Name (File Name) fields

<a href="{{$Site.Prefix}}/servlet/servlet.FileDownload?file={{{Id}}}" target="_blank">{{{Name}}}</a>

note: {{$Site.Prefix}} is only necessary if you use Communities, otherwise you can drop it. But it won't hurt to leave it on there :)
(Edited)
Photo of susan.nordquist

susan.nordquist

  • 354 Points 250 badge 2x thumb
Thanks Jack!