Jump to content

Search the Community

Showing results for tags 'webp'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me

Found 1 result

  1. 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/static/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.
  • Create New...