I would like to add a static image to a skuid page. It will be the same on every instance of this page. How can I do this?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
For one of my skuid pages I would like a specific image shown to the users whenever then open the page. The image is not specific to any account, contact or record. Any ideas?
Photo of Paul Becker

Paul Becker

  • 140 Points 100 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Mordechai

Mordechai

  • 968 Points 500 badge 2x thumb
you can add a template that loads the image, mark the template to enable html
Photo of Paul Becker

Paul Becker

  • 140 Points 100 badge 2x thumb
Thanks for the quick reply Jack. Not sure I follow you. What kind of template should a create that can load the image?
Photo of Mordechai

Mordechai

  • 968 Points 500 badge 2x thumb
in the "components" tab of the page builder there's a "template" component. drag the component to where you want the image to show, remove the contents (field labeled "Template"), deselect the "Allow HTML" checkbox and put the "img" tag into the contents of the field labeled "Template".

Also, make sure to deselect the "Do not run template on each row" checkbox.
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb
Paul,
I think you'll have to load your image as a "static resource" in your salesforce org.... when you do that it gives you a link you can click on to see the image... and that link is the URL that you can put into the template
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
Jack's answer is correct. Here's a screenshot showing an example of what this would look like. In this example, we are showing an image that we have stored as a Document, so it is accessible through the /servlet/servlet.FileDownload?file= syntax. Depending on where/how your static image is stored, of course, you may need to do something different to get your image to show up.

Photo of GUHA

GUHA

  • 114 Points 100 badge 2x thumb
Hey Zach! Wouldn't this file id in the url change when we migrate this page to production? how can we fix that? is there any work around without using the file id? 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
GUHA the NAME of the static resource will not change during migrations.  The ID's might.  Our reccomended syntax is to use the resource name,  like so:  

/resource/NAME_OF_STATIC_RESOURCE/NAME_OF_FOLDER/FILE_NAME 
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Hey Zach ... how would this work in a packaged app scenario? We can't hard code the ID of an image stored as document because it will vary from org to org. I tried using an image stored as static resource, but couldn't get the standard Salesforce syntax to work.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
We often use that syntax to get dynamic images to show up.  Its a hack we use to get images to populate in a regular table display.  See here: http://community.skuidify.com/skuid/topics/show_skuid_photo_in_tab_page_within_table .  Glenn in your case I can imagine the package including an object with data about the org. Maybe called Practice__r  (or maybe its just another account with some indicator).  This object has the image reference established.  In your page you include that object in a model - and include the image reference.  And in your template you use the the add the image field inside {{{triple braces}}}.   I think it should work... 
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
I'm nearly with you, but not quite. Might be down to lingering jet lag. :)

Our first use case is to ship some standard brand images with our app, like our logo in the left corner of our top nav on all of our Skuid pages. In Visualforce, I would typically do that by uploading the logo image as a static resource and refer to it using {!$Resource.LogoImage}. Am I right in thinking that that syntax doesn't work in Skuid?

And are you saying as an alternative to upload the logo image as a document (via the standard Documents tab) and store the id of that document in a field on an object and return that field in a Skuid model? We use that approach already for photos of contact people, so it's familiar.

But am I right in thinking that the first method takes advantage of caching through the Akamai CDN, whereas the second perhaps doesn't?

So many questions ...
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
Glenn,

For managed packages, I would put your images in a StaticResource.

You could put all of your images in a single StaticResource (in a folder, then zip the folder, and upload the ZIP file as a StaticResource), or you could create a separate StaticResource for each Image. The first method is probably a lot cleaner, although it might be a little more work to maintain (having to rezip every time you want to change an image, then re-upload, as opposed to just re-uploading).

Regardless, you should be able to access the URLs for these Images included in your StaticResources and display them with Skuid.

Let's do the first one as an example.

Say we have 2 images. Lets put them in a folder. The folder name matters, as you'll have to use this later. Notice that we called it "MyImages".



Now, we need to ZIP / compress this folder.



Next, we will upload this ZIP to a new Static Resource in Salesforce:





Notice that we called our StaticResource "MyImages". It matters what we call it, but it does NOT have to be the same as our original Folder name. Just incidentally they happen to be the same name.

Now, let's show our Images in a Skuid Page.

The best way to show an Image is to use the Template component. So let's drag in a Template component, then edit its properties:



Notice that we have "Allow HTML" and "Do not run template on each row" both checked. Allow HTML doesn't really matter --- it just affects the Preview of the Template component within the Page Builder (at least as of Skuid versions , it would look like this:

/resource/acme__MyImages/MyImages/SkuidLogo.png
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
For some reason my post is not letting me edit anymore. Here is the syntax for our URL:

/resource/MyImages/MyImages/SkuidLogo.png

The contents of any StaticResource are accessible via this generic URL Syntax:

/resource/NAME_OF_STATIC_RESOURCE/NAME_OF_FOLDER/FILE_NAME

***** If your StaticResource is in a Managed Package, you will need to prepend the Namespace Prefix to NAME_OF_STATIC_RESOURCE **** , e.g. if your package's NamespacePrefix is "acme", it would look like this:

/resource/acme__MyImages/MyImages/SkuidLogo.png
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Bingo. It's that last line that's the killer. I was trying to use the !Resource syntax, but this works a treat. Mystery solved.

Thanks gents.
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
This is exactly what I am trying to do however when I zip up the file and link to it as a resource nothing shows. When I just use the static url I get the image in Chrome but no image shows in firefox. Here is the code: <img src="/resource/logomarksvg/logomark/logomark.png"/ >

Any thoughts?