Jump to content

Search the Community

Showing results for tags 'theme'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • General Discussion
    • Announcements
    • Business Discussion
    • Business Services
    • Sell and Buy
  • Themes & templates
    • KVS default theme
    • KVS tablet theme
    • KVS paysite theme
    • KVS basic theme 1
    • KVS basic theme 2
    • KVS basic theme 3
  • Educational / support
    • Technical Support
    • FAQ
    • Educational Series

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

  1. We found that there is an issue that may affect sites in the following situation: This issue only happens with vertical videos. This issue only happens when your theme is limiting access to some videos (e.g. signup to watch a video). Vertical video screenshot will be distorted in this case: Unfortunately we can't put a fix into update, because the fix affects theme CSS which cannot be updated together with KVS. Therefore if this issue affects your project, you will need to manually put this fix into your theme CSS file. Common themes where this could be an issue are: KVS Default Theme and Paysite Theme 1. 1) For KVS Default Theme you need to modify one of these file directly on disk (or FTP), change -white if your theme color is light and choose -metal if you theme color is dark: /static/styles/all-responsive-white.css /static/styles/all-responsive-metal.css Find this style: .block-video .no-player img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.2; } And add object-fit: contain; into it: .block-video .no-player img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.2; object-fit: contain; } 2) For Paysite Theme 1 you need to modify one of these file directly on disk (or FTP), change all.css if your theme color is light and choose all-dark.css if you theme color is dark: /static/styles/all.css /static/styles/all-dark.css Find this style: .media-container__join__img { position: absolute; top: 0; left: 0; width:100%; height:100%; } And add object-fit: contain; into it: .media-container__join__img { position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: contain; } As a result here is how the fixed version looks like:
  2. Starting with 5.1.0 KVS supports WebP format for video screenshots in addition to JPG format. WebP is a modern image format promoted by Google and supported by major browsers (78.37% support coverage at this moment). The key feature of this format is HUGE - 30-50% - image size reduction in comparison with JPG while keeping visual quality almost the same. Since this format is not 100% supported, it can only be used as an addition to standard JPG format and theme should be adopted for this. Here is an example of WebP and JPG image from our demo website: WebP, 6.13Kb: https://www.kvs-demo.com/contents/videos_screenshots/0/182/336x189/1.jpg JPG, 9.23Kb: https://www.kvs-demo.com/contents/videos_screenshots/0/182/320x180/1.jpg Creating WebP format In order to create WebP format please go to Settings -> Formats -> Add screenshot format. In format creation form specify title, size and image type as the following: NOTE: Ideally this format should have the same size as its alternate JPG format. However KVS requires unique size across all image formats. The workaround here is to make this format size a bit bigger than JPG (which is 320x180 in case of default theme) while keeping aspect ratio the same. So it resulted in 336x189 size. You can leave other options, such as ImageMagick settings as default. If you want to fine-tune WebP creation please refer ImageMagick guide for WebP: https://imagemagick.org/script/webp.php Please also note that your ImageMagick library should have support for WebP encoder to create this format. NOTE: Creating new screenshot format may result in long background process if you have many videos. You can follow this process in Administration -> Background tasks. Configuring theme to show WebP Starting with KVS default theme 7.3 it supports WebP from the box. Please go to Website UI -> Theme settings and check your theme version. If it says 7.3 or above, you can easily configure your theme to use WebP along with JPG by selecting the created WebP format in its designed option: IMPORTANT! Thumb format selection will work together with lazyload function, so you have to have lazyload option enabled as well, otherwise theme will always show JPG format and WebP will not be used at all. Customizing old theme versions to support WebP If your theme version is older than 7.3, you will have to customize it so that it can support WebP format. Here are the steps. Step 1. Update this file from kvs-demo.com: https://kvs-demo.com/js/main.min.js NOTE: In some theme installations this file may be stored under /static/js subdirectory. Step 2. Go to Website UI -> Page components -> include_list_videos_block_common.tpl. Search template for <img class="thumb and you should be able to find this line (can be slightly different in your case): <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" 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'}}"/> Save this template code locally in order to be able to quickly restore it. After the last attribute and before the ending tag /> please add the following code with space at the beginning: {{if $lang.videos.thumb_size_webp}}data-webp="{{$item.screen_url}}/{{$lang.videos.thumb_size_webp}}/{{$item.screen_main}}.jpg"{{/if}} NOTE: Make sure you don't break HTML syntax of this line and keep the necessary spaces. Save and check if your site correctly displays video list. If something is wrong, just restore the original template code and try again. Step 3. Go to Website UI -> Add text and create the following text item (replace 336x189 with your WebP size if it is different): External ID: videos.thumb_size_webp Default: 336x189 Save. Your site should now show WebP in Chrome and Firefox browsers. Please note that Safari doesn't support WebP at the moment. There is no easy way you can visually check it. However you can use browser development tools (F12) and see which images are loaded, and check their size. If the size is 336x189, then you have successfully performed all steps.
  3. Most of KVS themes come with popups for utility forms, such as login and signup. If you need to refer login or signup popups, you can do that without actually having them as separate pages: https://kvs-demo.com/?login https://kvs-demo.com/?signup If you want to create separate pages for them with custom design, you can also do that by following this guide. Creating login page Step 1. In Website UI -> Pages create a new page with the following template code: {{assign var="page_title" value=$lang.html.login_title}} {{assign var="page_canonical" value=$lang.urls.login}} {{include file="include_header_general.tpl"}} <div class="content"> <div class="main-content"> <div class="main-container"> {{insert name="getBlock" block_id="logon" block_name="Logon Form"}} </div> </div> </div> {{include file="include_footer_general.tpl"}} Set page External ID to login, you can set title to Login, this is only title for admin panel. NOTE: if you have error message saying that there are no permissions to create files, you have 2 choices: Either put 777 permissions on the directory where KVS is installed (using FTP client or server File manager tool) Or manually create /login.php file in the document root with the following code: <?php require_once("admin/include/process_page.php");?> Step 2. After you saved page in Step 1, you should see Logon Form block added to this page's blocks list at the bottom. Open it for editing. Now open another browser tab and go to Website UI -> Global blocks -> Logon Form and copy template code and block parameters from there into the settings of Logon Form on the new login page. Step 3. In /.htaccess file in the root directory of your project find these 2 lines: RewriteRule ^login/$ index.php?mode=async&function=get_block&block_id=logon_logon_form&global=true [L,QSA] RewriteRule ^login-required/$ index.php?mode=async&function=get_block&block_id=logon_logon_form&global=true&error=only_for_members [L,QSA] and change them to these: RewriteRule ^login/$ login.php [L,QSA] RewriteRule ^login-required/$ login.php?error=only_for_members [L,QSA] Step 4. In Website UI -> Texts add new text for rendering title of your newly selected login page: External ID: html.login_title Default: Login Page Title Now you should be able to click on login link in header and see your new login page. Do you still see it is open in popup instead of separate page? If yes, please update this file on your server with a newer version from kvs-demo.com (only for KVS default theme): https://kvs-demo.com/static/js/main.min.js Creating signup page Step 1. In Website UI -> Pages create a new page with the following template code: {{assign var="page_title" value=$lang.html.signup_title}} {{assign var="page_canonical" value=$lang.urls.signup}} {{include file="include_header_general.tpl"}} <div class="content"> <div class="main-content"> <div class="main-container"> {{insert name="getBlock" block_id="signup" block_name="Signup Form"}} </div> </div> </div> {{include file="include_footer_general.tpl"}} Set page External ID to signup, you can set title to Signup, this is only title for admin panel. NOTE: if you have error message saying that there are no permissions to create files, you have 2 choices: Either put 777 permissions on the directory where KVS is installed (using FTP client or server File manager tool) Or manually create /login.php file in the document root with the following code: <?php require_once("admin/include/process_page.php");?> Step 2. After you saved page in Step 1, you should see Signup Form block added to this page's blocks list at the bottom. Open it for editing. Now open another browser tab and go to Website UI -> Global blocks -> Signup Form XXX and copy template code and block parameters from there into the settings of Signup Form on the new signup page. NOTE: There are multiple different signup forms support in KVS themes: Simple signup form is default, Simple2 signup form requires email as a login, Advanced signup form renders additional profile fields on signup; finally Premium signup form renders paid access options. Choose the form that you need and copy its template and settings. Step 3. In /.htaccess file in the root directory of your project find this line: RewriteRule ^signup/$ index.php?mode=async&function=get_block&block_id=signup_signup_form_simple&global=true [L,QSA] and change it to this: RewriteRule ^signup/$ signup.php [L,QSA] Step 4. In Website UI -> Texts add new text for rendering title of your newly selected signup page: External ID: html.signup_title Default: Signup Page Title Now you should be able to click on signup link in header and see your new signup page. Do you still see it is open in popup instead of separate page? If yes, please update this file on your server with a newer version from kvs-demo.com (only for KVS default theme): https://kvs-demo.com/static/js/main.min.js
  4. 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 kvs-demo.com) External ID: related_videos_for_<target_site> (e.g. related_videos_for_kvs_demo) Cache lifetime: 86400 Template 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. kvs-demo.com 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: {{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}} {{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}} {{if $item.is_hd==1}}<span class="is-hd">HD</span>{{/if}} </div> <strong class="title"> {{if $lang.videos.truncate_title_to>0}} {{$item.title|truncate:$lang.videos.truncate_title_to:"...":true}} {{else}} {{$item.title}} {{/if}} </strong> <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}}"> {{$object_rating|string_format:"%d"}}% </div> </div> <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}} {{/if}} <div class="added"><em>{{$added_date|date_format:$lang.global.date_format}}</em></div> <div class="views">{{$item.video_viewed|number_format:0:",":$lang.global.number_format_delimiter}}</div> </div> </a> </div> {{/foreach}} 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 https://domain.com/related_videos_for_kvs_demo with your domain and page ID): https://domain.com/related_videos_for_kvs_demo.php?q=Test 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 https://domain.com/related_videos_for_kvs_demo with your domain and page ID): {{php}} $storage = $this->get_template_vars('storage'); if (function_exists('get_page') && $storage['video_view_video_view']['title']) { echo get_page("", "https://domain.com/related_videos_for_kvs_demo.php?q=" . urlencode($storage['video_view_video_view']['title']), "", "", 1, 0, 3, ""); } {{/php}} 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.
  5. Due to the complexity of AJAX filtering in the default theme, we won't explain this in details. Using this advanced filtering requires deep understanding of default theme JS internals. This is just a working example that can be configured in default theme. Step 1. In Website UI -> Pages run a search by list_videos to filter out only list_videos blocks. Open every list_videos block and activate the following parameters: var_duration_from = duration_from var_duration_to = duration_to var_is_hd = is_hd It is recommended to ignore list_videos block named Related Videos and Player Related Videos, as these anyway won't render filtering and changing their parameters may result to performance overload for some period of time. Step 2. In Website UI -> Page components -> include_list_videos_block_common.tpl add the following code under <div class="headline"> after header display: {{if $duration_from>0}} {{assign var="list_videos_custom_sort_parameters" value="`$list_videos_custom_sort_parameters`;duration_from:$duration_from"}} {{/if}} {{if $duration_to>0}} {{assign var="list_videos_custom_sort_parameters" value="`$list_videos_custom_sort_parameters`;duration_to:$duration_to"}} {{/if}} {{if $is_hd==1}} {{assign var="list_videos_custom_sort_parameters" value="`$list_videos_custom_sort_parameters`;is_hd:$is_hd"}} {{/if}} <div class="sort"> <span class="icon type-hd"></span> <strong>{{if $is_hd==1}}HD{{else}}All{{/if}}</strong> <ul id="{{$block_uid}}_hd_list"> {{if $is_hd==1}} <li> <a data-action="ajax" data-container-id="{{$block_uid}}_hd_list" data-block-id="{{$block_uid}}" data-parameters="{{if $list_videos_custom_sort_parameters!=''}}{{$list_videos_custom_sort_parameters}};{{/if}}sort_by:{{$sort_by}};is_hd:">All</a> </li> {{/if}} {{if $is_hd==0}} <li> <a data-action="ajax" data-container-id="{{$block_uid}}_hd_list" data-block-id="{{$block_uid}}" data-parameters="{{if $list_videos_custom_sort_parameters!=''}}{{$list_videos_custom_sort_parameters}};{{/if}}sort_by:{{$sort_by}};is_hd:1">HD</a> </li> {{/if}} </ul> </div> <div class="sort"> <span class="icon type-duration"></span> <strong>{{if $duration_to==600}}0-10{{elseif $duration_to==1800}}10-30{{elseif $duration_from==1800}}30+{{else}}Duration{{/if}}</strong> <ul id="{{$block_uid}}_duration_list"> {{if $duration_to>0 || $duration_from>0}} <li> <a data-action="ajax" data-container-id="{{$block_uid}}_duration_list" data-block-id="{{$block_uid}}" data-parameters="{{if $list_videos_custom_sort_parameters!=''}}{{$list_videos_custom_sort_parameters}};{{/if}}sort_by:{{$sort_by}};duration_from:0;duration_to:0">All</a> </li> {{/if}} {{if $duration_to!=600}} <li> <a data-action="ajax" data-container-id="{{$block_uid}}_duration_list" data-block-id="{{$block_uid}}" data-parameters="{{if $list_videos_custom_sort_parameters!=''}}{{$list_videos_custom_sort_parameters}};{{/if}}sort_by:{{$sort_by}};duration_from:0;duration_to:600">0-10</a> </li> {{/if}} {{if $duration_to!=1800}} <li> <a data-action="ajax" data-container-id="{{$block_uid}}_duration_list" data-block-id="{{$block_uid}}" data-parameters="{{if $list_videos_custom_sort_parameters!=''}}{{$list_videos_custom_sort_parameters}};{{/if}}sort_by:{{$sort_by}};duration_from:600;duration_to:1800">10-30</a> </li> {{/if}} {{if $duration_from!=1800}} <li> <a data-action="ajax" data-container-id="{{$block_uid}}_duration_list" data-block-id="{{$block_uid}}" data-parameters="{{if $list_videos_custom_sort_parameters!=''}}{{$list_videos_custom_sort_parameters}};{{/if}}sort_by:{{$sort_by}};duration_from:1800;duration_to:0">30+</a> </li> {{/if}} </ul> </div>
  6. KVS doesn't support video popularity stats per country yet, but it is possible to emulate this for the end users, providing some personal attitude to every visitor: Step 1. In /admin/include/pre_initialize_page_code.php add the following line: $_GET['GEOIP_COUNTRY_CODE'] = $_REQUEST['GEOIP_COUNTRY_CODE'] = strtolower($_SERVER['GEOIP_COUNTRY_CODE']); This is needed to pass environmental variable with country code to request variables, that can be used by KVS site engine. Step 2. In Website UI -> Texts add the following text that will be rendered as a header: External ID: videos.list_title_by_country Default: Popular in %1% <img class="flag" title="%1%" alt="%2%" src="/static/images/flags/%2%.gif"> This text also contains IMG with reference to flag image. Step 3. Open Website UI -> Pages -> Index -> Videos Watched Right Now for editing. Change its Template code to the following: {{query_kvs select="single" table="list_countries" where_country_code=$smarty.get.GEOIP_COUNTRY_CODE where_language_code="en" assign="country"}} {{assign var="country_title" value=$country.title}} {{if !$country_title || $country.is_system==1}} {{assign var="list_videos_title" value=$lang.videos.list_title_watched_right_now}} {{else}} {{assign var="list_videos_title" value=$lang.videos.list_title_by_country|replace:"%1%":$country.title|replace:"%2%":$smarty.get.GEOIP_COUNTRY_CODE|smarty:nodefaults}} {{/if}} {{assign var="list_videos_use_h1" value="true"}} {{include file="include_list_videos_block_common.tpl"}} NOTE: KVS only supports country names in English and Russian languages, if your site is in Russian please change where_language_code="en" with "ru" to have country name in Russian. In block settings down the page specify GEOIP_COUNTRY_CODE under Dynamic HTTP parameters. This is needed for correct caching logic for this block. If you don't do that, KVS admin panel will show error that using $smarty.get.GEOIP_COUNTRY_CODE variable will not work correctly. The code does the following. First it queries KVS database and selects country record that matches the current visitor's country code using query_kvs template function. Then it checks whether any non-system country record is found (system countries are some satellite ISPs and anonymous proxies). If nothing is found, this code will show old "Videos Watched Right Now" text. Otherwise it will show the new text with country code and flag icon. Step 4. For better icon styling add this block into theme CSS file: h1 img.flag, h2 img.flag { vertical-align: middle; }
  7. This article explains how to allow site users to switch between different skins using KVS default theme as example. Please note that the same approach can be used for a variety of ideas that involve different CSS styles display in your design, for example: Switching the whole skins Switching between big and small thumbs in video lists Switching between short / detailed video list display layout etc. NOTE: if you are planning to use multiple CSS skins on your site, any CSS customizations should be put and tested with both skins. Otherwise for some users your site may become broken, if skin they are using has not been updated properly to include all the needed customizations. Change KVS default theme to support switchable skins KVS default theme provides 2 skins: dark and white. Skin is configured via theme configuration and the actual skin is rendered in site header template using this Smarty condition: {{if $lang.theme.style=='white'}} ... show white skin {{else}} ... show dark skin {{/if}} Use the following steps to make is adjustable. 1) In Settings -> Website Settings fill in name and default value for one of the free Dynamic HTTP parameters as skin and white (use dark if you want dark skin to be the default one). Leave lifetime value as set to 360 days by default: 2) In Website UI -> Page Components -> include_header_general.tpl change this block: {{if $lang.theme.style=='white'}} <link href="{{$config.statics_url}}/static/styles/all-responsive-white.css?v=7.0" rel="stylesheet" type="text/css"/> <link href="{{$config.statics_url}}/static/styles/jquery.fancybox-white.css?v=7.0" rel="stylesheet" type="text/css"/> {{else}} <link href="{{$config.statics_url}}/static/styles/all-responsive-metal.css?v=7.0" rel="stylesheet" type="text/css"/> <link href="{{$config.statics_url}}/static/styles/jquery.fancybox-metal.css?v=7.0" rel="stylesheet" type="text/css"/> {{/if}} With the same logic using Javascript: <script type="application/javascript"> if ('%skin%' == 'white') { document.write('<link href="{{$config.statics_url}}/static/styles/all-responsive-white.css?v=7.0" rel="stylesheet" type="text/css"/>'); document.write('<link href="{{$config.statics_url}}/static/styles/jquery.fancybox-white.css?v=7.0" rel="stylesheet" type="text/css"/>'); } else { document.write('<link href="{{$config.statics_url}}/static/styles/all-responsive-metal.css?v=7.0" rel="stylesheet" type="text/css"/>'); document.write('<link href="{{$config.statics_url}}/static/styles/jquery.fancybox-metal.css?v=7.0" rel="stylesheet" type="text/css"/>'); } </script> <noscript> <link href="{{$config.statics_url}}/static/styles/all-responsive-metal.css?v=7.0" rel="stylesheet" type="text/css"/> <link href="{{$config.statics_url}}/static/styles/jquery.fancybox-metal.css?v=7.0" rel="stylesheet" type="text/css"/> </noscript> After this change, your site should be displayed with the skin that is configured as default value for skin dynamic HTTP parameter. 3) If you need to render skin switcher, you can do this multiple ways. You can open any URL of your site and pass skin=value parameter in the URL: http://domain.com/?skin=white http://domain.com/?skin=dark The selected value will be remembered in user cookies. Alternatively if you don't want to expose this URL parameter to public, you can set the cookie explicitly via Javascript and refresh the page: $.cookie('kt_rt_skin', 'dark', {expires: 360, path: '/'}); window.location.reload(); When only parts of design should be switchable When you want users to switch only part of display functionality (e.g. bigger thumbs VS smaller thumbs, short list layout VS detailed list layout), it is easier to have only 1 CSS file and customize its display using CSS classes hierarchy, e.g.: .list .thumb { width: 320; height: auto; } .list .small .thumb { width: 240; } With the above approach, all you need is to add small class name to the list HTML element in order to switch it to smaller thumbs. Here is where Dynamic HTTP parameters (Settings -> Website Settings) can be of your service again. Note that this time we don't specify any default value for thumb_size parameter, because bigger thumbs are default behavior and parameter should print empty value for bigger thumbs: Now in template where you render list thumbs (e.g. Website UI -> Page Components -> include_list_videos_block_common.tpl) you should add %thumb_size% token into classes list of root thumb list element similar to this: <div class="list %thumb_size%"> ..rendering thumbs list here </div> Then you can switch between big and small thumbs: http://domain.com/?thumb_size=small http://domain.com/?thumb_size=
  8. Step 1. Open Website UI -> Pages -> View Video page -> Related Videos block for editing. Step 2. Change parameters: Under sort_by make sure you deselect Pseudo-random sorting and choose another sorting, as pseudo random sorting doesn't support pagination. Enable var_from = from. Step 3. Add the following 3 lines: {{assign var="pagination_use_load_more" value="true"}} {{assign var="pagination_no_links" value="more"}} {{include file="include_pagination_block_common.tpl"}} into block template code right after this one: {{include file="include_list_videos_block_common.tpl"}} Step 4. Adjust styles to add some spacing after load more button: .related-videos { padding-bottom: 15px; }
  9. KVS has built-in support for displaying single image pages from an album, as well as having separate rating and comments for them individually. This is not used in default theme behavior: every album page uses fancybox popup to show its big images, and rating / comments are calculated for the whole album. For modifying theme to support individual image pages, please follow this guide. Step 1. Open Website UI -> Pages -> View Album -> album_view block template for editing. Everything in this guide is changed in this template code. Step 2. Find the iteration that renders links for big images that has the following code by default: {{foreach item="item" from=$data.images}} <a href="{{$item.formats[$lang.albums.image_big_size].protected_url}}" class="item" rel="images" data-fancybox-type="image"> <img class="thumb {{if $lang.enable_thumb_lazyload=='true'}}lazy-load{{/if}}" alt="{{$item.title|default:$data.title}}" {{if $lang.enable_thumb_lazyload=='true'}}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original{{else}}src{{/if}}="{{$item.formats[$lang.albums.image_small_size].direct_url}}" width="{{$item.formats[$lang.albums.image_small_size].dimensions.0}}" height="{{$item.formats[$lang.albums.image_small_size].dimensions.1}}"> </a> {{/foreach}} NOTE: there are few more similar iterations on $data.images in this template that render cases when user has no access to album and can only view small thumbs, please skip them and only locate the one that renders links (A tags). Remove data-fancybox-type="image" from links in this code and also change href attribute to the following: <a href="{{$data.canonical_url}}?image_id={{$item.image_id}}" class="item" rel="images"> Also add the following block before this iteration to render big image: <div> <img src="{{$data.image_info.formats[$lang.albums.image_big_size].protected_url}}" alt="{{$data.image_info.title|default:$data.title}}"> </div> Here is screenshot that shows all changes: Save the changes. Now you should be able to click on every album image and it will open this image in a new page. So each image will have its own unique URL. Step 3. This step adjusts rating to show the rating of the displayed image instead of album rating. In all places of this template replace $data.rating_amount with $data.image_info.rating_amount, then also replace $data.rating with $data.image_info.rating. There should be up to 5 replaces in total by default. Step4. This step adjusts block to display the total number of comments for the displayed image instead of the total number of all album comments. In all places of this template replace $data.comments_count with $data.image_info.comments_count.
  10. The world is changing and being able to put ongoing changes into your running site is essential need of any successful project. KVS regularly adds new features and some of these features are not brought into themes, so you have to add them manually. However doing changes on a live site brings some risks to harm site operation. In this article we summarize the possible configuration scenarios for ongoing site development and their disadvantages. Working on production theme The most typical scenario and very good for small projects. However actively working with regular changes may bring some issues. Pros: No specific configuration or procedure needed. Changes are applied immediately. Cons: Harmful changes may result in project unavailability for some time until sorted out. Intensive template changes may result in regular cache reset, which could impose performance issue when modifying top-visited list-block templates. Difficult to work in development-testing iterations, when partial changes applied, then tested, then next set of changes applied, and etc. Security considerations (should provide access to 3rd-party developers). DEV satellite DEV satellite is very useful for the new theme development, when you need to spend a lot of time with either re-design, or a new design for your site theme. While working on DEV satellite you can't harm a working project in any way and you don't need to hurry. When your new theme version is ready, all what you need is to migrate it from satellite to production site. End of story. However using DEV satellite for ongoing minor theme changes is not that safe, as you could assume. The main reason is - when you migrate theme, you can't migrate something specific, you have to migrate everything, including templates, styles, configuration parameters, SEO, texts and even site advertising. Having that in mind, it becomes clear that it is not possible to selectively use DEV for testing 'some' changes - it is either ALL, or nothing. Here is a typical scenario that could happen from time to time: You decided to change something minor in advertising (e.g. replace some ad) and decided to change it directly on production. Then after some time your theme developer started working with a new feature on DEV satellite. After the feature is finished, you migrated theme from DEV to production. Oops, your first advertising change has been lost at this point and you may not even remember about it. Hence the conclusion is - you can use DEV satellite for ongoing theme development only if you stick to strict process of putting all changes into DEV first, then testing them on DEV and then migrating them to production. If you decide to go with this approach, it will be possible for your admins to automate theme migration process and provide command line utility that will copy all the needed files from DEV satellite to production. Unfortunately this can't be automated from KVS side and should be run via command line only due to filesystem restrictions (in most cases Apache won't have enough privileges to copy all needed files, so should be done under a more privileged user). In order to know which files should be migrated, your command line tool can parse the tar.gz archive created by KVS backup plugin. The idea is NOT to extract files from backup archive, but use it to extract filenames for the files that need to be migrated. Here is a command that will locate the latest backup archive and extract the list of filenames relative to project document root: find admin/data/backup -type f -name '*.tar.gz' -printf '%T+\t%p\n' | sort -r | awk '{print $2}' | head -n 1 | xargs tar -xvf | grep '^website/' | sed 's/website\///g' Pros: Your primary site won't be affected in any way until you manually run sync procedure. Possible to configure DEV on a separate server to secure your primary installation, if you don't want to provide your theme developers FTP access to your running project. Cons: Strict requirement to apply every single change via DEV satellite. Long time to apply any change, even very minor. Not possible to optimize performance on the fly. Hard to configure in small teams, needs command line. Creating new versions of pages on production theme This approach seems to be the most usable and best manageable for all kind of projects. Minor changes should be applied directly to production site, as they typically do not harm your project operation. When some big changes are planned, developer should follow this guideline: Duplicate page that needs to be changed into a page with new version in its ID, e.g. for view_video page it should be view_video_v2, view_video_v3 and etc. Duplication of existing page is one click from admin panel: Duplicate the affected page components if needed. E.g if working with new video list design, duplicate include_list_videos_block_common.tpl into include_list_videos_block_common_v2.tpl and switch v2 page to use this new template version instead. Work with new page version / component version without any rush and risk to harm other parts of project. You can access the new page via its direct PHP URL: https://domain.com/view_video_v2.php?id=123 When finished working with page, just change in PHP script in .htaccess rewrite to use the new _v2.php file to enable new page version into production. Deactivate the old page in KVS admin panel to make sure it will not be used and in future it will be clear that this is obsolete version. When finished working with page component, copy-paste the new code into the old page component template and remove the new page component and eliminate all usage of it. There is no sense to keep old and new page components together for history or any other purposes, as KVS keeps track of version history for all templates and will record both old and new versions of the changed component. Unlike pages, components are single files and can be easily restored to any specific version, if needed. IMPORTANT! Make sure you deactivate old page versions when switch to new page versions, or even delete them. It should be clear that specific page versions are not used anymore, otherwise you may have troubles in future, when you need to fix something and you will find yourself in the need to fix bulk of v2, v3, v4 and etc. pages, most of which are not used anymore, but you are not sure which ones. Do not keep trash in your templates! Pros: No specific configuration needed. Small changes are applied immediately. Big changes do not harm working site, and developers have enough time to work with them in their own way and pace. Cons: More manipulations needed to prepare working environment. Security considerations (should provide access to 3rd-party developers).
  11. Unfortunately it is not possible to update KVS theme like you can normally update KVS. Theme is subject to intensive customization: you modify styles and advertising (yes, advertising in KVS is part of theme as ads are displayed inside theme layout), you change texts and configure SEO. Updating theme with keeping your custom changes is not technically possible. The only possible way is to reset theme to a new version. When we say reset, we mean that your site will start looking like it was at initial KVS installation: You will lose all custom styling You will lose all site advertising (except in-player advertising, as player is not part of theme) You will lose all text changes, logo change You will lose all SEO changes (e.g. HTML titles, descriptions, SEO texts will be reset to their default values) So, this is only feasible if you still didn't start your site, or you didn't put much customization into it and can re-do everything quickly. Is there any sense to update theme at all? - We would say "no", since we don't put much changes into themes. The vast majority of theme changes are cosmetic changes only. All changes that we considered to be really important (e.g. search suggestions, chunked upload), were provided with a guide on how to put them into old theme version, examples: If you still for any reason want to reset to a new theme version, please contact support to get instructions, we do not want to print them publicly to prevent from accidentally resetting theme.
  12. KVS Project backup plugin can be used to either restore theme from a specific date, or to move theme from one project to another. Step1. In order to create theme backup for copy please go to Plugins -> Project backup and choose backup website option there. It will create an archive with theme backup in the backup directory configured in plugin: You can also choose any of the automated backup file, every of them contains theme backup. IMPORTANT! Theme backup also includes advertising defined in Website UI -> Advertising section, as advertising is part of theme. By using backup archive to restore theme you will also restore advertising to the date of backup. Step 2. When you have the needed backup archive, unpack it locally to some directory. Backup archive may contain multiple sub-directories, but the only needed sub-directory is website. Step 3. By using FTP client connect to your server and drag and drop the contents of website sub-directory on top. Using drag and drop is the best way to make sure that you NEVER EVER use "sync" function, because "sync" function can destroy your project without ability to restore it later. We recommended using free Filezilla FTP client: After the copying is finished, your project will have theme version from backup. Step 4. If you move theme from one project to another, it may not work correctly after copying. The reason is that theme may refer screenshot and album formats that are not available in your new project. Go to Website UI -> Theme settings and check if there are any errors displayed about formats being used. You may need to either choose another formats, or create the missing formats in your new project. Another issue could be that your theme is using some 3rd-party files, scripts, images that are not known to KVS backup plugin, so that they were not included into backup archive. Then you should typically see some 404 errors in your project when looking into Network or Console section of browser DEV tools. You should solve these by manually copying the missing files and / or sub-directories from your old project. Finally you may also experience lack of editing permissions in KVS admin panel when opening certain objects in Website UI section. To make sure you won't have this, please login to your server command line with administrative user and apply these command after opening your project www root to correct permissions for the copied files: find template -type d | xargs chmod 777 find template -type f \( ! -iname ".htaccess" \) | xargs chmod 666 find admin/data/config -type d | xargs chmod 777 find admin/data/config -type f \( -iname "*.dat" \) | xargs chmod 666 find admin/data/advertisements -type f \( -iname "*.dat" \) | xargs chmod 666
  13. KVS doesn't provide any specific GUI controls to manage indexing, as it is not virtually possible due to very custom theme structure. However you can get everything you need with a very few fixes. Step 1. First of all you need to add noindex tag into site header template. Go to Website UI -> Page components -> include_header_general.tpl and add the following code somewhere inside its <head> section: {{if $page_noindex=='true'}} <meta name="robots" content="noindex" /> {{/if}} This code check if there is a page variable named page_noindex and it is equal to true, then this page should not be indexed by SE. Step 2. Set page_noindex variable anywhere you want this page to be not indexable: {{assign var="page_noindex" value="true"}} somewhere in page template around these values (the example is from Index page): How do you find where to add it? If you have KVS 5.3.0 or above, you should be able to see KVS Admin Toolbar at the bottom of each page and you can open page editor right from the toolbar menu. If your KVS version doesn't support toolbar yet, just add ?debug=true to the URL you are looking at and it should open debugger that will print link to open page editor.
  14. In the new theme version we decided to add vanilla support for search suggestions. It can work in 2 modes: similar search mode, when suggestions are search queries that your other users submitted (default), and content mode, when search suggestions are grouped from models, videos and albums. Here are screenshots that show the difference: While this feature will be added into the upcoming new theme version, theme updates are never available for old projects and thus we decided to make this update available for everyone. Please go to Website UI -> Theme settings. If it says KVS Default (7.6) or above, then you don't need to do anything and this functionality is already included in your theme. Just scroll down theme settings to see this option: IMPORTANT. This functionality may heavily increase your database and overall server load. How to add search suggestions into older themes You can add this functionality to KVS default theme and to any other theme that uses jquery (all paid KVS themes are built using jquery). There is only one thing that may need to be adjusted if your theme is not KVS default theme, we will indicate that later. Step 1. Download this archive and unpack on top of your project FTP: https://kernel-scripts.com/updates/search_suggestions.zip This archive will create a new page named Search Suggestions. If you open this page in Website UI -> Pages section of your admin panel, in most cases it will be highlighted with orange color that indicates lack of filesystem permissions for editing this page settings in admin panel. This is OK in most cases, but if you want to adjust its options, for example suggestions sorting, you will have to set filesystem permissions for the files and directories mentioned in error details (666 for all files, 777 for all directories). Step 2. Update your theme CSS file with the following new styles: White skin (in KVS default theme you should update /static/styles/all-responsive-white.css file on FTP): .autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow: auto; margin: 0 -60px 0 13px; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; } .autocomplete-selected { background: #f0f0f0; } .autocomplete-suggestions strong { font-weight: normal; color: #276fdb; border-bottom: 1px solid #276fdb; } .autocomplete-group { padding: 5px; font-weight: bold;} .autocomplete-group strong { display: block; } Dark skin (in KVS default theme you should update /static/styles/all-responsive-metal.css file on FTP): .autocomplete-suggestions { border: 1px solid #1b1b1b; background: #000; overflow: auto; margin: 0 -60px 0 13px; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; } .autocomplete-selected { background: #151515; } .autocomplete-suggestions strong { font-weight: normal; color: #276fdb; border-bottom: 1px solid #276fdb; } .autocomplete-group { padding: 5px; font-weight: bold;} .autocomplete-group strong { display: block; } You may need to adjust these styles later for better matching your site colors. But initially you can adjust #276fdb color, which refers to light blue highlight color on the above screenshots. Step 3. Go to Website UI -> Language files -> default and add the following texts at the end: urls.search_suggestions = /search_suggestions.php search_suggestions.similar_videos = Videos search_suggestions.similar_albums = Albums search_suggestions.similar_models = Models search_suggestions.type = searches The last option may be set to one of these values: searches (similar search mode) and mixed (content mode). Step 4. Go to Website UI -> Page Components -> include_footer_general.tpl and add the following code right before the closing </body> tag: <script src="{{$config.statics_url}}/static/js/jquery.autocomplete.min.js"></script> <script> {{if $lang.search_suggestions.type!='none' && $lang.urls.search_suggestions}} $('#search_form input[type="text"]').autocomplete({ minChars: 3, deferRequestBy: 100, serviceUrl: '{{$lang.urls.search_suggestions}}', {{if $lang.search_suggestions.type=='mixed'}}groupBy: 'type',{{/if}} paramName: 'q', onSelect: function(suggestion) { if (suggestion && suggestion.data && suggestion.data.url) { window.location = suggestion.data.url; } } }); {{/if}} </script> NOTE: if you theme is not KVS default theme, then you may need to change this selector to match your theme search input: #search_form input[type="text"] Step 5. If you need adjustments and customizations, you may want to check with plugin official documentation. Suggestions are configured to be max 20 per group and their sorting is set to popularity (most popular first). If you want to adjust these parameters, just go to Website UI -> Pages -> Search Suggestions for the needed controls.
  15. This is the code for KVS default theme, but should also work for other themes as well. May need CSS adjustments for popup dialog to be displayed correctly (each theme may use their own CSS styles). Please put this code into Website UI -> Page components -> include_footer_general.tpl right before the closing </body> tag: <div id="ageverify" class="hidden"> <strong class="popup-title">Age confirmation</strong> <div class="popup-holder"> <form> <p style="margin-bottom: 10px"> By using the site, you acknowledge you are at least 18 years old. </p> <div class="bottom"> <input type="button" name="continue" class="submit" value="Continue" style="margin-right: 10px"> <input type="button" name="exit" class="submit" value="Exit"> </div> </form> </div> </div> <script> if ($.cookie('kt_agecheck') != '1') { setTimeout(function () { $.fancybox($('#ageverify').html(), { topRatio: 0.3, closeBtn: false, modal: true, afterShow: function () { this.inner.find('input').click(function () { if ($(this).attr('name') == 'continue') { $.cookie('kt_agecheck', '1', {expires: 365, path: '/', samesite: 'Lax'}); $.fancybox.close(); } else { window.location = 'https://google.com'; } }); } }); }, 10); } </script> If you want this age check to be displayed for visitors from certain countries only, you should move it to an advertising and configure this advertising to be displayed only for the selected countries. First, go to Website UI -> Advertising and create a new advertising spot named Age Verify with external ID = spot_age_verify. Do not specify HTML code for the spot. Then create a new Advertising and choose it into Age Verify spot. Copy-paste the code above into advertising HTML code. Select the countries you want it to be limited to. Finally insert this advertising spot into Website UI -> Page components -> include_footer_general.tpl right before the closing </body> tag: {{insert name="getAdv" place_id="spot_age_verify"}} If your server has GEOIP module installed and can detect countries correctly, visitors from the configured countries should be able to see this age verification warning.
  16. The following can be done with just few steps in KVS: Step 1. Go to Website UI -> Pages -> Index page editor and insert list_categories block into the desired place in page template: {{insert name="getBlock" block_id="list_categories" block_name="Categories And Videos"}} Save. Step 2. Now you should see Categories And Videos block in the list of blocks on Index page. Open it for editing and configure the following settings: Cache lifetime (s): 3600 items_per_page (Integer): set 0 if you want to display all categories; otherwise set the max number of categories sort_by (Sorting): configure sorting as needed pull_videos (On/Off): enable pull_videos_count (Integer): set the number of videos for each category (in our example it is 3) pull_videos_sort_by (Sorting): set sorting for videos under each category NOTE: if you want that only certain subset of categories are displayed, you may need to enable some filters under Static filters parameters. In Template code specify this code (the code is given for KVS default theme and 5.2.0 version, it may not work in earlier versions): {{foreach item="item_category" from=$data}} <div class="headline"> <h2>{{$item_category.title}}</h2> </div> <div class="box"> <div class="list-videos"> <div class="margin-fix" id="{{$block_uid}}_items"> {{if count($item_category.videos)>0}} {{foreach item="item" from=$item_category.videos}} <div class="item {{if $item.is_private==1}}private{{elseif $item.is_private==2}}premium{{/if}} {{if $item.status_id==0}}disabled{{elseif $item.status_id==2}}error{{elseif $item.status_id!=1}}processing{{/if}}"> <a {{if $item.view_page_url!=''}}href="{{$item.view_page_url}}"{{/if}} title="{{$item.title}}" {{if $item.rotator_params!=''}}data-rt="{{$item.rotator_params|replace:"pqr=":""}}"{{/if}}> <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}} {{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}} {{if $item.status_id==1}} {{if $lang.enable_memberzone=='true'}} {{foreach item="fav_index" from=$lang.videos.predefined_favourites}} <span class="ico-fav-{{$fav_index}}" title="{{$lang.videos.list_action_add_to_favourites[$fav_index]}}" data-fav-video-id="{{$item.video_id}}" data-fav-type="{{$fav_index}}"></span> {{/foreach}} {{/if}} {{/if}} {{if $item.is_hd==1}}<span class="is-hd">HD</span>{{/if}} </div> <strong class="title"> {{if $lang.videos.truncate_title_to>0}} {{$item.title|truncate:$lang.videos.truncate_title_to:"...":true}} {{else}} {{$item.title}} {{/if}} </strong> <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}}"> {{$object_rating|string_format:"%d"}}% </div> </div> <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}} {{/if}} <div class="added"><em>{{$added_date|date_format:$lang.global.date_format}}</em></div> <div class="views">{{$item.video_viewed|traffic_format}}</div> </div> </a> </div> {{/foreach}} {{else}} <div class="empty-content">{{$list_videos_empty_message|default:$lang.common_list.no_data}}</div> {{/if}} </div> </div> {{if count($item_category.videos)>0}} <div class="load-more"> <a href="{{$lang.urls.videos_by_category|replace:"%DIR%":$item_category.dir|replace:"%ID%":$item_category.category_id}}">{{$lang.common_list.load_more}}</a> </div> {{/if}} </div> {{/foreach}}
  17. Theme customization in KVS in most cases won't require any specific programming knowledge except HTML / CSS / JS, which are core web technologies. In addition to that some basic Smarty template language skills are required to be able to generate iterations, conditional rendering (IF / ELSE) and do some basic formatting. Changing design logo, styles and colors Each KVS theme may come with some pre-installed skins, so first of all you should check if there is any skin that closely matches you needs. Please find this in Website UI -> Theme settings page: NOTE: this page also contains a huge list of basic settings that allow you easily switch off or on some site functionality. After you choose the skin you need, the only possible way to edit its look is to modify CSS styles in one of the CSS files used by theme. This will require some basic CSS knowledge for sure. You can find the needed CSS file by looking into the source code of your site index page and searching for rel="stylesheet" (depending on your theme there may be slightly different CSS filenames): <link href="https://www.kvs-demo.com/static/styles/all-responsive-white.css?v=8.1" rel="stylesheet" type="text/css"/> <link href="https://www.kvs-demo.com/static/styles/jquery.fancybox-white.css?v=8.1" rel="stylesheet" type="text/css"/> The majority of design styles is located in all-responsive-white.css file (this filename could be different for other themes). The easiest way to edit styles is to work locally: Open source code of a page you want to modify (typically Index page from the start). You can do that by prefixing browser URL with view-source: view-source:https://www.kvs-demo.com Then copy all the page HTML code and save it into a local HTML file (e.g. index.html). Modify link's href to point to a local CSS file in the same directory: <link href="all-responsive-white.css?v=8.1" rel="stylesheet" type="text/css"/> Copy all-responsive-white.css file from the server into the same directory where you put index.html. Now if you open your local index.html file, your browser should open the same page, but it will use your local CSS file for rendering styles. You can now modify styles in all-responsive-white.css locally without any need of copying it back to server. Use CSS editor of your choice that will make your work much easier. Once your finished your local changes, replace this file on server's FTP with your local copy. Use this approach to modify styling for any page, by saving its local HTML copy and editing CSS file locally. In order to modify site logo, you will typically need to replace logo image file in /static/images directory on your server. There is one logo.png or logo.jpg image file that you need to replace. Changing texts, URLs and SEO There is separate article on this: Working with SEO, texts and URLs in KVS themes. Customizing favicon In order to specify your custom favicon you need to modify this file on your project's FTP: https://kvs-demo.com/favicon.ico You can use online Favicon Generator to create ICO file from your PNG. Adding / removing menu items Many menu items can be controlled from Website UI -> Theme settings page, where you can activate or deactivate some site sections. However if you need to add menu items that are not initially supported by theme, you have to manually modify header template in Website UI -> Page components -> include_header_general.tpl. Please find the following or similar code: <ul class="primary"> <li {{if $page_id=='index'}}class="selected"{{/if}}> <a href="{{$lang.urls.home}}" id="item1">{{$lang.header.primary_menu_home}}</a> </li> ... other menu items using LI tags ... </ul> In order to add new menu items, you should add the following code in the desired position: <li> <a href="https://menuitemurl.com" id="item_custom1">Menu Item Text</a> </li> Then if you want to add some custom styling for it, you can use its ID (item_custom1 in the example) to add some specific styling in theme CSS file (see Changing design logo, styles and colors section above): #item_custom1 { color: red; } Understanding KVS page structure Each URL you see in browser is generated by KVS site engine. A URL is first parsed by special web server module called mod_rewrite and then addressed to one of KVS page definitions. You can find these page definitions in Website UI -> Pages section of KVS admin panel. Every page definition specifies template code that typically has the following components: Setting header variables for page title, description, keywords and so on Site header Main area which may render multiple page blocks or just a piece of static HTML code Site footer Here is example of Index page code, which highlights all of the above components: Site header and footer are inserted by using simple {{include}} statements and this is nothing more than moving the same reusable code fragment into a named component. You can edit them in KVS admin panel under Website UI -> Page components section. Header component supports a number of variables that should be set prior to including it into page definition using {{assign}} statement: page_title page_description page_keywords page_rss page_canonical Their meaning is clear, except probably page_rss and page_canonical. The first one should provide URL for page RSS (if any), and the last one should provide URL for canonical tag of the page. You may also notice that these variables refer some other variables. There is special global $lang variable, which contains all texts from localization (Website UI -> Texts section). All templates refer $lang variables instead of specifying texts directly, so that multiple language support is possible. However you are not required to follow the same concept; it is absolutely legal to specify the actual texts here, honoring Smarty template syntax and using quotes to specify texts: {{assign var="page_title" value="This is the actual title for index page"}} Why these page_xxx variables are needed after all? Header code is located in reusable page component and used on all site pages. But in reality this code is not 100% same for different pages and some parts of it should be different, for example page title. These different pieces are provided via variables, and each page definition provides its own values for these variables. The main area of page structure is where the actual content is being displayed. In KVS everything which is displayed from the database is displayed using specific page blocks. There is a block to display video list, there is a block to display video player, and etc. There are almost 60 different types of blocks. You can find the full list of blocks with their documentation in Website UI -> Page blocks overview. Blocks are the primary building elements of a KVS-powered site. Unlike page components, which are designed to facilitate HTML code reuse, blocks have power to query data from the database using various filtering and sorting options, and display it. At the same time blocks can use page components inside them, because reusable code can be anything, not just header or footer. For example blocks that display different lists use include_pagination_block_common.tpl page component to render pagination controls inside them. If you look into Index page again, you will notice that it contains 2 blocks for rendering 2 separate video lists: Videos Watched Right Now and Most Recent Videos (in default theme). Each of these can be edited separately and defines a huge set of parameters that can be used to tweak block behavior. Parameters are grouped by their common usage sense, for example there are parameters to control lists, such as number of items and sorting. However these parameters never control rendering logic, e.g. which colors should be used (this is controlled by CSS styles) or which fields to render for each video in list (this is controlled by block template). Understanding KVS routing Some pages are designed to serve only 1 URL, for example Index page, which is only used when rendering site index. Another example is [Static] DMCA page, which renders static HTML text. Many of other pages are designed to render similar things for different URLs. For example different video URLs: each of them renders player for different videos, but KVS engine uses the same page definition for these URLs, and the only difference is parameters provided via the URL: https://www.kvs-demo.com/videos/368/dj-manian-ravers-fantasy/ https://www.kvs-demo.com/videos/155/eminem-not-afraid/ These both URLs have the same pattern, but only different in video ID and directory, so they are being routed using the same rule in .htaccess file (this file is processed by web server's rewrite module): RewriteRule ^videos/([0-9]+)/([^/]+)/$ view_video.php?id=$1&dir=$2 [L,QSA] This RewriteRule is basically routing the given URLs into URLs understandable to KVS, and if you try to open them you can see that they display the same content as original URLs: https://www.kvs-demo.com/view_video.php?id=368&dir=dj-manian-ravers-fantasy https://www.kvs-demo.com/view_video.php?id=155&dir=eminem-not-afraid Routing doesn't provide any additional functionality, it just hides the internal page structure and generates nice URLs. KVS provides a simple way to see which page definition serves any specific site URL. This feature is only available for admins, so you should be logged into admin panel to see that. On any site page generated by KVS you should see KVS Admin Toolbar at the bottom, which indicates page definition and its structure. By clicking on edit icon next to page definition name you will open page definition editor: Where to modify a specific section on a specific page Please note that all texts that are displayed can be modified in Website UI -> Texts section, you don't even need to edit code to modify them. You may need to edit code if you want to change the way how data is being displayed, or change HTML code around it. Here are top 6 places where you may need to change something in site layout / contents: Site header. Please go to Website UI -> Page components -> include_header_general.tpl to edit header HTML code. Site footer. Please go to Website UI -> Page components -> include_footer_general.tpl to edit footer HTML code. Video list display. All video lists have the same display, which can be found in Website UI -> Page components -> include_list_videos_block_common.tpl. This component renders list title, sorting controls and the list itself. Video player section. Please go to Website UI -> Pages -> View Video page -> Video View block. Index page contents. Please go to Website UI -> Pages -> Index page. The number of videos displayed in categories, tags, top rated and other. Please go to Website UI -> Pages -> Common Videos List page -> Common Videos List block. Since all these lists are very similar to each other, they are rendered by a single page definition and the only difference is in parameters that are passed there to enable specific filtering (by category, by tag), or specific sorting (by top rated, by most viewed). If you want to change the contents of different popups, such as login, signup and other similar dialogs, please go to Website UI -> Global blocks. All popups in KVS themes are typically rendered by global blocks, as they are not connected to any specific page. If none of the above, then you should use KVS Admin Toolbar to analyze page structure and see which page definition or specifically which block on it you need to change. Toolbar allows you highlight each block and see where it is displayed in your theme design: Understanding template variables KVS doesn't provide list of all variables and their descriptions, there are thousands of them in many contexts. However there are several other ways you can get the info you need. But before we list them, here are some highlights on what are variables in templates. In Smarty template every variable is rendered using this syntax: {{$variable_name}} If a variable is an object, its properties or fields can be accessed using dot syntax: {{$object.property}} There can be multiple levels of nesting here like this: {{$object.another_object.property}} Some variables are arrays (e.g. contain multiple values), and you should iterate over them to access their values. Iteration in Smarty is typically done using {{foreach}} block: {{foreach from=$array_variable item="item"}} {{$item}} - all templates in KVS typically use $item variable to access every item of the iteration {{$item.property}} - in many cases iteration item is an object, so you need to use dot syntax to access its properties {{/foreach}} NOTE: Smarty syntax requires the closing {{/foreach}} for each iteration, if you forget it your template will not be displayed. You can define your own local variables in templates and then use them in some other parts of this template: {{assign var="variable_name" value="variable value"}} ... {{if $variable_name=='variable value'}} ... show something {{/if}} KVS templates typically use local variables for page components, which are reusable parts of HTML code (see Understanding KVS page structure section above). Therefore you can find local variables usage in almost every page definition, that include header component. If you want to use a variable inside string of text, Smarty will require you to use very specific syntax to escape it - using `` quotes. It is a common practice to insert variables into some bigger texts, typically used for SEO. For example consider this: {{assign var="seo_text" value="This is a text with a `$variable` value"}} The other possible way to do the same is to use some placeholder for a variable and replace function to replace placeholder with the actual value: {{assign var="seo_text" value="This is a text with a %1% value"|replace:"%1%":$variable}} The second approach is widely used in KVS templates, because all texts are localized and configured in Website UI -> Texts section and templates use $lang global variable to refer texts by their IDs. In this case introducing placeholders is the only possible option to allow inserting dynamic values into static texts: {{assign var="seo_text" value=$lang.some_text_identifier|replace:"%1%":$variable}} All 3 variants will actually do the same, they will assign "This is a text with a SOMETHING value" into a variable named $seo_text, that can be further used to display its value in this template. It is very important to understand that all variables have certain scope where they are valid to be used: Global variables. These variables can be used globally in any template. This is $config object, which contains all system-specific configuration values that are set in /admin/include/setup.php file. This is $lang variable, which contains all localized texts. Session variables. These variables contain data of the user that is currently logged in (if no user is logged in, then they will be empty). An example of such variable is $smarty.session.username that contain username of the current user. Such variables can be used inside page templates and page components that are included in page templates (typically header and footer). However it is not legal to use session variables inside block templates for most of the block types due to caching specifics. KVS will show caching error if you try to use session variable where not allowed. Request variables. You can also refer URL request parameters in templates globally using $smarty.get.parameter_name. For example when rendering page for this URL: https://www.kvs-demo.com/videos/155/eminem-not-afraid/ you can refer 155 and eminem-not-afraid via certain $smarty.get.xxx variables. However this practice should be avoided and in most cases it is not needed. Not all request variables can be used and this is again connected to caching specifics. KVS will show caching error if you try to use request variable where not allowed. Page variables. These variables can only be used inside page templates and page components that are included in page templates. These are all variables that you set locally in page template via {{assign}} directive. These are also variables, pushed from blocks to their parent page via $storage object. Block variables. Block variables are variables that contain the actual data being displayed. They can only be used inside block templates and page components that are included in block templates. In KVS all blocks are fully isolated from each other and from the page that contains them. You can't use block variables from one block in any other block on the same page. Similar to that, you can't use block variables in parent page template. And vice versa, you can't use page variables in blocks on this page. So before you can use any variables in the place where you want to modify anything, you should clearly understand if this is a page context, or a block context. If this is a block context, which exactly block it is. Which variables should be used in templates As we explained in the previous section, it is important to understand where you are going to put changes. Is this a page template, or a block template, and which exactly block template it is. In most cases you will be editing block templates and page components used inside blocks (for example, include_list_videos_block_common.tpl that renders video list). The first way you can see which variables can be used is to look into default template example of this block type in Website UI -> Page blocks overview. Unfortunately we didn't yet finish updating these templates for all blocks, so you may find it missing the needed data for some block types. Here is how it looks for the block where completed: {{foreach item="item" from=$data}} <a class="item" title="{{$item.title}}" href="{{$config.project_url}}/categories/{{$item.dir}}/"> ID: {{$item.category_id}}<br/> Title: {{$item.title}}<br/> Description: {{$item.description}}<br/> Directory: {{$item.dir}}<br/> Synonyms: {{$item.synonyms}}<br/> Total videos: {{$item.total_videos}}<br/> Today videos: {{$item.today_videos}}<br/> ... </a> {{/foreach}} You can find almost all data values that are supported by block objects, so you just need to find the needed variable and copy it. A more advanced way of finding which variables can be used is provided by debugger: Debugger renders page structure and lists all blocks that are used on this page. For each block it displays a structure of available variables with their ACTUAL values for the given time and URL: On the example screenshot you can see list of variables for the Related Videos block on View Video page. You can see $data variable, which is an array of 12 items (video objects). If you further expand any item you will see all properties of that item: Here we expanded the first video object and we can see all its properties, for example title and video_viewed (the number of views), and etc. Since $data is an array, it is possible to access all array items via their index, e.g. $data.0 will refer the first item and $data.1 will refer the 2nd item. However in real world there is no need to access individual array items, it is typically needed to display them one by one, so here is where {{foreach}} iteration is used: {{foreach from=$data item="item"}} {{$item.title}} - will display Baby Alice - Piña Colada Boy for the first item {{/foreach}} Using debugger this way will help you to understand which variables you can use in any specific block that you see on a page and what their values could be. As we also said in previous section, block variables cannot be used anywhere outside block templates and page components that are used in block templates. However, most blocks will push some variables into special $storage object that can be used in parent page to refer some data from its blocks. These variables are also visible in debugger under Block data in storage: Common Videos List concept To be continued...
  18. KVS uses the same template for all video lists by default, you can find it in Website UI -> Page components -> include_list_videos_block_common.tpl. There are 2 possible ways you can customize this template for different pages / specific blocks. Create customized version of the original template Duplicate template using options menu in Website UI -> Page components section and specify its new name (e.g. include_list_videos_block_customized.tpl). Then modify its code to the needed styling, and finally switch the needed block(s) to use the new template instead of the original one. For example if you want to modify the display of Videos Watched Right Now block on Index page, here is how its template looks like: Replace this line: {{include file="include_list_videos_block_common.tpl"}} With this: {{include file="include_list_videos_block_customized.tpl"}} So you will force Videos Watched Right Now block on Index page to use your customized version of video list template, while all other places will use the original version. Introduce new variables Duplicating template works well, but if your changes are relatively small, you will end up having 2 similar templates that are different with only few things (e.g. thumb size, for example). This could be a problem for future, when you need to modify something else and you will have to modify it in both places. You can use variables and set them only when needed to avoid duplication. If you look into the image above, you will see that Videos Watched Right Now block already sets 2 variables before calling include_list_videos_block_common.tpl template: {{assign var="list_videos_title" value=$lang.videos.list_title_watched_right_now}} {{assign var="list_videos_use_h1" value="true"}} You can introduce your own variables, their names could be any, no need to prefix in specific way, but make sure they are not used in include_list_videos_block_common.tpl template. For example you can introduce variable to specify custom thumb size: {{assign var="list_videos_custom_thumb_size" value="240x150"}} Then you should also update include_list_videos_block_common.tpl template to use this variable in the needed way. You should always assume that this variable may not be set in 100% cases, so you should always have some default behavior: {{$item.screen_url}}/{{if $list_videos_custom_thumb_size}}{{$list_videos_custom_thumb_size}}{{else}}{{$lang.videos.thumb_size}}{{/if}}/{{$item.screen_main}}.jpg If you have logic like {{if some variable set}} use this variable {{else}} use default value {{/if}} - you can shortcode it to: {{$item.screen_url}}/{{$list_videos_custom_thumb_size|default:$lang.videos.thumb_size}}/{{$item.screen_main}}.jpg
  19. There are 2 possible ways to show ads in video lists: Replacing 1 video with advertising of the same size and visual properties (e.g. width, height and structure to save the list layout). This is also called as native advertising. Use this if you know how to design your ad's layout to look similar to the video item. Breaking list into 2 parts and showing advertising between them. In both cases you should edit the following template: Website UI -> Page components -> include_list_videos_block_common.tpl. This template has the following iteration to display all list items: {{foreach item="item" from=$data}} <div class="item ...."> ... some list item rendering appears here </div> {{/foreach}} IMPORTANT! You should give a name to this iteration: {{foreach item="item" name="videos" from=$data}} Replacing specific item(s) with native advertising If you want to replace one item (#3) with advertising change this code to look like this: {{foreach item="item" name="videos" from=$data}} {{if $can_manage!=1 && $smarty.foreach.videos.iteration==3}} {{insert name="getAdv" place_id="spot_advertising_video_list_item"}} {{else}} <div class="item ...."> ... some list item rendering appears here </div> {{/if}} {{/foreach}} This will insert advertising spot with external ID spot_advertising_video_list_item into the template. Right now there is no such advertising spot, so you should go and create it in Website UI -> Advertising -> Add spot. You should also add advertising into this new spot so that it appeared instead of 3rd video item. If you don't add advertising to this spot or don't create it, every video list will just skip rendering item #3 and will render less items than expected. IMPORTANT! Please make sure you also add a closing {{/if}} tag before closing {{/foreach}} tag to not break template syntax. This code fix replaces third video item on every public video list, including related videos, videos by category, index and etc. If you want to replace only on index, change {{if}} to this: {{if $can_manage!=1 && $smarty.foreach.videos.iteration==3 && $page_id=='index'}} If you want to replace everywhere EXCEPT related videos change {{if}} to this: {{if $can_manage!=1 && $smarty.foreach.videos.iteration==3 && $page_id!='view_video'}} If you want to replace ONLY on related videos change {{if}} to this: {{if $can_manage!=1 && $smarty.foreach.videos.iteration==3 && $page_id=='view_video'}} Finally, if you want to replace 2 videos with native ads, here the code: {{foreach item="item" name="videos" from=$data}} {{if $can_manage!=1 && $smarty.foreach.videos.iteration==3}} {{insert name="getAdv" place_id="spot_advertising_video_list_item1"}} {{elseif $can_manage!=1 && $smarty.foreach.videos.iteration==4}} {{insert name="getAdv" place_id="spot_advertising_video_list_item2"}} {{else}} <div class="item ...."> ... some list item rendering appears here </div> {{/if}} {{/foreach}} NOTE: each video item should be replaced individually with an individual ad. It is not possible to replace 2 video items with a single 'wide' ad, because it won't be rendered correctly on all types of devices. Therefore in the last example we used 2 different advertising spots with different IDs. Inserting advertising in between video lines The key thing here is to understand that it is not possible to insert advertising each 3 or 4 videos, for example. This is because list layout is adaptive and for some devices in can be 4 in a row, for other devices 3 in a row and for smaller devices it can be 2 or 1 in a row. Therefore with such layout it makes sense to show advertising after each 12 items. Here is how: {{foreach item="item" name="videos" from=$data}} <div class="item ...."> ... some list item rendering appears here </div> {{if $can_manage!=1 && $smarty.foreach.videos.iteration==12}} {{insert name="getAdv" place_id="spot_advertising_video_list_item"}} {{/if}} {{/foreach}} This will insert advertising spot with external ID spot_advertising_video_list_item into the template. There is no such advertising spot by default, so you should go and create it in Website UI -> Advertising -> Add spot. If you want to show after 12 and 24 items, then the code should be changed to this: {{foreach item="item" name="videos" from=$data}} <div class="item ...."> ... some list item rendering appears here </div> {{if $can_manage!=1 && $smarty.foreach.videos.iteration==12}} {{insert name="getAdv" place_id="spot_advertising_video_list_item1"}} {{elseif $can_manage!=1 && $smarty.foreach.videos.iteration==24}} {{insert name="getAdv" place_id="spot_advertising_video_list_item2"}} {{/if}} {{/foreach}}
  20. KVS Ultimate edition provides Posts module that can be used for extending KVS functionality in many ways: Displaying any structured textual data, such as news, stories, blog posts. Collecting information from members, such as validation documents. Connecting additional items to videos and albums, for example reviews. Extending KVS data structure to additional data types. In order to use posts, one should first create a post type. All posts of the same type have the same data structure and they can be customized with different sets of custom fields in Settings -> Customization section. That's why posts are so powerful customization feature. How to use text posts in KVS KVS default theme provides basic support for text posts: ability to render lists of specific post types and view pages for them. Here are basic steps to get this info displayed. 1) Create a post type in Posts section of admin panel: NOTE: it is not required to have External ID being similar to URL pattern, but if possible it is recommended to have them similar for better routing understanding. 2) After creating a post type you can start creating posts of this type. Under Posts section in admin panel you should now see ability to display all posts of News type and create new posts of News type. 3) In .htaccess file in the root folder of your project you can find the following sample RewriteRules designed for news post type: # posts example -------------------------------------------------------------------------------------------------------- RewriteRule ^news/$ posts_list.php?post_type=news [L,QSA] RewriteRule ^news/([0-9]+)/$ posts_list.php?post_type=news&from=$1 [L,QSA] RewriteRule ^news/([0-9]+)/([^/]+)/$ view_post.php?id=$1&dir=$2 [L,QSA] RewriteRule ^news/([^/]+)/$ view_post.php?dir=$1 [L,QSA] Duplicate these rules for your new post type, if it has another URL pattern or external ID. Replace the first part of RewriteRule with your post type URL pattern (^news/) and replace the last part of RewriteRule with your post type external ID (?post_type=news). Access your post list from the given URL. If RewriteRules are set up correctly, you will see list of your posts with clickable links to their view pages: https://www.kvs-demo.com/news/ 4) If you need to change design of post list or post view pages, please find them in Website UI section of admin panel: 5) In order to add menu item, edit Website UI -> Page components -> include_header_general.tpl template. Find this UL node (the example is for default theme, other themes may have another UL syntax): <ul class="primary"> ... </ul> And add the following list item (LI) to it at the desired position: <li {{if $storage.list_posts_common_posts_list.post_type_info.external_id=='news'}}class="selected"{{/if}}> <a href="{{$config.project_url}}/news/">News</a> </li>
  21. Here is what we want to display: Go to Website UI -> Pages -> View Video -> Video View block editing. In its template code locate player initialization code: kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars); Adjust this code a bit to assign its result to player_obj variable as the following: var player_obj = kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars); Add the following code to the place where you want to render timeline screenshots outside the player: {{assign var="format_postfix" value=".mp4"}} {{assign var="screenshot_size" value="180x100"}} {{if $data.formats[$format_postfix].timeline_screen_amount>0}} <div style="text-align: center; padding: 10px"> {{section name="screenshots" start="0" loop=$data.formats[$format_postfix].timeline_screen_amount}} <a style="cursor: pointer; position: relative; display: inline-block" onclick="player_obj.seek({{$smarty.section.screenshots.index*$data.formats[$format_postfix].timeline_screen_interval}})"> <img src="{{$data.screen_url}}/timelines/{{$data.formats[$format_postfix].timeline_directory}}/{{$screenshot_size}}/{{$smarty.section.screenshots.index+1}}.jpg" /> {{assign var="timeline_duration" value=$smarty.section.screenshots.index*$data.formats[$format_postfix].timeline_screen_interval}} <span style="position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,0.5); color: white; padding: 2px 5px">{{$timeline_duration|durationToHumanString}}</span> </a> {{/section}} </div> {{/if}} NOTE: please note the highlighted video format postfix (.mp4) and screenshot format size (180x100). These are given for default KVS configuration, but in your case you should check which your video format has timeline screenshots enabled and which timeline screenshot format you want them to be rendered. Apply styling as needed. It is also recommended that you move styles to CSS, as using inline styles is not a good practice.
  22. General sitemap structure in KVS KVS renders sitemap dynamically as a typical web page configured to produce XML format instead of HTML. You can find sitemap page in Website UI -> Pages -> [system] Sitemap: Due to specific sitemap structure limitations on the number of links, KVS breaks down sitemap into several sitemap indexes, rendering different entities: Videos Albums Playlists Tags Models Categories Sponsors Channels Sitemap indexes that can potentially generate more than 50k links are additionally broken down into paginated sitemaps. That's why sitemap page renders 2 blocks for some object types (videos, albums, playlists, models, tags): one block is for listing all pages (e.g. Sitemaps Videos), another block is for listing all objects per page (e.g. Links to Videos). For categories, sponsors and channels KVS considers that their amount is small, so they are rendered as single lists. Adding search queries into sitemap Since the number of search queries is potentially unlimited, you should consider adding them as 2 blocks similar to models. 1) Open Sitemap page for editing and add the following 2 blocks into it: {{insert name="getBlock" block_id="search_results" block_name="Sitemaps Search Queries"}} {{elseif $smarty.request.type=='search'}} {{insert name="getBlock" block_id="search_results" block_name="Links To Search Queries"}} Here are the highlighted locations where to add these blocks as their position is quite important: 2) Save page editor. After saving you can see that 2 new blocks were added to page structure with default settings: 3) Open Sitemaps Search Queries block for editing. Set its template to the following code: {{section start=1 loop=$nav.page_total+1 name=pages}} <sitemap> <loc>{{$lang.urls.sitemap}}?type=search&amp;from_links_search={{$smarty.section.pages.index}}</loc> <lastmod>{{$smarty.now|date_format:"%Y-%m-%d"}}</lastmod> </sitemap> {{/section}} Set Cache lifetime (s) to 86400. Set the following parameter values: items_per_page = 500 var_from = from_sitemaps_search sort_by = Query text Desc Save this block editor. 4) Open Links To Search Queries block for editing. Set its template to the following code: <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> {{foreach item=item from=$data}} {{assign var="query" value=$item.query|replace:"-":"[dash]"|replace:"&":"%26"|replace:"?":"%3F"|replace:"/":"%2F"|replace:" ":"-"|replace:"[dash]":"--"|rawurlencode}} <url> <loc>{{$lang.urls.search_query|replace:"%QUERY%":$query}}</loc> <lastmod>{{$smarty.now|date_format:"%Y-%m-%d"}}</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> {{/foreach}} </urlset> Set Cache lifetime (s) to 86400. Set the following parameter values: items_per_page = 500 var_from = from_links_search sort_by = Query text Desc Save this block editor. 5) Now you should have a fully working search sitemap inside your main sitemap index. Try opening your sitemap and look for "search" keyword: http://domain.com/sitemap.php If your database has search queries, you should see something like this in your sitemap: http://domain.com/sitemap/?type=search&from_links_search=1 http://domain.com/sitemap/?type=search&from_links_search=2 ....
  23. This post explains how to configure video_view block (the actual video player block) to render different data specific to TV series. In order to find this block please go to Website UI -> Pages -> View Video page -> video_view. Open for editing to see its template code and configuration parameters. NOTE: the code is valid for video_view block only and can't be put into other templates. How to render basic TV series / TV season info Rendering basic data is quite simple as all information is selected by default inside video_view block. TV series: ID: {{$data.dvd_group.dvd_group_id}} Title: {{$data.dvd_group.title}} URL: {{$data.dvd_group.view_page_url}} Cover 1: {{if $data.dvd_group.cover1}}{{$data.dvd_group.base_files_url}}/{{$data.dvd_group.cover1}}{{/if}} Cover 2: {{if $data.dvd_group.cover2}}{{$data.dvd_group.base_files_url}}/{{$data.dvd_group.cover2}}{{/if}} TV season: ID: {{$data.dvd.dvd_id}} Title: {{$data.dvd.title}} URL: {{$data.dvd.view_page_url}} Cover 1 front: {{if $data.dvd.cover1_front}}{{$data.dvd.base_files_url}}/{{$data.dvd.cover1_front}}{{/if}} Cover 1 back: {{if $data.dvd.cover1_back}}{{$data.dvd.base_files_url}}/{{$data.dvd.cover1_back}}{{/if}} Cover 2 front: {{if $data.dvd.cover2_front}}{{$data.dvd.base_files_url}}/{{$data.dvd.cover2_front}}{{/if}} Cover 2 back: {{if $data.dvd.cover2_back}}{{$data.dvd.base_files_url}}/{{$data.dvd.cover2_back}}{{/if}} How to configure player to automatically redirect to the next video inside a TV season Locate the following line in template code: kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars); Change it to the following: var player_obj = kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars); {{if $data.dvd.dvd_id>0}} {{strip}} {{query_kvs table="`$config.tables_prefix`videos" select="list" where_dvd_id=$data.dvd.dvd_id sort_by="dvd_sort_id asc" assign="videos"}} {{assign var="next_video_url" value=""}} {{assign var="next_video_title" value=""}} {{assign var="current_video_url" value=""}} {{foreach from=$videos item="item"}} {{if !$next_video_url && $current_video_url}}{{assign var="next_video_url" value=$item.view_page_url}}{{assign var="next_video_title" value=$item.title}}{{/if}} {{if $item.video_id==$data.video_id}}{{assign var="current_video_url" value=$item.view_page_url}}{{/if}} {{/foreach}} {{/strip}} {{if $next_video_url}} player_obj.listen('ktVideoFinished', function() { // use {{$next_video_title}} variable for title if you need window.location = '{{$next_video_url}}'; }); {{/if}} {{/if}} NOTE: inside ktVideoFinished callback you may want to add some timer ticking and GUI notification that user will be redirected to a new video page in 3...2...1... This is not covered by this post, use some JS code to render the needed GUI. How to display all series in a TV season List of series will be ordered based on their sorting ID. {{if $data.dvd.dvd_id>0}} {{query_kvs table="`$config.tables_prefix`videos" select="list" where_dvd_id=$data.dvd.dvd_id sort_by="dvd_sort_id asc" assign="videos"}} <ul> {{foreach from=$videos item="item"}} <li> ID: {{$item.video_id}} Title: {{$item.title}} URL: {{$item.view_page_url}} Duration: {{$item.duration}} Screenshot: {{$config.content_url_videos_screenshots}}/{{$item.video_id|get_dir_by_id}}/{{$item.video_id}}/320x180/{{$item.screen_main}}.jpg </li> {{/foreach}} </ul> {{/if}} How to display all seasons in a TV series List of seasons will be ordered based on their sorting ID. {{if $data.dvd_group.dvd_group_id>0}} {{query_kvs table="`$config.tables_prefix`dvds" select="list" where_dvd_group_id=$data.dvd_group.dvd_group_id sort_by="sort_id asc" assign="seasons"}} <ul> {{foreach from=$seasons item="item"}} <li> ID: {{$item.dvd_group_id}} Title: {{$item.title}} URL: {{$item.view_page_url}} Cover 1 front: {{if $item.cover1_front}}{{$config.content_url_dvds}}/{{$item.dvd_id}}/{{$item.cover1_front}}{{/if}} Cover 1 back: {{if $item.cover1_back}}{{$config.content_url_dvds}}/{{$item.dvd_id}}/{{$item.cover1_back}}{{/if}} Cover 2 front: {{if $item.cover2_front}}{{$config.content_url_dvds}}/{{$item.dvd_id}}/{{$item.cover2_front}}{{/if}} Cover 2 back: {{if $item.cover2_back}}{{$config.content_url_dvds}}/{{$item.dvd_id}}/{{$item.cover2_back}}{{/if}} </li> {{/foreach}} </ul> {{/if}}
  24. When grabbing content from other sites it is possible that number of tags or categories for a specific content will be quite high, so that rendering them all will look bad for design. In this case it is very easy to fix theme templates to list only first N tags or categories and skip the rest. The same approach works for both videos and albums. For videos you should edit Website UI -> Pages -> View Video page -> video_view block template. For albums it will be Website UI -> Pages -> View Album page -> album_view block template. Both templates have the following foreach constructs to render list of tags and categories: {{foreach item="item" from=$data.tags}} <a ...>{{$item.tag}}</a> {{/foreach}} {{foreach item="item" from=$data.categories}} <a ...>{{$item.title}}</a> {{/foreach}} Add name="list" attribute to foreach construct in order to access list properties. If you want to display first 10 tags, wrap <a> tag with this condition: {{if $smarty.foreach.list.iteration<=10}}...{{/if}}: {{foreach item="item" from=$data.tags name="list"}} {{if $smarty.foreach.list.iteration<=10}} <a ...>{{$item.tag}}</a> {{/if}} {{/foreach}} Change 10 to 5 in order to limit list rendering to 5 items: {{foreach item="item" from=$data.categories name="list"}} {{if $smarty.foreach.list.iteration<=5}} <a ...>{{$item.title}}</a> {{/if}} {{/foreach}} That's it! WARNING: please make sure you do not forget the closing {{/if}} tag.
×
×
  • Create New...