Knowledgebase: Step by Step Guides
Update existing tour templates to support GIF / MP4 files
Posted by Mark [Elevated X Support], Last modified by Mark [Elevated X Support] on 08 October 2021 11:40 AM

Newer PHP templates (after June 2021) have support for GIFs and MP4 video previews on rollover within the tour area. Here is a migration path for enabling this functionality on your existing PHP tour.

Note: Smarty Tours do NOT have support for GIF / MP4s.

Enable on Tour

1) Go to Tours and Edit the tour which you wish to update.

2) Scroll down to GIF and MP4 Support.

3) Change this value from "No to "Yes". You'll get a warning. Click okay.

4) Save this tour.

If you do not see this option:

- Please make sure you are running version 4.0.6361 or later.

- If you are not seeing this option, your tour should already have support for this.

Import Images

1) Go to Tours, and next to the tour you wish to update, click "Manage Content"

2) Under View, change your view to "View All" so that all scenes belonging to the tour are visible.

3) Click the checkbox at the top of the page to make sure all scenes are enabled.

4) At the bottom of the page, you'll see a heading either titled "Import Old Thumbnails" or "Import Existing Thumbnails". You will want to make sure all of the thumbnails are selected by clicking "Select All"

5) At the very bottom of the page, click Process. This will create copies of your existing thumbnails in the new location

Update Templates

While we do not provide custom design support, here are a list of changes between older templates and our newer templates that enable tour GIF and MP4 support in the tour:

functions/standard.tpl
The StdImage() function was updated in order to add support for this. In order to support the new image system, this function will need to be replaced in its entirety with what's present in the new templates.

tour/globals/globals.tpl
Instead of just doing a call to tourhelper.js, the system will detect if the new system is in use and make a call to helper.js instead.

This:

<script type="text/javascript" src="js/tourhelper.js"></script>

Is replaced with this:

<?php if ($tour["NewImages_Use"]) { ?>
<script type="text/javascript" src="js/helper.js"></script>
<script>
    try
    {
        // starting the script on page load
        $(document).ready(function(){
    
            if (typeof jQuery.ui == 'undefined')
            {
                alert("Warning: File js/jquery-ui.custom.min.js not found.")
            }
    
            if (typeof pixelRatioZoom !== 'function')
            {
                alert("Warning: File js/helper.js not found");
            }
    
            StdImageHandler();
        });
    }
    catch(e)
    {
      alert("Warning: File js/jquery.min.js not found.");
    }
</script>
<?php } else { ?>
<script type="text/javascript" src="js/tourhelper.js"></script>
<?php } ?>

Area Files:

js/helper.js

This line:

idx.attr('src', sr);

Is replaced with:

if (idx.attr("src") != sr)
{
   idx.attr('src', sr);
}

and this line:

$(this).load();

is replaced with:

$(this).get(0).load();

If there have been no customizations on this file, we recommend replacing this file in its entirety.

style.css

There is an added definition here for .stdvideo that's in use with the new image system:

.stdvideo { max-width:100%; width:100%; display:block; border:0; }

Adding this to the bottom of style.css should make sure the video fits the location.

(0 vote(s))
Helpful
Not helpful

Comments (0)