Olapic Templates consist of different pieces of template files that are served through widget implementation on your site. Some templates (Header, Footer, Style templates for example) are used on all pages, while other files are used only under specific conditions. All of the template files that you will be working on are located in the "Widget Design" page.

We give you an out-of-the-box template solution for a quick & easy implementation. To take our default template to the next level, it is best practice to identify the main elements that serves the core functionality within our platform. This article goes through the general template file structure as well as the templates specific to the Media Lightbox, the Uploader, and the Slideshow widget.

General Template Structure

Template Deployment / Cache Time

Olapic is set up on a specific architecture which is designed to scale, so there are cache times for all of the production environment varies.

When template files are deployed through the editor, all of the files that have been changed in the Sandbox environment (differing from the live environment files) are deployed to the Live Environment. Once the files are deployed to the live environment, it takes around ~20 minutes to propagate.

This is the case for any changes made to the widgets as well. The only difference is that the widgets do not employ a deploy system, so whatever changes you make to the widget files, it will be reflected on the live environment every time the live environment cache refreshes within 20 minutes.

Deploy Limit

There is a limit of 1 deploy per every minute for each of the template directories. This way, you can queue up a deploy every minute for the full deploy to go through at every 20 minute mark.

File Structure

After you have taken a look at our "Widget Design" tab, it's easier to grasp what template files are used in specific conditions.

For example, we'll take a look at the Upload process (photo upload modal) template set. Following is a list of the template files that All Photos use:

Header
- Global header content for the uploader
Footer
- Global footer content for the uploader
Source Selection
- Step 1 - Main splash page for the upload process where user is presented with different photo sources to choose from.
Source HD
- Step 2 - Photo selection via computer step.
Source Instagram
- Step 2 - Photo selection via Instagram account
Source Facebook
- Step 2 - Photo selection via Facebook account
Source Flickr
- Step 2 - Photo selection via Flickr account
Label
- Step 3 - Photo captioning process
Login
- Step 4 - Login process
Thank you
- Step 5 - Thank you page after submit confirmation
Styles
- CSS for the uploader component
Modal
- Wrapper markup that contains the upload steps
JS Callbacks

Media Lightbox

Within the "Global Components" tab of the editor, you will see a template set called "Media Lightbox". This is our photo modal that displays as an overlay when you click on a photo item from a particular widget.

We provide the following templates:

Show Media
Styles
Report photo
Overlay
JS Callbacks

Show Media

This template contains the HTML markup with different variables that you can move around (they use handlebars). All front-end mark-up is modifiable.

Information on .products-list element

Our front-end JS targets <ul class="products-list"> and binds specific functions such as next/prev navigation animation, etc. This class is important as it will hold all products related to the photo.

By default, the product carousel functionality will be active regardless of the number of product items within the loop. This means that if you have 1 product being displayed within the lightbox, the user will be able to scroll left and right even if there are no other products.

You can add an attribute called data-min-items to the <ul class="products-list"> in order to deactivate the carousel functionality when there are less than the specified value within the attribute.

Example: <ul class="products-list" data-min-items="1">

Styles

This template contains the out-of-box CSS for the lightbox.

JS Callbacks

<script type="text/javascript">
/*
use this template to refine the callbacks used on the viewer
Uncomment the following lines:
*/
var OlapicCallback = OlapicCallback || {};
OlapicCallback.olapicViewer2AfterRender = function(w, e){
    oQuery.getScript('https://platform.twitter.com/widgets.js', function(){
        // script is now loaded and executed.
        // put your dependent JS here.
    });};
OlapicCallback.olapicViewer2AfterShow = function(w){
    // place your code here
};
OlapicCallback.olapicViewer2AfterClose = function(w){
    // place your code here
};</#{{!}}script>

Following are the list of callbacks available within the photo modal component, and description of each callback functions:

