No announcement yet.

Theme customization: how to show related videos from one project on another

  • Filter
  • Time
  • Show
Clear All
new posts

  • Theme customization: how to show related videos from one project on another

    If you have multiple tube sites on KVS, you can make related videos from one site to be part of another site. For example to render them as the first 3 related videos, or the last 3, or even as a separate list.

    Configuring page to render related videos HTML code on source site

    First you need to create a new page on source site (which videos you will take off). Go to Website UI -> Add page and create a new page with the following data:

    - Display name: Related videos for <target site> (e.g. Related videos for
    - External ID: related_videos_for_<target_site> (e.g. related_videos_for_kvs_demo)
    - Cache lifetime: 86400
    - Template code:
    HTML Code:
    {{insert name="getBlock" block_id="list_videos" block_name="Related Videos"}}
    Save this page and open it for editing. You will notice Related Videos block added to its block list. Open this block editor.

    In Related Videos block editor scroll down to Search videos by text parameter group and enable var_search = q parameter. Also under List pagination group make sure that items_per_page parameter has the exact number of videos you want to pull.

    In Template code you should render video items with template code that is needed for target site (e.g. in this example). The easiest way is to go to target site admin panel, go to its Website UI -> Page components -> include_list_videos_block_common.tpl and copy-paste everything within its primary {{foreach}} iteration. Here is what we copied from default theme:

    HTML Code:
    {{foreach item="item" from=$data}}
        <div class="item {{if $item.is_private==1}}private{{elseif $item.is_private==2}}premium{{/if}}">
            <a {{if $item.view_page_url!=''}}href="{{$item.view_page_url}}"{{/if}} title="{{$item.title}}">
                <div class="img">
                    {{if $item.status_id==0 || $item.status_id==1}}
                        <img class="thumb {{if $lang.enable_thumb_lazyload=='true'}}lazy-load{{/if}}" {{if $lang.enable_thumb_lazyload=='true'}}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original{{else}}src{{/if}}="{{$item.screen_url}}/{{$lang.videos.thumb_size}}/{{$item.screen_main}}.jpg" {{if $lang.videos.thumb_size_webp}}data-webp="{{$item.screen_url}}/{{$lang.videos.thumb_size_webp}}/{{$item.screen_main}}.jpg"{{/if}} alt="{{$item.title}}" {{if $lang.enable_thumb_scrolling=='true'}}data-cnt="{{$item.screen_amount}}"{{/if}} {{if $item.is_private==0 && $item.formats[$lang.videos.preview_video_format_standard].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_standard].file_path}}/"{{/if}} {{if $item.is_private==2 && $item.formats[$lang.videos.preview_video_format_premium].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_premium].file_path}}/"{{/if}} width="{{$lang.videos.thumb_size|geomsize:'width'}}" height="{{$lang.videos.thumb_size|geomsize:'height'}}"/>
                    {{if $item.is_private==1}}
                        <span class="line-private"><span class="ico-private">{{$lang.videos.list_label_private}}</span></span>
                    {{elseif $item.is_private==2}}
                        <span class="line-premium"><span class="ico-premium">{{$lang.videos.list_label_premium}}</span></span>
                    {{if $item.is_hd==1}}<span class="is-hd">HD</span>{{/if}}
                <strong class="title">
                    {{if $lang.videos.truncate_title_to>0}}
                <div class="wrap">
                    <div class="duration">{{$item.duration_array.text}}</div>
                    {{assign var="object_rating" value="`$item.rating/5*100`"}}
                    {{if $object_rating>100}}{{assign var="object_rating" value="100"}}{{/if}}
                    <div class="rating {{if $object_rating>=50 || $object_rating==0}}positive{{else}}negative{{/if}}">
                <div class="wrap">
                    {{assign var="added_date" value=$item.post_date}}
                    {{if $mode_favourites==1}}
                        {{assign var="added_date" value=$item.added2fav_date}}
                    {{elseif $mode_purchased==1}}
                        {{assign var="added_date" value=$item.purchase_date}}
                    <div class="added"><em>{{$added_date|date_format:$}}</em></div>
                    <div class="views">{{$item.video_viewed|number_format:0:",":$}}</div>
    Finally make sure you also put 86400 cache lifetime in this block settings.

    After saving block editor you can now check how it works (make sure to replace with your domain and page ID):
    Code: video
    If your database has something similar to "Test video", it should render several videos.

    Pulling videos from target site

    Now when the page is ready, go to target site admin panel. Locate page or block where you want to render this list (typically in Website UI -> Pages -> View Video -> Related Videos block or View Video page itself) and open it for editing.

    In template code add this (make sure to replace with your domain and page ID):
    HTML Code:
    $storage = $this->get_template_vars('storage');
    if (function_exists('get_page') && $storage['video_view_video_view']['title']) {
    echo get_page("", "" . urlencode($storage['video_view_video_view']['title']), "", "", 1, 0, 3, "");
    Now refresh any of the video pages on target site and make sure that related videos from source site are displayed correctly. If they are displayed with wrong styling, make sure that template code from the previous section suits target site CSS styles and taken from target site, not from source site.