theme Theme customization: how to show video lists differently on different pages or sections

[Tech Support]

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