Advanced Settings for the Embeddable Report Card Photostream

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.

Related Resources

• Embeddable Report Card Photostream Topic Outline
• Embed Photostream on Website How-To