The embeddable report card photo stream allows you to display a collection of recently uploaded report card photos on your website. This photostream will automatically update as you upload new report card pictures to Gingr.
Important Notes
- Only pet parents who are not "Opted Out of Photo Sharing" will be included in the stream.
- By default, only report card files from the past 5 days will display (limited to 50 max).
- The photo stream does not include customer names- only pet names and the date the photo was uploaded.
How to Embed on Website
We've included videos below on how to embed the report card photostream on WordPress and Squarespace websites. While the steps will vary a bit between Content Management Systems (CMS), here are some more generalized instructions.
- First, you'll need to add Gingr's embeddable code to your website. You'll want to add this to the <head> section of your website. Many CMS' call this "Code Injection" or "Custom Header Code". Locate where to embed header code on your website and paste the following code between <head> and </head>.
-
<script type="text/javascript" src="https://storage.googleapis.com/gingr-embeddable/assets/js/bundle.js"></script>
-
- Next, you'll want to paste another bit of code exactly where you would like your photostream to be displayed. You'll be pasting in HTML, or Source Code into your website. Be sure to not paste this directly into a rich-text editor or text block.
-
<script>
window.GingrForms.createPhotoStream({
subdomain: 'inputyoursubdomainhere',
apiKey: '(find your API key by editing your User profile, paste without parenthesis)',
limit: 10,
days: 5
})
</script>
-
- Now, save your changes. The photostream is now embedded where you pasted the code in step #2. See below for some example videos.
How to Embed on WordPress
How To Embed on Squarespace
Advanced Settings
It's possible to add the code anywhere in your HTML document and provide a target to add the photostream to. This way, you don't have to paste the code exactly where you want the stream displayed on the page. Here's an example HTML document that contains examples of explicit targeting: https://storage.googleapis.com/gingr-embeddable/photostream.html
<script>
window.GingrForms.createPhotoStream({
subdomain: 'dev-prod',
target: "div#exampleTargetContainer",
limit: 50,
days: 5
})
</script>
As you can see, we've added a "target" property to the options object which contains a CSS selector to a DOM element, in this example a div with ID exampleTargetContainer.
It's also possible to customize the number of images that the photo stream should display at any time. By default, this is set to 50 images, but you can customize it by changing the "limit" property to any number you wish.
<script>
window.GingrForms.createPhotoStream({
subdomain: 'dev-prod',
target: "div#exampleTargetContainer",
limit: 100,
days: 5
})
</script>
In the above example, we've changed the limit from 50 to 100 images. Up to 100 images will now be displayed.
It's also possible to change the number of days the photo stream should be looking at when loading images. By default, this is set to 5 days, but you can customize it by changing the "days" property to any number you wish.
<script>
window.GingrForms.createPhotoStream({
subdomain: 'yoursubdomain',
target: "div#exampleTargetContainer",
limit: 50,
days: 10
})
</script>
In the above example, we've changed the days property from 5 to 10 days. The stream will now include photos from up to 10 days in the past.
Alternative Option
We've also built a page in the Gingr customer portal that displays the report card photostream. It can be found at https://{subdomain}.gingrapp.com/front_end/photo_stream. Be sure to replace {subdomain} with the subdomain of your Gingr application (i.e. if your Gingr URL is demo.gingrapp.com, your subdomain is demo). You can embed the photo stream into your website with an iFrame to this URL.
<iframe src="https://{subdomain}.gingrapp.com/front_end/photo_stream" frameborder="0" width="100%" height="800"></iframe>
Comments
0 comments
Article is closed for comments.