OlapicCallback.olapicViewer2AfterRender
- Runs after the template styles,overlay and callbacks are rendered on the DOM
- Parameter: copy of the viewer's object
OlapicCallback.olapicViewer2AfterShow
- Runs when the viewer is complete (with the media's data) and is ready to be shown (when .show() is executed).
- Parameter: copy of the viewer's object
OlapicCallback.olapicViewer2AfterClose
- Runs after .hide() on the div olapic_viewer_overlay is executed
- Parameter: copy of the viewer's object

Share URL Modification

To change the share URL within the lightbox (the URL that gets sent to the social network to be shared), you can swap out the #{{share_url}} value to have the following convention: http://www.myshop.com/gallerypage#opi#{{id}}

We are passing the value of href attribute to our share box functionality, so you can change this to reflect the actual URL of the gallery you want to share, plus the #opi hash. The #opi hash is utilized by our front-end JS to pop out the viewer with the particular media ID (which can be referenced by using #{{id}} variable).

Before:

<div class="sharing">
    <ul>
        <li>
            <a class="sharing-fb" href="#{{share_url}}?fb_ref=m"><i class="olapic-icon-facebook"></i></a>
        </li>
        <li>
            <a class="sharing-tw" href="#{{share_url}}" title="#{{caption}}"><i class="olapic-icon-twitter"></i></a>
        </li>
        <li>
            <a class="sharing-pi" href="http://pinterest.com/pin/create/button/?url=#{{share_url}}&media=#{{images.normal}}"><i class="olapic-icon-pinterest"></i></a>
        </li>
    </ul>
</div><!-- end sharing -->

After:

<div class="sharing">
  <ul>
    <li>
      <a class="sharing-fb" href="http://www.myshop.com/gallerypage#opi#{{id}}?fb_ref=m"><i class="olapic-icon-facebook"></i></a>
    </li>
    <li>
      <a class="sharing-tw" href="http://www.myshop.com/gallerypage#opi#{{id}}" title="#{{caption}}"><i class="olapic-icon-twitter"></i></a>
    </li>
    <li>
      <a class="sharing-pi" href="http://pinterest.com/pin/create/button/?url=http://www.myshop.com/gallerypage#opi#{{id}}&media=#{{images.normal}}"><i class="olapic-icon-pinterest"></i></a>
    </li>
  </ul>
</div><!-- end sharing -->

Extensive Share URL Modification

In order to make the href value "truly" dynamic (relative to the environment, so no hardcoding), you want to use the callback.

Callback:

//js
OlapicCallback.olapicViewer2AfterShow = function(w){
    // construct new share url
    var newShareUrl = location.protocol + '//' location.hostname + '#opi' + w.data.id;    // replace existing href
    oQuery(".share-wrap a[class^='sharing-']").each(function(e){
        oQuery(this).attr('href',newShareUrl)
    });
};

HTML (notice that the href value stays the same, since it's going to get overridden by the callback):

<div class="sharing">
    <ul>
        <li>
            <a class="sharing-fb" href="#{{share_url}}?fb_ref=m"><i class="olapic-icon-facebook"></i></a>
        </li>
        <li>
            <a class="sharing-tw" href="#{{share_url}}" title="#{{caption}}"><i class="olapic-icon-twitter"></i></a>
        </li>
        <li>
            <a class="sharing-pi" href="http://pinterest.com/pin/create/button/?url=#{{share_url}}&media=#{{images.normal}}"><i class="olapic-icon-pinterest"></i></a>
        </li>
    </ul>
</div><!-- end sharing -->

Header

For the sake of simplicity and speed, the styles for the Uploader are set in the style file. You can add metadatas or more styles in this template.

In most cases, you won't need to modify this file. Here is where you close the </body> and </html>tags.

Source Selection

Source selection shown when clicking on the Upload your photo in a widget or in the galleries.

Sources

Hard Drive: Select photos from your computer, select files and upload
Instagram: Upload photos from your Instagram account
Facebook: Select your album and then your photos from your Facebook account
Flickr: Select your album and then your photos from your Flickr account

Photo Upload Limit

You can select as many photos as you would like during upload process, however there is a 20mb max limit (combined).

Label

Enter the Caption for each selected photo, work as description or identification.

By default, you can allow users to login with your Facebook account or any email. Only the first time, then we are going to remember your login preferences.

Thank You

Show a thank you message after a successful upload.

Styles

This file is included in the header. Here you can edit existing CSS id's and classes to customize the look and feel of the templates.

JS Callbacks

This file is includes the JS callbacks provided for you to create any custom event triggers that are related to the upload process.

olapicUploaderAfterRender
- Runs after the template modal and callbacks are rendered on the DOM
- Parameter: copy of the uploader's object
olapicUploaderBeforeOpen
- Runs just before fire the function modal that open the dialog box
- Parameter: copy of the uploader's object
olapicUploaderAfterClose
- Runs in the callback from the close function of the modal.
- Parameter: copy of the uploader's object

Mobile Upload Process

This template folder has the same structure as Upload Process template folder, but optimized for mobile devices.

Slideshow Widget

Slideshows are another way to show your galleries photo streams. They read data from our API and they can be customized through our Editor on the admin section. To activate this feature, please contact techsupport@socialnative.com.

Fullscreen slideshow

Show one photo at time in the middle of the screen.

Configurations

You can edit this configuration editing the Fullscreen Template:

var slideoptions = {
    //preload images
    itemsFirstload: 6,
    //appear photo time on miliseconds
    viewphototime : 5000,
    //search photos interval on miliseconds
    searchinterval : 10000,
    //photo appear speed
    appearspeed : 450,
    //show image loader
    showloader : true,
    //loader id
    loaderid: 'loader',
    //slider wrapper id
    wrapperID: 'grid',
    //imageSize: normal / original
    imageSize: 'normal',
    //streamLasts|streamDesc|streamASC
    //streamLasts: realtimpe approved photos
    //streamDesc: stream order DESC
    //streamASC: stream order ASC
    streamMode: 'streamASC',    //do not edit the following line
    slideType: 'fullscreen',
    apiurl : '{$api_url}',
    apiurl_params : {'api_key':'{$api_key}', 'stream':'{$stream}'}
}

Route

http://www.photorank.me/slideshow/{$owner[user_dir]}/fullscreen/{$gallery[id]}

Example

http://www.photorank.me/slideshow/intrepidmuseum/fullscreen/14493787

Olapic Impress

Based on the jQuery plugin Impress (https://github.com/bartaz/impress.js/);

Configurations

You can edit this configuration editing the Olapic Impress Template:

var slideoptions = {
  //total photos on the stage
  photo_limit: 5,
  //photos to be deleted on eache seach iteraction
  photo_erase: 1,
  //appear photo time on miliseconds
  viewphototime : 5000,
  //search photos interval on miliseconds
  searchinterval : 3000,
  //photo appear speed on miliseconds
  appearspeed: 400,
  //slider wrapper id
  wrapperID: 'impress',  //do not edit the following line
  slideType: 'olapicimpress',
  apiurl : '{$api_url}',
  apiurl_params : {'api_key':'{$api_key}', 'stream':'{$stream}'}
}

Route

http://www.photorank.me/slideshow/{$owner[user_dir]}/{$gallery[id]}

Example

http://www.photorank.me/slideshow/intrepidmuseum/14493787

Olapic Wall

This slide show a configurable number of photos in columns. Each a configurable period of time a photo is selected randombly and it's showed in the middle of the screen.

Configurations

You can edit this configuration editing the Olapic Wall Template:

var slideoptions = {
    //preload images
    itemsFirstload: 12,
    //photos to search on each iteration
    itemsSteapload: 5,
    //number of columns on the brackground
    columnsstyle: 3,
    //appear photo time on miliseconds
    viewphototime : 5000,
    //search photos interval on miliseconds
    searchinterval : 30000,
    //appear photo time on miliseconds
    //show image loader
    showloader : true,
    //loader id
    loaderid: 'loader',
    //main image centered based on the windows size
    windowBased : true,
    //show photo caption
    showCaption : true,
    //slider wrapper id
    wrapperID: 'grid',    //do not edit the following line
    slideType: 'wall',
    apiurl : '{$api_url}',
    apiurl_params : {'api_key':'{$api_key}', 'stream':'{$stream}'}
}

Route

http://www.photorank.me/slideshow/{$owner[user_dir]}/wall/{$gallery[id]}

Example

http://www.photorank.me/slideshow/intrepidmuseum/wall/14493787

Use the Widgets Template Structure

General Template Structure

Deploy Limit

File Structure

Show Media

Information on .products-list element

Styles

JS Callbacks

Share URL Modification

Extensive Share URL Modification

Upload Process

Header

Footer

Source Selection

Sources

Photo Upload Limit

Label

Login

Thank You

Styles

JS Callbacks

Mobile Upload Process

Fullscreen slideshow

Configurations

Route

Example

Olapic Impress

Configurations

Route

Example

Olapic Wall

Configurations

Route

Example